React Native 개발환경 설정(mac OS)

예전부터 노션에서 작성해 왔던 글 중, 지금도 계속 유지보수하고 있는 글을 옮겨 보려고 한다.

 

바로 macOS에서 React Native 개발 초기 설정 방법이다. React Native를 처음 접하거나, 윈도우로 개발하다가 맥으로 넘어온 사람들이 처음 설정할 때 구글링해서 나온 방법으로 삽질하는 경우가 많았던 만큼, 내 나름대로 가장 확실하다고 판단되는 방법을 정리하였다.

 

참고로 이 방법은 인텔 맥 유저와 애플실리콘 맥 유저 모두에 해당하지만, 간혹 나오는 일부 단계는 애플실리콘 맥 유저만 보면 되고 인텔 맥 유저는 넘어가면 된다.

1. Xcode 설치

Xcode?
혹시 모르는 사람이 있을 수 있으니..... Xcode는 아이폰, 맥, 애플워치, 아이패드, 애플TV용 앱을 개발하기 위한 IDE 툴이다. 예상했을 수도 있지만, 애플이 개발해서 배포한 만큼 macOS가 아닌 그 어떤 OS에서도 설치가 불가능하다.

 

App Store에서 설치하면 된다!

 

p.s. 시간이 겁나 오래 걸림 → CPU에 따라 한 시간, 한 시간 반(M1), 어떤 경우(M1 MAX)는 50분 정도...

참고
현재 회사에서 근무하고 있는 현역 개발자 중 회사의 Apple Developer 멤버십에 초대된 경우, Apple Developer 다운로드 페이지에 들어가면 원하는 Xcode 버전으로 내려받을 수 있다. 특히 Xcode에 문제가 생겨 급하게 다운그레이드해야 할 때 유용하다. 다만 로그인이 필요하기 때문에 Apple Developer 멤버십에 가입되어 있거나 멤버로 초대되어 있어야 한다.

2. Homebrew 설치

Homebrew는 맥에서 사용할 수 있는 패키지를 설치하고 관리할 수 있는 맥 전용 패키지 관리자이다. 개발용이 아니더라도 많은 앱을 Homebrew로 설치할 수 있기 때문에, 개발을 하려면 거의 필수로 설치해야 하는 시스템이다.

 

→ 설치 링크로 들어가서 Install Homebrew 아래에 적혀 있는 코드를 터미널에서 실행한다.

 

실행이 끝나면 맨 아래 Next Steps에 적혀 있는 두 명령어를 실행하고(인텔 맥은 추가로 실행할 명령어가 없다), 터미널을 종료(cmd+Q)했다가 다시 실행한다.

 

터미널에서 아래 명령어를 실행했을 때

brew

 

이렇게 Homebrew에서 실행할 수 있는 명령어들이 나오면 정상적으로 설치가 완료된 것이다!!!!!

3. 필수 실행 앱 설치

React Native 개발을 하면 필수로 설치하게 되는 앱들(VSCode, iTerm)을 먼저 설치한다.

brew install --cask visual-studio-code iterm2

p.s. iTerm은 서드파티 터미널 앱이다. 굳이 원하지 않으면 설치하지 않아도 되지만, iTerm2를 쓰는 게 편하다. 특히 oh-my-zsh로 터미널을 예쁘게 꾸며서 쓰고 싶다면 iTerm2를 설치해야 한다(맥 기본 터미널에서는 꾸민 게 깨져서 나온다!).

4. oh-my-zsh 설치 (원하면 넘어가도 됨!!!)

몇몇 포스팅에서는 oh-my-zsh를 무조건 설치해야 한다고 나와 있는데, 분명히 얘기하지만 이건 필수가 아니다!!!!

 

위에서 살짝 언급했던 oh-my-zsh는 터미널 커스터마이징 프레임워크다. 많이들 쓰는 iTerm 터미널을 예쁘게 꾸미고 싶을 때 설치해서 쓰는 거니, 터미널을 꾸미지 않고 그냥 쓰고 싶다면 이 단계는 얼마든지 넘어가도 좋다.

 

필수가 아니니 설정 과정은 아래 유튜브 영상 링크로 대신하겠다(그 부분만 보면 됨!!!).

 

유튜브 노마드코더 - 개발자를 위한 M1 풀옵션 맥북프로 세팅! (oh-my-zsh 부분)

 

이 자리를 빌려, 영상의 주인공이신 니꼬 쌤 감사합니다. 유튜브 항상 재미있게 보고 있습니다. ㅋㅋㅋ

5. Node.js 설치

node 설치하기

brew install node

설치 확인

node --version

→ 버전이 뜨면 정상 설치된 것이다!!!

 

node를 설치하면 npm도 자동으로 설치되니 npm 설치 여부도 같이 확인해 준다.

npm -version

참고
작업할 프로젝트가 여러 개라면, 각 프로젝트를 언제 생성했는지에 따라 react-native 버전이 모두 다릅니다. react-native 버전에 따라 호환되는 node 버전이 다를 수 있으니 참고하시기 바랍니다. 평소에는 문제가 없다가, 컴퓨터 OS를 업데이트한 뒤 node 버전이 호환되지 않는 경우가 간혹 있었습니다.

6. watchman 설치

watchman은 특정 디렉터리나 파일이 바뀌면 지정한 동작을 실행할 수 있게 해 주는 프로그램이다.

 

React Native는 디버그 모드에서 코드를 수정할 때마다 새로 컴파일해서 보여 주는데, 이걸 watchman이 해 주는 것이다.

brew install watchman

설치 확인

watchman --version

7. CocoaPods 설치

Swift 또는 Objective-C 프로젝트의 종속성 관리 매니저다. 외부에서 받아온 라이브러리를 iOS 환경에 적용하고 관리할 때 CocoaPods를 통해 이루어진다.

sudo gem install cocoapods

설치 확인

pod --version

8. Ruby ffi 설치 (애플실리콘 맥 유저만!!!)

애플실리콘 맥을 쓰고 있다면 CocoaPods로 외부 패키지를 적용하거나 설치하는 게 안 될 수 있다. 이 오류를 Ruby ffi가 해결해 줄 수 있기 때문에, 애플실리콘 맥을 쓰고 있다면 이건 무조건 설치해야 한다.

sudo gem install ffi

9. 환경변수 설정

이번에는 zshrc를 이용한 환경변수 설정이다. 많은 포스트에서는 vi 편집기를 열어서 설정하라고 나와 있지만, 다들 어려운 vi 편집기 때문에 삽질하면서 금 같은 시간을 뺏기기 싫을 것이다. 그래서 가장 쉬운 방법인 VSCode에서 설정하는 방법으로 작성하였다.

 

터미널에서 아래 명령어를 실행한다.

code ~/.zshrc

참고
간혹 터미널에서 code 명령어가 실행되지 않을 때가 있다. 그럴 때는 VSCode를 직접 열고 shift+command+p를 누른 다음 Shell Command: Install 'code' command in PATH를 검색한다. 검색되면 클릭하고, VSCode와 모든 터미널을 종료했다가 다시 실행하면 code 명령어가 연결될 것이다!

 

VSCode에서 zshrc 파일이 열리면 아래 코드를 맨 아래에 붙여 넣고 저장한다.

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

바뀐 환경변수를 확실히 반영하기 위해 VSCode를 종료하고 터미널에서 아래 명령어를 실행한 다음, 터미널을 종료했다가 다시 실행한다.

source ~/.zshrc

참고!!!!!!!!
macOS Big Sur 이상에서는 기본 셸이 zsh로 잡혀 있기 때문에 zshrc를 열면 되지만, 그보다 낮은 버전에서는 bash_profile을 열어야 하는 경우가 있을 수 있으니 참고하시길!!!!

 

참고) 현재까지의 macOS 버전 (이보다 이전 버전은 OS X로, macOS가 아님!!)

 

• macOS Sierra (시에라) (2016)
• macOS High Sierra (하이 시에라) (2017)
• macOS Mojave (모하비) (2018)
• macOS Catalina (카탈리나) (2019)
• macOS Big Sur (빅서) (2020)
• macOS Monterey (몬터레이) (2021)
• macOS Ventura (벤투라) (2022)
• macOS Sonoma (소노마) (2023)
• macOS Sequoia (세쿼이아) (2024) → 2024년 6월 14일 기준 개발자 베타

10. react-native-cli 설치

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

두 번째 명령어(npm install -g react-native)에 대한 부가 설명은 글 맨 아래 공지사항에 적어 두었습니다.

 

설치 확인

react-native --version

주의!!!!!!
간혹 몇몇 포스트에서 expo cli를 설치해서 연결하는 경우가 있어서 헷갈릴 수 있으니 확실히 짚고 넘어가겠다. expo는 React Native를 쉽게 쓸 수 있게 해 주는 플랫폼 중 하나다(git을 쓸 수 있는 플랫폼 중에 GitHub가 있는 것과 같은 논리). 보통 현업에서는 expo cli를 쓰지 않고 react-native-cli를 쓴다. expo가 Flutter처럼 몇몇 컴포넌트를 기본 제공한다는 장점은 있지만, 실제로 쓸 수 있는 기능이 많지 않다. 따라서 더 많은 걸 해 보고 싶다면 expo가 아닌 react-native-cli를 설치해야 한다.

11. Xcode 설정

 

Xcode를 실행한 뒤 왼쪽 위의 Xcode → Preferences로 들어간다.

 

 

Components로 들어가서 원하는 시뮬레이터를 1개 설치한다.

12. 안드로이드 스튜디오 설정

안드로이드 스튜디오 설치

brew install --cask android-studio

JDK 설치

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk11

알려드립니다
기존에 React Native로 개발하던 분들 중 기존 프로젝트에 Firebase v6 모듈을 연결해 둔 상태라면 최소 JDK 11 이상이 필요하기 때문에, 기존의 JDK 1.8 명령어(adoptopenjdk8) 대신 JDK 11 설치 명령어로 수정하였습니다. 자세한 내용은 제가 작성한 React Native Firebase v6 마이그레이션 문서를 참고해 주세요!!

 

Java 설치 확인

java --version

Java 컴파일러 설치 확인 (JDK를 설치하면 같이 설치됨)

javac --version

안드로이드 스튜디오를 실행하고 계속 Next를 누르다가, Standard와 Custom 중 하나를 고르라고 하면 Custom을 선택하고 계속 Next를 누른다.

 

SDK Components Setup 화면에서는 Performance (Intel® HAXM)과 Android Virtual Device를 선택하고, 그다음부터는 계속 Next만 누르면 된다.

 

 

설정이 끝나면 SDK Manager에 들어간다. 그리고 아래쪽의 Show Package Details를 누른다.

 

그다음 아래 4개 항목을 체크하고 OK를 눌러 설치한다.

 

• Android SDK Platform 29
• Intel x86 Atom System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

마지막으로 안드로이드 adb, sdk 환경변수를 추가해 준다.

 

위와 같은 SDK Manager에서 Android SDK Location을 복사한다. 그리고 터미널에서 아까처럼 zshrc를 연다.

code ~/.zshrc

맨 아래에 이 코드를 붙여 넣고 저장한다.

export ANDROID_HOME={복사한 안드로이드 sdk 위치}
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

그리고 다시 한번 VSCode를 종료하고 아래 명령어를 실행한 다음, 터미널도 한 번 더 종료했다가 다시 실행한다.

source ~/.zshrc

13. Rosetta 활성화 (애플실리콘 맥 유저 주목!!!!!)

이건 애플실리콘 맥을 쓰는 사람이라면 정~말 중요하고, 절~~대 생략하면 안 된다!!!!!! 인텔 맥 유저는 쿨하게 패~~스

Rosetta?
Rosetta(로제타)는 macOS에서 기본 제공하는, 인텔 CPU와 비슷한 환경을 만들어 주는 에뮬레이터이다. 글을 처음 작성한 2022년 4월 기준으로 애플실리콘 맥이 출시된 지 얼마 되지 않았기 때문에 애플실리콘 환경에서는 쓸 수 없는 앱이나 프로그램이 있었다. Rosetta가 인텔 CPU를 탑재한 것과 비슷한 가상 환경을 제공해서, 인텔 CPU에서만 동작하는 프로그램을 애플실리콘 맥에서도 오류 없이 쓸 수 있게 된다. react-native-cli도 애플실리콘 환경에서는 쓸 수 없었기 때문에, 애플실리콘 맥을 쓰고 있다면 반드시 Rosetta를 활성화해야 한다. (처음에는 비활성화 상태)

 

이 단계를 지나치면 안 되는 사람

 

• 애플실리콘(M1, M1 Pro, M1 Max, M1 Ultra 등)이 탑재된 맥 사용자 (2020년 11월 애플 이벤트 이후 출시된 모든 맥이 해당)

Rosetta 활성화 명령어

/usr/sbin/softwareupdate --install-rosetta --agree-to-license

만약에!!!!
Rosetta를 활성화해도 간혹 프로그램이 Rosetta로 실행되지 않는 경우가 있다. 이럴 때는 React Native 구동에 쓰이는 프로그램(Xcode, iTerm 등)이 Rosetta로 실행되도록 직접 설정할 수 있다. Finder → 응용 프로그램에서 해당 앱을 우클릭하면 정보 가져오기가 있다. 그 안에서 Rosetta를 사용하여 열기를 체크하면 해당 앱은 무조건 Rosetta로 실행된다. React Native 구동에 관여하는 앱만 설정해 주면 된다!!!

참고 자료

• 맥(Mac)에 React Native 개발 환경 구축하기
• 유튜브: 노마드코더 - 개발자를 위한 M1 풀옵션 맥북프로 세팅
• Velog: "TypeError: cli.init is not a function - React Native"
• Stack Overflow: "TypeError: cli.init is not a function for react native"
• 내 경험

공지사항

1) react-native 프로젝트 생성 시 오류 발생 관련

기존에 제가 작성한 문서대로 설정한 뒤 TypeScript 템플릿으로 프로젝트를 생성하는 아래 명령어를 실행하면

npx react-native init SampleProject --template react-native-template-typescript

다음과 같은 오류가 발생할 수 있습니다.

/opt/homebrew/lib/node_modules/react-native-cli/index.js:302
    cli.init(root, projectName);
        ^
TypeError: cli.init is not a function

이 오류는 정확한 원인이 파악되지는 않았지만, 이 포스트와 Stack Overflow에 올라온 게시글을 참고하여, npm에서 react-native(react-native-cli 아님)를 전역으로 설치하는 명령어를 위(10번)에 추가해 두었습니다.

 

2023년 4월 26일 이전에 제 글을 참고하시다가 이 오류가 발생하셨던 분은 아래 명령어로 react-native-cli와 react-native를 다시 설치해 주시기 바랍니다. (이 명령어는 루트에서 실행해야 합니다.)

npm uninstall -g react-native-cli
npm install -g react-native-cli
npm install -g react-native

 

이 글은 2022년 4월 25일 velog에 작성했던 글을 티스토리로 옮긴 것입니다. 이후 추가한 공지사항(2023년 4월 26일)과 macOS 버전 정보(2024년 6월 14일)까지 함께 옮겼습니다.