React Native 프로젝트 시작하기

사이드 프로젝트 진행 중에 React Native 하이브리드 앱을 개발하려고 하는데 같이 진행할 프론트 개발자를 구하지 못해 내가 허접하지만 진행이라도 해보려고 한다...

만약 사이드 프로젝트를 같이 진행하실 React Native 가능하신 프론트 개발자가 있으시다면 당장 댓글을...ㅎㅎ

 

한 2년정도 전에 조금 공부하기만 하고 프로젝트를 진행해본적은 없는데 이번 기회에 조금 개념이라도 알고 있으면 좋을 것 같아 하나하나 진행하며 정리하려고 한다.

 

1. Node.js 설치 

노드 js 홈페이지에 접속해 Node.js를 다운받는다. 물론 homebrew를 이용해 설치도 가능하다.

설치 후 터미널에서 node -v 명령어를 실행하면 설치된 노드 버전이 출력된다.

2. React Native Cli 설치 

$ npm install -g react-native-cli

 

-g(global)은 전역범위에서 설치하고 사용한다.

npm으로 설치한 모듈은 기본적으로 해당 프로젝트 안에서만 효력을 발휘하는데, cli는 그 목적이 전역 범위에서 일어나야 하기 때문에 -g를 붙여줍니다.

3. cocoapods 설치

cocoapods는 ios 개발에 사용되는 의존성 관리자라고 한다.

$ sudo gem install cocoapods

요걸 설치 안하고 프로젝트를 생성해보니 아래와 같은 오류가 발생했다.

RuntimeError: abort(Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.

4. 프로젝트 생성

$ react-native init myProject

생성이 완료되면 아래와 같은 설명 문구가 출력된다.

5. Andriod 실행

위에 출력된 설명 문구로 실행해도 되고 나는 인텔리제이에서 Android SDK를 설치하고 SDK 환경변수를 설정했다.

$ export ANDROID_HOME=$HOME/Library/Android/sdk
$ export ANDROID_SDK_ROOT=$HOME/Library/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

AVD도 버전에 맞게 생성해준다.

아래 명령어를 실행하게 되면 해당 AVD로 앱이 실행된다.

$ react-native run-android

빌드 실패 시

> Task :app:installDebug FAILED
Skipping device 'emulator-5554' (emulator-5554): Device is OFFLINE.

 

만약 위와 같이 빌드에 실패한다면 해당 AVD의 데이터를 삭제하고 다시 실행하면 정상적으로 작동한다.

6. iOS 실행

$ react-native run-ios

iOS에 경우 나는 Xcode가 이미 설치되어있어서 Xcode 에뮬레이터로 실행되었다.