Project 생성 및 빌드

이제 기본적인 프로젝트를 생성 및 빌드 할 수 있도록 개발 환경을 조성해보자.

 

http://facebook.github.io/react-native/docs/getting-started

React Native · A framework for building native apps using React

기본적인 프로젝트 생성은 위 공식 가이드를 따르도록 한다. (React Native CLI 탭에서 참고)

-> 어떤 플랫폼에서(윈도우, 맥) 개발할 건지, 어느 플랫폼에서(안드로이드, iOS) 실행할 건지 골라서 필요한 툴을 모두 설치 하도록 하자

-> 혹시 제대로 진행이 되지 않는다면 가이드에서 얘기하는 툴들의 최소 버전 등을 잘 확인하자

(영어는 잘 못 읽어도 숫자는 비교 할 수 있지 않은가)

 

* 본인은 맥 유저임에 따라 iOS 베이스로 설치

 

1. npm(node package manager) 설치가 선행 되어야 함

* watchman : react native에서 사용하는 파일 감시도구

2. Xcode(CLI, simulator, cocoapods) 설치

* 안드로이드의 경우 jdk, android studio (sdk, path설정) 등의 과정이 필요

3. 프로젝트 생성 > npx react-native init AwesomeProject

4. 프로젝트 시작 > 프로젝트 폴더 이동 후 > npx react-native run-ios

* 안드로이드의 경우 npx react-native run-android

5. Editor의 경우 Brackets을 사용하는데 더 좋은 툴이 있으면

 

* Mac에서 phones sdk관련 오류가 날 경우

sudo xcode-select --switch /Applications/Xcode.app

Pod install

 

위 설치 가이드 3번을 실행하면 해당 폴더에 아래 기본 파일이 있습니다. 

index.js (앱의 진입 포인트 : 안드로이드의 application class)

App.js (앱 메인 : 안드로이드의 main activity)

 

설치 가이드 4번 프로젝트 실행을 통해 아래와 같은 결과 화면을 확인할 수 있습니다. 

* 새로운 프로젝트를 실행 시 꼭 새로운 emulator를 실행해 주시기 바랍니다. 

 

앞으로 진행되는 포스팅의 예제 코드는 아래 github을 참고하시길 바랍니다.

https://github.com/action-intent/ReactNative

 

github 코드를 땡기신 후 프로젝트에 필요한 모듈들을 설치해야 합니다. 

프로젝트 폴더로 이동 후 npm i 명령을 통해 npm모듈들을 자동으로 설치해 주도록 합니다.

* 설치되는 모듈의 목록은 package.json 파일에 있습니다. 참고하세요.