[React Native] React Native 개발환경 세팅하는 방법

 

 

나의 OS환경은 Apple M1 Pro, Ventura 13.5이다.

VSCODE에서 run 했을때 시뮬레이터로 켜지는지 안켜지는지 확인해야한다.

• ios는 시뮬레이터를 직접 실행하지 않아도 xcode가 실행되면서 실행된다
• 그러나 android는 android studio를 실행하고, 실행 디바이스 설정 후 실행을 직접 시켜준후 run 해야 앱이 실행된다!

 

1. Brew 설치

Homebrew는 Mac에서 필요한 패키지를 설치하는 도구이다. brew를 통해 여러가지 패키지를 편리하게 명령어 하나로 설치할 수 있다.

https://brew.sh/ko/

# 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# homebrew 버전확인
brew --version

 

2. Node.js 설치 (LTS)

React Native도 Javascript를 쓰는 프레임워크 이므로 Javascript 런타임을 제공하는 Node.js 설치가 필요한다.

https://nodejs.org/

Node.js

여기서 다운로드해도 brew를 통해 설치해도 된다. 이런 패키지들을 설치하고 잘 설치되었는지 꼭 버전확인 명령어로 확인하자.

 

3. Watchman 설치

Watch라는 이름에서도 알 수 있듯 특정 폴더나 파일을 감시하다 변경사항이 있을 시 변화를 감지하고 해당파일만 다시 빌드하도록 도와준다.

# watchman 설치
brew install watchman

# watchman 설치 확인
watchman --version

 

4. Xcode 설치 (iOS를 위해서)

이 과정이 은근 인내심을 요한다. 앱스토어에서 다운 받을 수 밖에 없는데 엄청...오래걸린다.

5. Cocoapods 설치

ios 개발에 사용되는 의존성관리자. Ruby 기반이라 Ruby 버전에 따라 설치 안될 수 있음
→ 그럴 때는 rbenv 사용해서 루비 버전 확인 및 설치 https://velog.io/@kkachi/React-Native-세팅을-처음부터

# rbenv 설치
brew install rbenv 

# 전역 설정 
rbenv global 버전 

# 지역 설정
rbenv local 버전

 

cocoapods 설치

cocoapods이란 Objective-C 또는 Swift 라이브러리를 사용할 수 있게 도와주는 모듈이다. React native로 Android, ios 모두 만들어내니까 ios 개발하려면 필요한 의존성 관리도구인 것이다.

sudo gem install cocoapods

 

 

6. 환경변수 설정

vi ~/.zshrc
# zshrc 오픈 후 아래 복붙

.zshrc 파일 열어서 환경변수 맨 아래에 추가 그 다음 source 명령어로 변경된 zshrc 프로파일을 적용시킨다.

 

7. react-native-cli 설치

npm install -g react-native-cli

 

8. xcode에서 → preference에서 ios 시뮬레이터 선택해서 설치

시뮬레이터가 있어야 내가 개발하고 있는 코드를 빌드해서 확인해볼 수 있다.
여러가지 ios 기기로 띄워보면서 개발된 내용을 확인할 수 있다.

 

9. Android Studio 설정

# android studio 설치 
brew install --cask android-studio 

# JDK 설치
brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk11

 

 

10. android studio 실행 후 → sdk manager에서

• Android SDK Platform
• Sources for Android
• Google APIs ARM 64 Atom System Image
• Google APIs ARM 64 Atom_64 System Image

 

11. 설치 후 Android adb, sdk 환경변수 추가

뭔가 설치하거나 추가하고 나면 환경변수 추가할 사항이 있는지 체크해야한다. 

export ANDROID_HOME=$HOME/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

 

12. 지금까지 환경설정 점검하기

npx @react-native-community/cli doctor

react-native doctor라는 명령어로 환경설정이 잘 됐는지 확인해볼 수 있다. 

위와 같이 어떤 점이 문제가 있는지 쭉 점검하고 체크해준다. 에러나 경고메시지가 뜬 부분을 찾아서 해결하고 나면 react native개발을 위한 환경설정이 마무리가 된다.

 

13. 프로젝트 시작하기

드디어 길고 긴 환경설정 과정을 거쳐 프로젝트를 시작할 수 있게 되었다. 아래의 명령어에서 프로젝트명만 치환하면 된다.

npx react-native init 프로젝트명