부제 : 자바스크립트로 아이폰과 안드로이드 네이티브 앱 동시에 만들기
글쓰는 시점의 React Native의 버전은 Mac OS X에서 구동을 합니다.
(곧 릴리즈 될 RC버전에서 윈도우에 대한 지원이 추가될 예정입니다.)
1. Node.js 설치하기
React Native는 JavaScript로 프로그램을 작성하게 됩니다. JavaScript의 구동환경인 Node.js와 패키지 관리자인 NPM설치를 위해서 아래의 사이트에 접속합니다.
https://nodejs.org
버전 4.2.1이 현재 배포 버전입니다. 이를 다운받아 설치해주시기바랍니다.
2. react-native-cli 설치
$ sudo npm install -g react-native-cli
npm을 사용하여 react-native-cli를 전역으로 설치합니다.
개발환경이 갖춰지진 Mac이 아니라면, 개발도구를 설치를 묻는 팝업창이 뜰 수 있습니다.
설치를 하고 다시 명령어를 입력하시면 됩니다.
설치가 성공적으로 됐다면 터미널에서 react-native 명령어를 실행할 수 있게 됩니다.
3. 새로운 프로젝트 생성
다음은 새로운 React Native 프로젝트를 생성해봅시다.
저는 새로만들 앱 이름을 myapp으로 하겠습니다. (만들고 싶은 앱 이름으로 바꾸시면 됩니다.)
$ react-native init myapp
위의 명령어를 입력하면 myapp이라는 새로운 폴더에 아래와 같은 구조의 파일들이 생성됩니다.
node_modules 와 package.json 은 Node.js의 Package를 관리하기 위한파일들입니다. (지금은 신경 안쓰셔도 돼요)
우리가 앞으로 프로그램을 작성하게 될 파일은 index.ios.js, index.android.js파일이며,
android, iOS 디렉토리는 해당 플렛폼의 네이티브 프로젝트 파일입니다.
4. 실행해보기
Android 실행은 다음 글에서 알아보기로 하고, iOS 플렛폼 부터 실행해보도록 합시다.
iOS App을 개발하려면 먼저 Apple의 개발도구인 Xcode가 깔려있어야 합니다.
https://itunes.apple.com/kr/app/xcode/id497799835?mt=12
Xcode가 설치되지 않으신 분은 위의 주소로 이동하여 Xcode를 설치해주시기 바랍니다.
Xcode가 설치되어 있다면, myapp/ios/myapp.xcodeproj 파일을 Xcode로 열 수 있습니다.
프로젝트가 로드 된 후 메뉴바의 [Product] -> [Run] (단축키 Command+R)을 누르시면 iOS 시뮬레이터에 아래와 같은 App이 구동되는 것을 보실 수 있습니다.
축하합니다! 여러분은 방금 첫 React Native App을 생성하고 성공적으로 구동하였습니다.
참고 : http://facebook.github.io/react-native/docs/getting-started.html