[React Native/RN] 리액트 네이티브 시작하기

 

리액트 네이티브는 하나의 프로젝트로 안드로이드와 iOS를 모두 구동할 수 있기 때문에 최근 진행한 외주 프로젝트 모두 RN을 사용했다.

 

처음 시작할 때 급하게 독학을 하는 상황이었지만, 기초 부분에 있어서는 굉장히 많은 글들이 있어 도움을 많이 받았다.

초기 세팅은 까먹을 일이 많기 때문에 복습 겸 블로그에 기록해보려 한다.

(출처: https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/)

 

 

*Mac OS 기준 (Windows 는 출처 블로그 참고)

 

1. Homebrew 설치

Homebrew

 

맥 패키지 관리자이다. 설치 후 설치 확인은 다음 명령어를 터미널에 입력하면 된다.

brew --version

 

 

2. NodeJS 설치

Node.js

 

NodeJS는 JavaScript 런타임이다. RN은 자바스크립트 언어이기 때문에 설치해주어야 한다.

위에서 설치한 홈브류로 노드 설치가 가능하다.

brew install node

설치가 완료되면 아까와 마찬가지로

node --version

를 입력하면 된다. 참고로 대부분의 프로그램은 'program_name --version' 으로 버전 확인이 가능하다.

 

 

3. Watchman 설치

Watchman A file watching service

 

폴더나 파일의 변화가 생기면 트리거 동작이 실행되도록 하는 역할을 한다. (Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.)

마찬가지로 brew를 통해 설치해주면 된다. 설치 버전 확인은 위와 동일.

brew install watchman

 

 

4. React Native CLI 설치

 

리액트 네이티브 개발에는 React Native CLI 와 Expo CLI 두 가지 방식이 있다. React Native CLI는 설치와 실행이 조금 까다롭지만 네이티브 모듈에서 제공하는 기능을 사용할 수 있어 많은 사람들이 이 방식을 선호한다.

 

설치 방법

npm install -g react-native-cli

 

설치 확인

npx react-native --version

 

 

5. iOS 관련 세팅

 

1) XCode

맥 OS로 진행하게 되면, iOS까지 빌드가 가능하다. iOS 개발 툴은 앱스토어에서 'XCode'를 설치하면 된다.

 

2) CocoaPods

iOS 개발 언어인 Swift나 Object-C의 의존성 관리자다. 보통 라이브러리 추가를 위해 사용된다.

 

설치 방법

sudo gem install cocoapods

 

설치 확인

pod --version

 

6. 안드로이드 스튜디오 설치

Download Android Studio and SDK tools  |  Android Developers

 

안드로이드 빌드를 위한 개발 툴이다. 

 

1) SDK 설정

Configure > SDK Manger 메뉴로 들어가 하단 Show Pacakge Details 을 체크하여 다음 항목들을 찾아 다운로드 해준다.

Android SDK Platform 30
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

 

2) 환경변수 설정

$HOME/.bash_profile 혹은 $HOME/.bashrc 파일에 다음을 추가한다.

(zsh 를 사용한다면 ~/.zprofile or ~/.zshrc)

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

 

.bash_profile를 사용하면 추가로 터미널에

source $HOME/.bash_profile

를 입력해준다.

 

환경변수 설정 확인은

adb

를 터미널에 입력해주면 된다.

 

 

7. 프로젝트 생성

다음 명령어를 통해 리액트 네이티브 프로젝트를 생성할 수 있다. init 뒤에 붙는 단어가 프로젝트의 이름이 된다.

npx react-native init AwesomeProject

 

 

 

React Native 사이트에서도 더욱 상세한 과정이 확인 가능하다.

사이트 바로가기

Setting up the development environment · React Native