React Native는(이하 RN) React를 이용해 Android와 iOS 네이티브 앱을 개발할 수 있는 Framework이며 2020년 2월 현재 0.61 버전입니다. 버전이 1이 안되는데도 불구하고 많은 개발사들이 사용하는걸 보면 Facebook에서 지속적으로 발전시키고 있다는 의미일 겁니다.
이 글은 아래와 같은 내용을 담고 있습니다.
- 필요한 개발 툴들
- React Native CLI 로 프로젝트 생성하기
- 앱 실행 해보기
필요한 개발 툴들
본격적으로 알아보기 전에 먼저 설치해야 할 개발툴들이 있습니다. 이를 알아보고 진행해 보겠습니다.
Node.js : React는 Javascript Runtime인 Node.js를 사용합니다.
npm : Node.js의 패키지를 관리하는 툴입니다.
React Native CLI : React native 앱을 빌드하고 실행하는데 필요한 툴입니다.
Watchman : MacOS에서 어떤 파일의 변화를 감지하는데 사용하기 위해 Facebook에서 개발한 툴입니다.
Native SDKs :XCode , Android Studio 들은 네이티브 앱 빌드를 위해 필요한 SDK입니다.
CocoaPods : Swift 및 Objective-C 코코아 프로젝트의 종속성 관리자입니다. RN으로 프로젝트를 initialize할 때 CocoaPods가 설치되어 있으면 Android와 iOS빌드에 필요한 종속된 라이브러리들을 초기화해 주며, 추후에도 필요한 라이브러리들을 관리할 때 지속적으로 사용됩니다.
React Native CLI 로 프로젝트 생성하기
React Native 프로젝트를 세팅하고 관리하는데 사용합니다. 터미널을 열어 아래 명령을 실행하여 설치할 수 있습니다.
npm install -g react-native-cli이후 설치가 잘 되었는지 아래와 같이 테스트 해보세요.
react-native --version
##output
react-native-cli: 2.0.1
이제 샘플 프로젝트를 생성해 보겠습니다.
react-native init firstApp
생성된 프로젝트 주요 파일들 중 알고 가야할 내용을 살펴보겠습니다.
index.js : 기기 혹은 시뮬레이터에서 첫 번째로 호출하는 entry point이며, App.js를 호출하게 됩니다.
app.json : index.js에서 호출되며 앱의 이름을 정의하는데 사용합니다.
App.js : 모바일 디바이스 화면에 출력되는 첫 번째 파일입니다.
android/ : 안드로이드 앱을 위한 코드와 관련 파일들이 포함되어 있습니다.
ios/ : ios 앱을 위한 코드와 관련 파일들이 포함되어 있습니다.
앱 실행 해보기
Mac에서 iOS이라면 간단히 빌드/실행 할 수 있습니다.
react-native run-ios
# 이와 같이 시뮬레이션 할 디바이스를 선택해서 실행 가능하다.
react-native run-ios --simulator="iPad Pro"
# 아래 명령으로 테스트 가능한 디바이스 정보를 확인할 수 있다.
xcrun simctl list devicesAndroid 를 위한 빌드/실행을 위해 Android Studio 가 설치되어 있어야 합니다. 안드로이드 에뮬레이터 실행을 위해서는 $ANDROID_HOME 이라는 path가 설정되어 있는지 확인합니다.
echo $ANDROID_HOME
# 만약 등록되어 있지 않다면 자신의 계정 홈 디렉토리로 가서
cd $HOME
# ANDROID_HOME과 추가 path를 등록합니다.
vi .bash_prifile
# 아래 내용을 복사하여 추가하세요.
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# 저장 후 콘솔에서 $ANDROID_HOME가 정상적으로 출력되는지 확인 하시면 됩니다.위 내용이 확인되었다면 이제 android 애뮬레이터를 실행할 수 있습니다.
react-native run-android
이제 개발을 시작할 준비가 모두 마무리 되었습니다.
다음에는 실제 앱 개발에 도움이 될 수 있는 모듈들을 하나씩 적용해 보겠습니다.
'개발 이야기 > javascript-nodejs' 카테고리의 다른 글
| React Native로 앱 개발 - 02. UI 적용 (0) | 2020.02.23 |
|---|---|
| React Native로 앱 개발 - 01. 프로젝트 생성하기 (0) | 2020.02.17 |
| node-mssql의 useUTC 옵션 설정 (0) | 2019.08.27 |
| JavaScript의 Date 객체 정리 (0) | 2019.08.27 |
| React native 스터디 정리 - react native navigation Setting (0) | 2019.03.05 |
| 자주 사용하는 시간 관련 코드들 (0) | 2018.12.06 |
