나중에 어떻게 될지 몰라서 일단은 Expo를 사용하지 않고 react native cli를 사용해서 프로젝트를 세팅해보려고 합니다. 이미 프로젝트는 다 셋업 했는데 사실 시작하기가 그렇게 쉽지는 않더라고요. 리엑트 네이티브 현업에서 사용했지만 처음부터 새로 시작해보는 경우는 이번이 처음이라 많이 버벅되기도 했고 설치하는 것 도 마냥 쉽지만 않았습니다. Realm은 로컬 데이터 스토리지로 사용을 하려고 도입했습니다.
Realm을 사용하는 방법이 그렇게 많이 나와 있지는 않아서 처음에 조금 해맸는데 다들 이 글을 보시고 빠르게 셋업 하셨으면 좋겠습니다.
* 모든 셋업은 맥북 m1 기준으로 작성하였습니다. 언어는 typescript를 사용합니다.
목차
- Node 설치
- ruby rbenv 설치해서 루비 버전 맞추기
- xcode로 simulator가 돌아가는지 보기
- eslint/prettier 설치하기 및 npm script 설정
- path alias 사용하기(경로 요약하기)
- react-navigation 설치 및 간단한 사용법
- atomic design 디렉토리 만들기
- realm db 설치 및 간단한 사용법
Node 설치
노드는 nvm으로 설치 하려고 합니다. 계발을 하다 보면 가끔 다운 그레이드나 업그레이드를 해야 할 때가 자주 생기기 때문입니다. nvm이 있으면 그때마다 쉽게 버전을 변경할 수 있기 때문에 아주 용의 합니다. nvm 설치는 brew가 있으면 아주 간단합니다. Mac을 사용한다면 brew 설치를 꼭 해두시는 게 좋습니다.
nvm을 아래와 같이 brew로 설치 해줍니다.
brew install nvm
설치를 마치고 nvm을 터미널에 입력했을 때 안되고 아래와 같은 에러 메시지가 나온다면 path가 제대로 설정되어 있지 않기 때문입니다.
-bash: nvm: command not found
zshrc에 등록을 해줘야 합니다. bashrc를 사용한다고 해도 동일합니다.
먼저 zshrc 설정 파일을 열어서
vi ~/.zshrc맨 아래에 다음과 같이 저장해줍니다.
source ~/.nvm/nvm.sh
rbenv 설치
rbenv는 node로 따지면 nvm과 같습니다. ruby 버전 관리 툴이라고 보시면 됩니다.
rbenv 설치가 필요 없을 수도 있습니다. 저 같은 경우에는 원래 설치되어 있는 ruby와 필요한 ruby 버전이 맞지 않아서 react-native cli로 프로젝트 dependancy 설치할 때 에러가 나서 설치하게 되었습니다. 에러 내용은 아래와 같습니다. 필요한 버전이랑 지금 사용하고 있는 버전이 같지 않다고 에러를 보여 줍니다.
✖ Installing Bundler
error Your Ruby version is 2.6.10, but your Gemfile specified 2.7.5ruby 버전을 다시 2.7.5로 설치하는 것보다 rbenv를 설치하는 게 좋다고 생각해서 설치했습니다. 다른 프로젝트는 다른 루비 버전이 필요할 수 도 있으니까요
설치 방법은 아래와 같습니다.
brew update
brew install ruby-build
brew install rbenv
rbenv install 2.7.5
rbenv global 2.7.5
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(rbenv init -)"' >> ~/.zshrc
cocoapods가 설치 및 에러 해결방법
node에는 npm이 있듯 ios는 cocoapods를 이용해서 패키지를 관리하게 되는데 제가 설치할 때에는 cocoapods가 있는데 인식을 잘 못해서 찾아 보던 중 찾은 방법을 공유합니다.
에러 메시지는 다음과 같았습니다.
warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here:
여러 방법을 시도해 봤지만 마지막에 됐던 것은 bundle install 그리고 bundle exec pod install이었습니다. 위에 같은 경우에는 cocoapods가 여러 개 있다고 말하는 것이기 때문에 위에 스크립트를 돌리면 자동으로 찾아주는 것 같습니다.
cd ios
bundle install
bundle exec pod install
cd ..
yarn ios마지막으로 다시 설치를 해주면서 끝내 줍니다. 이제 설치가 끝났습니다. 한번 ios simulator에 앱이 잘 돌아가나 확인해 줍니다.
ESLINT와 PRETTEIR를 vscode에서 저장하면 자동으로 포맷되게 하기
필요한 vscode extensions를 몇 가지 설치하고 해 보도록 하겠습니다. 제가 설치한 익스텐션들입니다.
github copliot, code snap, import cost는 무시해 주시기 바랍니다.
Command + shit + p를 입력한 뒤에 settings.json(workspace)를 찾아서 열어주세요. 그리고 아래 세팅을 복사 붙여 넣기를 해주시면 됩니다.
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}package.json에 lint와 prettier를 추가할 수도 있습니다.
"lint": "eslint -c .eslintrc.js src --ext .js,.jsx,.ts,.tsx",
"prettier": "prettier src/**/*.{ts,tsx} --write"세팅에 가서 format on save가 선택이 안되어 있다면 선택하면 됩니다.
typescript 사용하는 react native에서 import alias(절대 경로)를 설정하기
먼저 babel-plugin-module-resolver를 설치해야 합니다.
설치를 마치면 babel.config.js에 방금 전에 설치한 모듈을 추가해 줘야 합니다. 추가하려면 babel.config.js를 업데이트해줘야 합니다.
예를 들면 아래와 같이 할 수 있습니다. 하지만 typescript를 사용한다면 tsconig.json 또한 path 설정을 해줘야 합니다.
plugins: [
[
'module-resolver',
{
alias: {
// This needs to be mirrored in tsconfig.json
'@components': './src/components',
'@atoms': './src/components/Atoms',
},
},
],
],
아래와 같이 baseurl과 path 설정을 해줍니다.
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"@components/*": ["src/components/*"],
"@atoms/*": ["src/components/Atoms/*"],
},
}
이제 리엑트 네이티브 계발을 시작하는데 필요한 기초적인 것은 모두 설정했다고 생각합니다. 이제 필요한 것은 react-navigation과 앱에 크기에 따라 state management 라이브러리를 설치하면 되겠습니다.
즐거운 개발되세요