rbenv와 cocoapod, 프로젝트 initialize - RN 프로젝트 (2)

이 글은 Apple Silicon (M1) Mac, MacOS 13.5 Ventura 을 기준으로 작성되었습니다.

 

1. node, watchman 설치
2. XCode 설치 & Command Line Tools
3. 삽질의 결과: npm vs npx, react-native-cli vs react-native
4. rbenv 설치
5. cocoapods 설치
6. initialize

오늘 포스트는 공식 문서를 기반으로 약간 변형하여 작성했다.

미심쩍은 부분이 조금이라도 있다면, 이 블로그를 그대로 따라하기 보단 공식 문서를 직접 확인해보자!!

Setting up the development environment · React Native

 

node, watchman 설치

---

node는 지난 시간에 nvm 을 통해서 설치완료! (링크)

RN 프로젝트 (1) nvm

 

watchman은 이젠 익숙해진 Homebrew로 빠르게 설치해보자. 안 익숙하다면? (링크)

Mac 개발 기본 세팅! (2) Homebrew 설치

brew install watchman

손 쉽게 클리어.

 

XCode 설치 & Command Line Tools

---

iOS 앱을 build하기 위한 도구이다. IDE 기능도 갖추고 있어서 swiftUI로 여러 애플 OS의 앱을 만들 때도 코드 편집기로 사용한다.

 

다운로드 경로: 앱스토어 (링크)

‎Xcode

 용량이 더럽게 크다......

 

설치를 완료하면 아래 사진처럼 CLT가 잘 설정되었는지 확인해주자.

+ 친구의 제보로 알게 되었다. 터미널에서 CLT 관련 작업을 하려면 명령어로 XCode 버전을 설정해줘야 한다.

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

끝!

 

삽질의 결과: npm vs npx,  react-native-cli vs react-native

---

여기서부턴 반나절동안 삽질한 결과를 농축해서 담아냈다.
요점은 Homebrew, npm -g install 등으로 react-native-cli 패키지를 설치하면 안된다는 점이다.

실패 과정이니 자세한 과정은 생략하고, 요점만 담았다. 다음 챕터로 넘어가려면 여기

brew install react-native-cli
npm install -g react-native-cli

react-native init ProjectName --template react-native-template-typescript

 

아무리 커맨드를 입력해도 pakage.json, pakage-lock.json, node_modules 3개의 파일 말고는 아무것도 생성되지 않았다.

 

구글링 해보니, npx 명령어로 설치하면 된다고 한다.

npx react-native init MakeIt --template react-native-template-typescript

npm -g install 로 설치한 패키지는 버전 관리가 안되는 문제가 있기 때문에 명령어를 입력할 때 새 패키지를 받아와서 명령어를 수행하고 다시 패키지를 지우는 방식이 npx의 방식이라고 한다. 자연스럽게 최신의 수정사항이 반영된 기능을 누리게 되는 건데... 오케이

쓰읍...하아...

이상해서 공식 문서를 찾아본 결과 react-native-cli 패키지를 지우라고 한다...

다 지운 뒤에 다시 커맨드를 입력해보니

npx react-native init MakeIt --template react-native-template-typescript

입질이 온다

설치가 되는 것 같다!

 

즉 정리해보면,

1. react-native-cli 라이브러리를 설치해도 똑같이 react-native 명령어는 입력할 수 있으나, (헷갈림 포인트)
   이젠 사용하면 안된다. (레거시가 된 듯 하다.) 이것이 내가 겪은 문제.
2. 그럼에도 npx를 쓰는 것이 npm -g install 로 설치된 패키지를 사용하는 것 보다 관리, 최신화 측면에서 유리하다.

가설: 그럼 npx 커맨드에서 사용됐던 react-native 라이브러리를 설치해서 이걸로 프로젝트를 생성하면 설치가 될 것이다.

 

npm -g install react-native

npm -g list

⬆️ 잘 설치되었나 확인~

react-native init ProjectName --template react-native-template-typescript

아하.....

맞았다. 문제는 react-native-cli 에 있었던 것. Homebrew 로 CLI 들을 관리하려다가 이상한 데 묶였다.

그래도 덕분에 npx 가 무엇인지 잘 알게 되었다.

나와 비슷한 문제를 겪고있다면, history -al 명령어를 입력해 설치한 패키지 이름을 다시 확인해보자.

npm -g uninstall react-native

실험도 끝났으니 다시 지워주자.

 

rbenv,  gem 설치

---

react-native 라이브러리는 ruby gems 와 cocoapods 을 바로 설치하려고 하던데, brew로도 관리가 가능하지 않을까? 싶어서 급하게 명령어를 취소하고 알아보았다.

brew install rbenv ruby-build

🐥: 아니아니, ruby는 뭐고 gem는 뭐고 rbenv는 또 뭔데?

쉽게 설명하면 ruby가 아빠다. > 개발 언어 그 자체 + ruby 언어로 개발된 코드를 다룰 때 사용하는 CLI 이름

CLI 역할로만 봤을 때는

• ruby ≈ node : 개발 언어를 실행하는 명령어
• gems ≈ npm : 패키지 매니저
• rbenv ≈ nvm : ruby 버전 매니저

인 셈이다.

React Native 프레임워크에 이 ruby 패키지 매니저인 gem 이 필요하다.

brew install rbenv ruby-build

# rbenv
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init - zsh)"

~/.zshrc에 위의 텍스트 추가.

rbenv -v

순조롭다

이제 특정 버전의 ruby를 설치하자.

rbenv install --list

rbenv install 3.1.4

ruby -v

Yes!

 

cocoapods 설치

---

Homebrew에서 관리하는 패키지인가?

cocoapods

Yes!!

brew install cocoapods

pod --version

EZ

 

initialize

---

마지막이다. 아까 시도했던 npx ~ 명령어를 써서 프로젝트를 생성해보자. 아까 명령어 입력하고 출력된 텍스트에서

warn Ignoring custom template: 'react-native-template-typescript'. Starting from React Native v0.71 TypeScript is used by default.

이런 걸 봤다. typescript 템플릿이 default 라는건데, 아주 바람직스러운 현상이다.

거추장스러운 --template react-native-template-typescript 옵션을 떼자.

npx react-native init ProjectName

설치된 프로젝트를 열고 루트 디렉토리에서

npm run ios

커맨드 입력하면?

으하하 나도 환영이다

Metro 프로그램 실행이 맥 기본 Command 앱으로 실행된다. 이걸 iterm2 새 탭에서 열리도록 바꿀 수 있지 않을까?

그건 다음 포스팅에서 찾아봐야겠다.

 

버전 정리

Homebrew	4.1.5
nvm	0.39.4
node	18.17.1
npm	9.6.7
rbenv	1.2.0
ruby	3.1.4p223
gem	3.3.26
pod(cocoapod)	1.12.1

 

끝!