[React Native] Mac에서 React Native CLI 환경 구축부터 실행까지

2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지

 

1. Homebrew 설치

Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다.

Homebrew: https://brew.sh/

터미널을 열어 명령어로 Homebrew를 설치하고 잘 설치 됐는지 확인해 보자.

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

$ brew --version
Homebrew 3.6.20

 

2. rbenv설치

rbenv는 Ruby 버전 관리자이다. 

Mac에는 Ruby가 기본적으로 설치되어 있지만 우리는 React Native에서 필요한 Ruby 버전을 설치해야 한다. 

React Native 공식문서: https://reactnative.dev/docs/environment-setup

공식문서에서는 루비 버전 관리자를 설치하기를 권장하고 있고, 아래 이미지에 this version 텍스트를 클릭하면 설치해야 할 버전을 알 수 있다 23.01.28일 기준 루비 2.7.6 버전을 설치해야 한다.

# rbenv 설치
$ brew install rbenv

# 필요한 버전 설치
$ rbenv install 2.7.6

# 설치한 버전을 기본 버전으로 설정
rbenv global 2.7.6
rbenv rehash

# Ruby bundler 설치
gem install bundler

gem install bundler 명령어를 실행하다가 아래와 같이 permissions 에러가 나타나는 경우가 있다.

$ gem install bundler
ERROR:  While executing gem ... (Gem::FilePermissionError)
    You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

이 때는 쉘 설정 파일인 .bash_profile  를 열어 코드를 추가해 준다.

$ vim ~/.bash_profile

# 추가할 코드
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"
  
# 위 코드 파일에 저장 후 source 명령어로 코드 적용
$ source ~/.bash_profile

# 다시 실행해보기
$ gem install bundler

위 에러에 대해 정리된 블로그의 도움을 받아 해결할 수  있었다.

 

23.08.11 추가

에러가 나지 않더라도 위의 환경 설정을 해주는 것이 좋다. 환경설정을 하지 않았더니 ruby -v 명령어 사용 시 global로 적용한 2.7.6 버전이 적용 되지 않는 문제가 있었다. (cocoapods가 설치가 ruby버전 문제로 설치가 되지 않는다..)

 

3. Nodejs 설치

React Native도 javascript이기 때문에 javascript 런타임인 nodejs를 설치해야 한다.

# 설치
$ brew install node

# 버전 확인
$ node -v

 

여러 node 버전을 사용하고 싶다면 node 버전 관리자 nvm을 사용해도 좋다. 

mac os nvm 설치: https://myung-ho.tistory.com/115

 

4. Xcode 설치

Apple의 macOS, iOS, watchOS 및 tvOS용 소프트웨어 개발을 위한 IDE. 엑스코드라 읽으며, macOS 전용이다.

나무위키: https://namu.wiki/w/Xcode

xcode: https://apps.apple.com/kr/app/xcode/id497799835?mt=12

 

xcode 설치 후에 setting(command + ,) 에 들어가서 Location 탭에 Command Line Tool을 꼭 확인해야한다.

 

5. Cocoapods 설치

Cocoapads는 Swift 및 Objective-C 등 ios 개발에 사용되는 종속성 관리자이다. 

# 설치
$ sudo gem install cocoapods

# 확인
$ pod --version
1.11.3

 

6. Watchman 설치

파일 시스템의 변경 사항을 감시하기 위한 Facebook의 도구이다. 더 나은 성능을 위해 설치하는 것이 좋다고 공식문서에서 권장하고 있다.

# 설치
$ brew install watchman

# 확인
$ watchman -v
2023.01.23.00

 

 

7. JDK 설치

안드로이드 앱을 개발하기 위해서는 JDK (Java Development Kit)를 설치해야 한다.

# AdoptOpenJDK/openjdk 이름의 패키지 저장소를 추가
$ brew tap AdoptOpenJDK/openjdk

# 명령어를 입력하면 설치할 수 있는 jdk 목록을 보여준다.
$ brew search jdk

# openjdk설치, -case 뒤에 원하는 버전을 입력한다.
brew install --cask adoptopenjdk11

# 확인
$ javac -version
javac 11.0.11

 

8. 안드로이드 스튜디오 설치 및 설정

Android 스튜디오는 Android 앱 개발을 위한 공식 통합 개발 환경(IDE)이다.

안드로이드 스튜디오: https://developer.android.com/studio

 

기본 설치를 마치고 나면 SDK 설정을 해야 한다.

More Manager에 SKD Manager를 클릭한다.

 

우측 하단에 Show Package Details 버튼을 클릭하고 아래 항목을 체크한 후 OK 버튼을 클릭한다.

- Android SDK Platform 29

- Intel x86 Atom System Image

- Google APIs Intel x86 Atom System Image

- Google APIs Intel x86 Atom_64 System Image

 

9. 안드로이드 에뮬레이터 설정

Virual Device Manager 항목을 클릭한다.

처음엔 설정된 디바이스가 없기 때문에 Create device 버튼을 클릭한다.

원하는 디바이스를 선택후 Next를 클릭한다.

 

각 항목에 대한 자세한 설명은 아래 안드로이드 스튜디오 공식 문서에서 확인할 수 있다.

안드로이드 스튜디오 AVD Create: https://developer.android.com/studio/run/managing-avds?hl=ko#createavd

 

 

10. 안드로이드 환경변수 설정

 안드로이드 스튜디오를 환경변수 설정하기 위해 쉘 설정 파일인 .bash_profile 를 열어 코드를 추가해 준다.

$ vim ~/.bash_profile

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

내 안드로이드 SDK 위치는 Android SDK화면에서 확인할 수 있다.

저장 후 source 명령어로 코드를 적용하고 adb명령어로 잘 설정 됐는지 확인할 수 있다.

$ source ~/.bash_profile
$ adb
Android Debug Bridge version 1.0.41
Version 33.0.3-8952118

 

11. React Native 프로젝트 생성

공식문서에 cli를 설치할 필요 없이 npx 명령어를 사용하면 react native cli의 안정적인 버전으로 다운되고 실행된다고 한다.

my-app이라는 폴더 안에 프로젝트를 생성해 보겠다.

$ mkdir my-app
$ cd my-app
$ npx react-native init myFirstApp

 

12. React Native IOS 실행

위에서 생성한 my-app 폴더 안에 myFirstApp위치로 이동하고 명령어로 실행해 보자

$ cd myFirstApp

# react-native run-ios
$ npm run ios

 

13. React Native Android 실행

안드로이드도 똑같이 실행해 보자

# react-native run-android
npm run android