React Native
[React-Native] 1. 초기 셋팅
React Native 개발 환경을 M1 Mac에 세팅한 과정을 정리합니다.
Mac(M1) OS
1. Watchman
Watchman은 페이스북에서 만든 파일 변경 감지 도구입니다.
React Native는 코드를 저장하기만 해도 변경 내용이 자동으로 반영되는 '빠른 새로고침(Fast Refresh)' 기능을 제공합니다.
이 기능에 필요한 것이 Watchman입니다.
Watchman은 소스 코드의 변화를 감지해 자동으로 빌드하고 화면에 반영하는 역할을 합니다.
Watchman은 macOS용 패키지 관리자인 Homebrew로 설치합니다.
Homebrew 공식 문서에 나와 있는 명령어로 Homebrew를 설치합니다.
brew install watchman
watchman --version
이렇게 버전이 표시되면 Watchman 설치가 끝난 것입니다.
2. Node.js
Node.js는 공식 사이트에서 LTS 버전을 내려받아 설치했습니다.
node --version
버전이 표시되면 Node.js 설치도 끝입니다.
3. Xcode 및 그 외 개발 환경
Xcode는 Mac App Store에서 설치할 수 있습니다.
설치하면 iOS 개발에 필요한 여러 도구도 함께 설치됩니다.
용량이 커서 시간이 오래 걸립니다. (5G 와이파이에서 3시간 정도 걸렸습니다.)
설치가 끝나면 터미널을 다시 열고
sudo gem install cocoapods
pod --version
4. JDK
Android 개발에는 Java가 필요하고, 이를 위해 JDK(Java Development Kit)를 설치해야 합니다.
JDK는 크게 두 가지 방법으로 설치할 수 있습니다.
- Oracle 홈페이지에서 직접 설치
- OpenJDK로 설치
React Native에서 Java 버전 오류가 계속 나서, Azul에서 제공하는 JDK 11로 맞췄습니다. jdk11 Version
java --version
javac --version
11 버전이 표시되면 JDK 설치가 끝난 것입니다.
5. Android Studio
Android Studio는 Android 개발을 위한 통합 개발 환경(IDE)입니다.
가운데 More Actions를 누르고 SDK Manager에 들어가 사진처럼 설정합니다. 31 버전 기준으로 작업했고, SDK도 31.0.0만 체크해도 됩니다.
어느 위치에서나 사용할 수 있도록 환경 변수를 설정해야 합니다.
먼저 .zshrc 파일을 엽니다.
sudo vi ~/.zshrc
다음 내용을 추가합니다.
export ANDROID_HOME=/Users/dongeun/Library/Android/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
첫 줄에는 본인 컴퓨터의 Android SDK 경로를 입력해야 합니다. (SDK Manager 화면 맨 위에서 확인할 수 있습니다.)
.zshrc를 수정했다면 다음 명령어로 반영합니다.
source ~/.zshrc
환경 변수가 제대로 설정됐는지 다음 명령어로 확인할 수 있습니다.
echo $ANDROID_HOME
마지막으로 Android 설치와 환경 설정이 잘 됐는지 확인합니다.
adb --version
31 버전이 정상적으로 표시되면 성공입니다.
기기를 선택하고 앞에서 설정한 버전으로 맞추면 Android 환경 설정이 끝납니다.
공모전을 React Native로 준비하면서 환경 세팅에만 이틀이 걸렸습니다. 다음 글에서는 프로젝트 생성 방법을 정리하겠습니다. 이번에는 Expo가 아닌 React Native CLI로 설치했습니다. Expo가 장점이 많지만, 시도하려던 기능에는 적합하지 않아서 CLI를 선택했습니다.
댓글 0