MacOS에 React Native 환경 구축 및 프로젝트 생성 (Android & iOS)

초기 환경 설정

node 설치

React Native는 React와 같이 Javascript으로 개발을 하기 때문에 node가 필요합니다. node 설치는 아래 링크를 참고하시면 됩니다.

macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)

 

watchman 설치

Watchman은 Facebook이 개발한 오픈 소스 툴입니다. 파일 시스템에서 변화를 감지하고 해당 변화에 반응하는 작업을 자동화할 수 있게 해주는 도구입니다.

 

주로 개발하면서 변경된 소스 코드 모니터링하고 자동화 작업을 하는데 사용합니다. 예를들어, 자동화 작업이라고 하면 아래와 같은 작업들이 있습니다.

• 파일이 수정되거나 새 파일이 추가되면 자동으로 빌드를 실행
• 또는 테스트를 시작하는 등의 작업

 

이렇게 작업의 자동화를 해주고, 생산성을 높여주는 역할을 합니다.

 

Watchman을 설치하는 방법은 brew를 이용하면 간단합니다.

brew install watchman

 

iOS 환경 구성

Xcode 설치

iOS 시뮬레이터 설치 및 빌드를 위해 Xcode 최신버전이 필요합니다. 아래 링크를 통해 최신버전을 다운로드 받습니다.

 

‎Xcode

 

Xcode를 실행하고, Settings > Locations 에서 Command Line Tools를 가장 최신버전으로 설정합니다.

cli tool 가장 최근 버전으로 설정

 

iOS 시뮬레이터 설치

Settings > Platforms에서 하단의 '+' 아이콘을 눌러 iOS Simulator를 설치합니다.

iOS 시뮬레이터 설치

 

시뮬레이터를 설치하는데 시간이 다소 소요됩니다.

설치완료

 

Android 환경 구성

JDK 설치

brew tap homebrew/cask-versions
brew install --cask zulu17

 

여러 버전의 JDK를 쉽게 관리하려면 아래 링크를 참고하시길 바랍니다.

MacOS에 쉽게 여러 버전의 JDK 관리하는 방법

 

Android SDK 환경변수 설정

Android SDK 설치가 완료되면 환경 변수를 설정해야합니다. 환경 변수 설정을 위해 .zshenv 파일을 엽니다.

vim ~/.zshenv

 

아래와 같이 스크립트를 추가합니다. (PATH에 sdk 경로를 추가하는 내용)

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

 

이후 환경변수를 적용하기 위해 터미널을 닫고 다시 열거나, 또는 아래 명령어를 수행합니다.

source ~/.zshenv

 

프로젝트 생성 및 실행

프로젝트 생성

프로젝트를 생성하기 전에 node가 18버전 이상인지 확인해보고, 아니라면 아래 링크를 참고하여 node 버전을 변경합니다.

$ node -v
v18.19.0

 

프로젝트를 생성하기 전에 react native를 설치한적이 있다면 이전 버전의 cli 툴을 제거하기 위해 아래 명령어를 수행합니다.

npm uninstall -g react-native-cli @react-native-community/cli

 

이제 아래 명령어로 프로젝트를 생성해봅시다.

npx react-native@latest init AwesomeProject

 

처음 RN 프로젝트를 생성하면 필요한 라이브러리를 설치하느라 시간이 다소 걸릴 수 있습니다. (저는 5분정도 소요됐습니다)

프로젝트 생성 완료

 

프로젝트 실행

완료되었으면 프로젝트를 실행해봅시다.

cd AwesomeProject
yarn start

 

명령어를 실행하면 아래와 같이 Metro라는 문구가 보입니다. Metro는 React Native를 빌드해주는 Javascript 빌드 툴입니다.

콘솔에 나온대로 i를 입력하면 iOS로 실행되고, a를 입력하면 Android로 실행됩니다.

Metro 툴에 의해 프로젝트 빌드 및 실행

 

만약 바로 Android 혹은 iOS로 실행하려면 yarn start 대신 아래 명령어를 사용하면 됩니다.

# Android 실행
yarn android

# iOS 실행
yarn ios

 

실행 화면