React Native CLI 설치가이드

EXPO를 사용하지 않고도 리액트 네이티브 설치는 쉬우나, 환경 설정을 해줘야할게 너무 많아서 통합으로 정리하고자 글을 작성한다.

모든 내용은 공식문서를 바탕으로 작성했으며 중간에 에러가 발생하면 해결하는 과정을 첨부하였다.

또한, 이 글은 리액트 네이티브의 0.74버전을, MacOS의 M2기준으로 작성되었다.

공통 설치

Node.js

아마, Node.js가 설치가 안되어 있는 사람은 없을거라 생각되지만
만약 설치가 되어 있지 않다면 nodejs에 들어가서 설치를 진행한다.

Homebrew

Homebrew는 macOS용 패키지 관리자로 리액트 네이티브의 공식문서에서의 가이드에서 공통으로 사용되고 있기에 설치가 안되어 있다면 아래 명령어를 통해 설치해준다.

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

Watchman 설치

Watchman은 iOS, 안드로이드 두 환경 모두에서 사용되므로 다음 명령어를 통해 설치한다.

brew install watchman

watchman
watchman은 메타에서 개발한 파일 시스템의 변화를 감지하는 도구이다.

Chapter1. 안드로이드 환경 설정

1. JDK 설치

공식문서에서는 기본적으로 JDK 17버전을 권장하고 있으며 JDK는 Zulu를 권장하는데 필자는 Oracle JDK를 사용하였다.

(선택) Zulu JDK 설치

brew install --cask zulu@17 #zulu 설치

brew info --cask zulu@17 #zulu가 정상적으로 설치되었는지 확인

위 명령어를 통해 설치한 후, 아래의 명령어를 통해 java명령어를 사용할 수 있도록 설정한다.

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

(선택) Oracle JDK 설치

Java Downloads | Oracle에 접속하여 본인의 CPU에 맞는걸 설치하도록 한다. 필자는 Mac Slicon이므로 다음과 같이 설치하였다.

설치가 정상적으로 완료되었으면 다음과 같은 명령어로 자바의 버전을 확인한다.

java --version

2. Android Studio 설치

Android 스튜디오 설치에 접속하여 안드로이드 스튜디오를 설치해준다.

2-1) Android Studio SDK 설치

설치된 안드로이드 스튜디오를 실행하면 다음과 같은 화면이 나타난다.

여기서 More Actions를 클릭하고 SDK Manager를 선택하면 다음과 같이 화면이 나타난다.

여기서 설치해줘야하는 것은 Android 14 (UpsideDownCake), Android SDK Platform 34, Google APIs ARM 64 v8a System Image를 설치해줘야하는데 하나하나 설치해보겠다.

하단의 Show Package Details를 클릭하면 다음과 같이 세부사항이 표시 되며 사진과 같이 체크한 후 Apply를 클릭하여 다운로드를 진행한다.

2-2) Android Studio 환경변수 등록

모든 설치가 끝났다면 터미널에 다음과 같은 명령어를 입력하여 환경변수를 등록한다.

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

Chapter2. iOS 환경 설정

개인적으로 iOS 환경설정 난이도가 가장 높다고 생각하며, 필자는 ruby설치부터 벽을 느꼈었다. 한번 차근차근 진행해보겠다.

1. Ruby 설치

우선 Ruby를 설치하기 전에 2. CocoaPods설치를 진행해보고 안되면 Ruby설치부터 진행한다.

1-1) rbenv 설치

다음 명령어를 통해 ruby의 버전 관리자인 rbenv를 설치한다.

brew install rbenv

1-2) ruby 설치

rbenv install 3.2.2

1-3) ruby 설정하기

기본적으로 system 버전으로 설정되어 있기 때문에 방금 설치한 3.2.2버전으로 변경해줘야 한다. 다음 명령어를 통해 ruby의 버전을 조회할 수 있다.

rbenv versions
=> *system
=> 3.2.2

*표시가 되어있는게 현재 설정되어있는 ruby 버전이다.
다음 명령어를 통해 3.2.2버전으로 변경한다.

rbenv global 3.2.2

rbenv versions
=> system
=> * 3.2.2

변경을 하였다면 터미널을 종료한 후 다시 켜준다. 그럼 ruby version이 정상적으로 변경되어 있음을 확인할 수 있다.

ruby --version
=> ruby 3.2.2 (2023-03-30 revision e51014f9c0) [arm64-darwin22]

1-4) ruby 패키지 관리자 설치

gem install bundler

2. CocoaPods 설치

CocoaPods은 라이브러리 의존성 관리 매니저이고 수많은 Xcode 프로젝트 라이브러리들이 cocoapods으로 관리된다.

sudo gem install cocoapods 

3. Xcode 설치

App store - Xcode에 접속하여 Xcode 설치를 진행해준다. 참고로 용량이 매우 크니 용량을 확인해보고 설치하길 바란다.

Xcode > Settings > Locations 경로로 들어가서 가장 최신의 Command Line Tools를 선택해준다.

Chapter3. 리액트 네이티브 설치

사실 위 챕터들을 따라 환경설정을 하였더라도 예기치 못한 오류가 발생할 수 있다. 프로젝트 생성은 쉬운데 넘쳐나는 에러가 제일 어렵게 하는 것 같다.

프로젝트를 생성하고자 하는 디렉토리로 이동한 후 다음 명령어를 통해 리액트 네이티브 프로젝트를 생성한다.
참고로, 리액트 네이티브의 0.7버전부터는 기본적으로 타입스크립트가 적용이 되어있다.

npx react-native init "프로젝트명"

Chapter4. 안드로이드 실행

Android Studio를 실행한 후 리액트 네이티브 프로젝트폴더의 android 디렉토리를 open 해준다.

빨간 네모칸을 클릭하면 실행되며 노란 네모칸을 클릭하면 디바이스를 변경할 수 있다.

정상적으로 실행되면 다음과 같이 표시된다.

🚨 react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle 에러

앱을 실행하니 위와 같은 에러가 발생했고.. 검색하니 해결 방법은 쉽게 찾을 수 있었다.

1. android\app\src\main\assets\경로의 모든 파일을 삭제한다.
   만약, 해당 경로가 없다면 android\app\src\main\ 경로에 assets 디렉토리를 추가해준다.
2. 아래 명령어를 통해 번들을 생성해준다.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle

3.android\app\src\main\assets\경로에 index.android.bundle 가 생성되면 해결된다.

이렇게 하고나면 정상적으로 실행된다

Chapter5. iOS 실행

Xcode를 실행한 후 리액트 네이티브 프로젝트폴더의 ios > "프로젝트명".xcworkspace를 open 해준다.

마찬가지로 빨간 네모칸을 클릭하면 번들링이 실행되며(이때 CPU를 엄청 먹고 겁나 오래걸리니 당황하지 말 것) 번들링이 완료되면 다음과 같이 표시된다.

🚨 No bundle URL present. 에러

앱을 실행하니 위와 같은 에러가 발생했고, 안드로이드와 마찬가지로 번들이 없어서 생긴 문제였다.

1. 다음 명령어를 통해 번들을 생성한다.

npx react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

2. ios/main.jsbundle이 생성되었다면 Xcode의 "프로젝트명" > Build Phase > Copy Bundle Resource에 main.jsbundle을 추가한다.
   

이렇게 하고나면 정상적으로 실행된다!

참고
React Native Mac에서 시작하기 🍎
[React Native] - React Native란? (CLI 프로젝트 생성, CLI 설치)
[Mac] React-Native CLI 설정 및 Ruby update 적용하기
[React-Native Error Log] No bundle URL present 이슈
[React Native Error] Unable to load script. Make sure you're either running a Metro server (run 'react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release.