RN 설치

2019-05-23

react-native를 설치하고 프로젝트가 동작하는지 확인한다.

설치

react-native(RN)을 설치하고 프로젝트가 동작하는지 확인합니다.

create-react-native-app을 사용해서 프로젝트를 진행할 수 있지만, react-native-cli을 통해서 진행하도록 하겠습니다.

react-native 공식 사이트에 설치 방법들이 자세히 나와 있으니 참고하시기 바랍니다.

react-native 설치전에

react-native 설치전에 (Mac)Node, Watchman / (Windows)Node, python2 jdk8을 설치해야 합니다. 또한 iOS개발을 위해 xcode와 Android 개발을 위해 Android studio를 설치해야 합니다.

여기서는 Mac은 xcode로 Windows는 Android studio로 진행하겠습니다.

Mac

  • Mac은 Homebrew를 통해 설치합니다.
brew install node
brew install watchman
  • xcode 다운로드 및 설치: App store

  • 커멘드 라인 설정: Xcode의 커멘드 라인 툴을 설정할 필요가 있습니다. Xcode를 실행하고, 메뉴의 Preferences...를 선택합니다.

react native 설치 - xcode

메뉴에서 Locations를 선택하고, 하단의 Command Line Tools를 최신 버전으로 선택합니다.

react native 설치 - xcode

Windows

  • Windows는 Chocolatey를 통해 설치합니다.
choco install -y nodejs.install python2 jdk8
  • Android studio 다운로드 및 설치: Download
  • 설치시 Custom을 선택하고 아래에 항목을 체크한 후 설치해 주세요.

    • Android SDK
    • Android SDK Platform
    • Performance (Intel ® HAXM)
    • Android Virtual Device
  • Android SDK Android 8.0 (Oreo)버전을 설치해 주세요.

    • Appearance & Behavior → System Settings → Android SDK.

    • Android SDK Platform 26
    • Google APIs Intel x86 Atom_64 System Image

    • Android SDK Build-Tools: 26.0.3
  • ANDROID_HOME을 환경 변수에 추가

    • Variable name: ANDROID_HOME
    • Variable value: c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk
  • Android 가상 디바이스 생성: managing-avds 참고

    • “x86 Images” tab
    • Release name: Oreo
    • API Level: 26
    • ABI: x86_64
    • Target: Android 8.0

react-native 설치

npm을 이용하여 react-native-cli를 설치합니다.

npm install -g react-native-cli

프로젝트 생성

react-native init proejct-name

프로젝트 확인

cd project-name

// ios
react-native run-ios

//android
react-native run-android
Buy me a coffeeBuy me a coffee
Posts