React-native 개발 환경 구축 (MacOS)

맥(Mac)에서 react-native로 앱을 개발하는 방법으로 Expo CLI와 React Native CLI가 있다.

 

Expo CLI는 네이티브 기능(위치 정보, 카메라 등)을 쉽게 사용할 수 있게 패키지화하여 제공하기 때문에 초보자나 간단한 프로젝트에 유용하다. 그러나 Expo는 모든 네이티브 모듈을 지원하지 않으며, 사용하지 않는 네이티브 모듈으로 인해 앱 파일 크기가 커질 수 있는 단점이 있다. 따라서 더 세부적인 네이티브 기능이 필요하거나 앱 최적화가 중요한 경우, React Native CLI 사용이 추천된다.

 

이 블로그 포스트는 React Native CLI를 사용하여 앱을 개발하기 위한 개발 환경 설정에 대해서 설명한다. 또한 설치한 React Native CLI를 사용하여 프로젝트를 생성해 보고 잘 동작하는지 확인까지 해 보도록 하겠다.

 

 

---

 

0. Homebrew 설치

Homebrew가 설치되어 있지 않다면 Homebrew를 설치한다.

(Homebrew == MacOS 용 패키지 관리자)

Homebrew

 

다음 명령어를 실행했을 때 Homebrew의 버전 정보가 나타난다면 잘 설치된 것이다.

brew --version

 

 

 

1. rbenv 설치

(1) rbenv 설치

brew install rbenv

 

 

(2) 버전 2.7.5 Ruby 설치

rbenv install 2.7.5

 

 

(3) 2.7.5 버전의 Ruby를 기본 버전으로 설정

rbenv global 2.7.5
rbenv rehash

 

 

(4) Ruby의 패키지 관리자인 bundler 설치

gem install bundler

 

여기서 아래와 같이 Gem::FilePermissionError 가 떴고, 처음에는 Ruby 버전을 올리기 싫어서 환경 변수만 추가했다.

gem 권한 에러

 

 

(vi ~/.zshrc 명령어로 쉘 설정 파일 열어서 아래 내용을 추가한 뒤 source 명령어로 변경된 내용 적용)

$ vi ~/.zshrc

[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

$ source ~/.zshrc

 

 

그러나 3.0.0 이상의 Ruby가 필요하다고 직접 말해줘서 결국 3.0.0 으로 재설치했다.

3.0.0 루비를 설치하세요

rbenv install 3.0.0
rbenv global 3.0.0
rbenv rehash

(global, rehash까지 다시 해주기 !!)

 

Ruby 버전을 올려주니 gem을 정상적으로 설치할 수 있었다.

gem installed

 

 

 

2. Node.js 설치

Node.js — Run JavaScript Everywhere

 

다음 명령어로 Node.js를 설치한다.

brew install node

 

 

설치가 완료되면 Node.js 버전을 확인한다.

node -–version

 

 

Node.js를 설치하면 기본적으로 Node.js 패키지 매니저인 npm(Node Package Manager)도 같이 설치된다. npm도 잘 설치되었는지 버전을 확인한다.

npm --version

node.js, npm 버전 확인

 

 

 

3. Watchman 설치

Watchman - A file watching service | Watchman

 

다음 명령어로 Watchman을 설치한다.

brew install watchman

 

 

버전 확인은 --version이다. (-version 명령어는 없다고 나옴)

watchman --version

watchman 버전 확인

 

 

 

4. React Native CLI 설치

React Native CLI를 설치한다.

npm install -g react-native-cli

 

 

설치가 완료되면 다음 명령어로 버전을 확인한다.

npx react-native --version

react native cli 버전 확인

 

 

 

5. Xcode 설치: iOS 개발

iOS 앱 개발을 위해서는 iOS 개발 툴인 Xcode가 필요하다.

아래 링크를 통해 앱스토어에서 Xcode를 다운로드 할 수 있다.

‎Xcode

 

Xcode 설치가 완료되면, Xcode 실행 후 Settings > Locations 로 이동해 Command Line Tools 가 최신의 Xcode 로 잘 설정되었는지 확인해야 한다. 설정되어 있지 않다면 Command Line Tools 에서 가장 최신의 Command Line Tool을 선택하면 된다.

Xcode 설정

 

 

 

6. Cocoapods 설치: iOS 개발

Cocoapods는 iOS 개발에 사용되는 의존성 관리자이다.

이 역시 iOS 앱 개발에 꼭 필요하므로 설치하도록 한다.

CocoaPods.org

 

다음 명령어로 Cocoapods를 설치한다.

sudo gem install cocoapods

 

 

버전 확인 명령어는 다음과 같다.

pod --version

Cocoapods 버전 확인

 

 

 

7. JDK 설치: Android 개발

JDK(Java Development Kit)는 React-native로 안드로이드 앱을 개발하기 위해 필요하다.

JDK가 설치되어 있지 않다면 아래 명령어로 설치할 수 있다.

brew tap AdoptOpenJDK/openjdk
brew cask install adoptopenjdk8

 

 

JDK를 설치하면 Java 컴파일러도 같이 설치된다.

버전 확인은 java와 java 컴파일러 모두 -version 명령어이다.

java -version
javac -version

 

 

java와 javac 버전을 확인해보니 이전에 버전을 맞춰 설치해놓은 것이 있어 그대로 사용하려고 한다.

java, javac 버전 확인

 

 

 

8. 안드로이드 스튜디오 설치: Android 개발

안드로이 앱 개발을 위해서는 개발 툴인 Android studio가 필요하다.

아래 링크를 통해 다운로드하면 된다.

M2칩 맥북을 사용하고 있어서 ARM 버전을 다운받았다.

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

 

Install Type에서 Standard 옵션을 체크하고 Next를 눌러 설치를 진행하면 된다.

 

 

(1) 안드로이드 스튜디오 SDK 설정

안드로이드 스튜디오 설치가 완료되면 SDK를 설정해주어야 한다.

SDK Manger 를 선택해 SDK 설정 화면으로 이동한 후, 오른쪽 하단의 'Show Package Details'를 체크한다.

그리고 아래와 동일한 4개의 리스트를 찾아 선택한다.

SDK 설정 화면

OK 버튼을 누르면 설치가 시작된다. 설치에 시간이 걸려 잠시 쇼핑을 즐겼다.

 

 

 

(2) 안드로이드 스튜디오 환경 변수 설정

안드로이드 스튜디오의 설치와 설정이 끝났다면, 안드로이드 스튜디오를 환경 변수에 등록해주어야 한다.

환경 변수 추가를 위해 ~/.bash_profile 파일 또는 ~/.zshrc 파일을 열고 아래와 같이 수정한다.

수정 이후에는 source 명령어를 실행해 변경사항을 적용시켜준다.

# export ANDROID_HOME=$HOME/Library/Android/sdk
export ANDROID_HOME=자신의 안드로이드SDK 위치/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

source ~/.bash_profile
# or
source ~/.zshrc

 

+ 자신의 안드로이드 SDK 위치를 모르겠는 경우 안드로이드 스튜디오를 켜고 다시 SDK 설정 화면으로 이동한다. 상단에 Android SDK Location 항목이 가리키는 것이 바로 자신의 안드로이드 SDK 위치이다. 바로 줍줍해서 붙여넣자.

 

 

환경 변수를 잘 등록했다면 터미널을 다시 실행해 다음 명령어를 입력한다.

가장 상단에 버전 정보가 뜬다면 안드로이드 SDK가 잘 설정된 것이다.

adb

 

 

 

---

React-native 프로젝트 생성 및 확인

이제 아래 명령어를 통해 'SampleApp' 이라는 이름의 React-native 프로젝트를 생성한다.

npx react-native init SampleApp

 

 

생성이 완료되면 아래 명령어로 iOS 와 Android 에서  각각 구동시켜 본다.

- iOS 에서 확인

cd SampleApp
# react-native run-ios
npm run ios

 

- android 에서 확인

cd SampleApp
# react-native run-android
npm run android

 

 

android 먼저 확인해보았다.

다음과 같이 기분 좋게 웰컴이 뜨면 프로젝트가 문제없이 잘 실행된 것이다.

Welcome to React Native (Android)

 

 

 

👇🏻 프로젝트가 정상적으로 실행되지 않는다면 👇🏻

[RN] Error: spawn cmd ENOENT 오류 해결

 

 

 

 

 

Reference:

맥(Mac)에 react native 개발 환경 구축하기