React Native에 오신 것을 환영합니다! 이 페이지는 React Native를 시스템에 설치하고 즉시 앱을 만들 수 있게 합니다. React Native가 이미 설치되어 있다면 튜토리얼로 건너 뛸 수 있습니다.

개발 운영 체제에 따라 지침이 조금씩 다르며 iOS 또는 Android 용으로 개발을 시작할 것인지에 따라서도 다릅니다. iOS와 Android 모두를 개발하고 싶다고 해도 괜찮습니다. 설정이 조금씩 다르기 때문에 처음부터 선택하면 됩니다.

iOS + MacOS

종속성(Dependencies) 설치

Node.js, Watchman, React Native 커맨드라인 인터페이스(CLI) 및 Xcode가 필요합니다.

Node, Watchman

Homebrew를 사용하여 Node 및 Watchman을 설치하는 것이 좋습니다. Homebrew를 설치한 후 터미널에서 다음 명령을 실행하십시오:

1
2
brew install node
brew install watchman

Watchman은 페이스북의 도구로 파일 시스템의 변화를 감시합니다. 성능 향상을 위해 설치하는 것이 좋습니다.

React Native CLI

Node.js에는 npm이 있으며 React Native 커맨드라인 인터페이스를 설치할 수 있습니다.

터미널에서 다음 명령을 실행하십시오:

1
npm install -g react-native-cli

“Cannot find module ‘npmlog'”와 같은 오류가 발생하면, npm을 직접 설치하십시오.

1
curl -0 -L http://npmjs.org/install.sh | sudo sh

Xcode

Xcode를 설치하는 가장 쉬운 방법은 Mac App Store를 이용하는 것입니다. Xcode를 설치하면 iOS 시뮬레이터와 iOS 앱을 빌드하는 데 필요한 모든 도구가 설치됩니다.

React Native 설치 테스트

React Native 커맨드라인 인터페이스를 사용하여 “AwesomeProject”라는 새로운 React Native 프로젝트를 생성한 다음 새로 생성된 폴더 내에서 “react-native run-ios”를 실행합니다.

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

잠시 기다리면, iOS 시뮬레이터에서 실행되는 앱을 보실 수 있을 것입니다.

“react-native run-ios”는 앱을 실행하는 한 가지 방법일 뿐입니다. Xcode 또는 Nuclide에서 직접 실행할 수도 있습니다.

앱 수정하기

이제 앱을 성공적으로 실행했으므로 수정해보세요.

  • 선택한 텍스트 편집기에서 index.ios.js를 열고 일부 라인을 편집하십시오.
  • iOS 시뮬레이터에서 Command⌘ + R을 눌러 앱을 다시 로드하고 변경 사항을 확인하십시오!

다 됐습니다!

축하합니다! 첫 번째 React Native 앱을 성공적으로 실행하고 수정했습니다.

이제 뭘하죠?

  • 이 새로운 React Native 코드를 기존 앱에 추가하려면 Integration 가이드를 확인하십시오.
  • 이 기능을 사용할 수 없는 경우 문제 해결 페이지를 참조하십시오.
  • React Native에 대해 더 알고 싶다면 튜토리얼을 계속 진행하십시오.

Android + MacOS

종속성(Dependencies) 설치

Node.js, Watchman, React Native 커맨드라인 인터페이스 및 Android Studio가 필요합니다.

Node, Watchman

Homebrew를 사용하여 Node 및 Watchman을 설치하는 것이 좋습니다. Homebrew를 설치한 후 터미널에서 다음 명령을 실행하십시오:

1
2
brew install node
brew install watchman

Watchman은 페이스북의 도구로 파일 시스템의 변화를 감시합니다. 성능 향상을 위해 설치하는 것이 좋습니다.

React Native CLI

Node.js에는 npm이 있으며 React Native 커맨드라인 인터페이스를 설치할 수 있습니다.

터미널에서 다음 명령을 실행하십시오:

1
npm install -g react-native-cli

“Cannot find module ‘npmlog'”와 같은 오류가 발생하면, npm을 직접 설치하십시오.

1
curl -0 -L http://npmjs.org/install.sh | sudo sh

Android 개발 환경

Android 개발을 처음 하는 경우 개발 환경을 설정하는 것이 다소 지루할 수 있습니다. 이미 Android 개발에 익숙하다면 구성해야 할 몇 가지 사항만 있습니다. 두 경우 모두 다음 몇 단계를 주의 깊게 따라야 합니다.

1. Android Studio 다운로드 및 설치

Android Studio는 React Native 앱을 실행하고 테스트하는 데 필요한 Android SDK 및 AVD(에뮬레이터)를 제공합니다.

Android Studio에는 JDK(Java SE Development Kit) 버전 8이 필요합니다. 터미널에 “javac -version”을 입력하여 보유하고 있는 버전을 확인할 수 있습니다.

1
2
$ javac -version
javac 1.8.0_111

버전 문자열 1.8.x_xxx는 JDK 8에 해당합니다.

2. AVD 및 HAXM 설치

Android Studio를 처음 실행할 때 커스텀 설치를 선택하십시오. 다음 항목 옆의 체크박스가 선택되어 있는지 확인하십시오:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

그런 다음 “Next”를 클릭하여 이러한 컴포넌트를 모두 설치하십시오.

이미 Android Studio를 설치했다면 커스텀 설치를 수행하지 않고도 HAXM을 설치할 수 있습니다.

3. Android 6.0 (Marshmallow) SDK 설치

Android Studio는 기본적으로 최신 Android SDK를 설치합니다. 그러나 React Native에는 Android 6.0 (Marshmallow) SDK가 필요합니다. 설치하려면 SDK 관리자를 실행하고 “Welcome to Android Studio” 화면에서 “Configure”을 클릭하십시오.

SDK 관리자는 Android Studio “Preferences” 메뉴의 Appearance & Behavior → System Settings → Android SDK에서도 찾을 수 있습니다.

SDK 관리자에서 “SDK Platforms”을 선택한 다음 “Show Package Details” 옆의 확인란을 선택하십시오. Android 6.0 (Marshmallow) 항목을 찾고 확장한 후 다음 항목이 모두 선택되어 있는지 확인하십시오:

  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

그런 다음, ‘SDK Tools’를 선택하고 ‘Show Package Details’ 옆의 확인란을 선택하십시오. “Android SDK Build Tools” 항목을 찾아서 펼친 다음 ‘Android SDK Build-Tools 23.0.1’이 선택되어 있는지 확인하십시오.

마지막으로 “Apply”를 클릭하여 Android SDK 및 관련 빌드 도구를 다운로드하고 설치하십시오.

4. ANDROID_HOME 환경 변수 등록하기

React Native 커맨드라인 인터페이스를 사용하려면 ANDROID_HOME 환경 변수를 설정해야 합니다.

‘~/.bashrc'(또는 이와 동등한) 설정 파일에 다음 줄을 추가하십시오:

1
2
3
export ANDROID_HOME=${HOME}/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

ANDROID_HOME에 올바른 경로를 등록하십시오. Homebrew를 사용하여 Android SDK를 설치한 경우 “/usr/local/opt/android-sdk”에 있습니다.

Android 가상 디바이스 시작

Android Studio 내에서 “AVD Manager”를 열어 사용 가능한 AVD의 목록을 볼 수 있습니다. 터미널에서 다음 명령을 실행할 수도 있습니다.

1
android avd

“AVD Manager”에서 AVD를 선택하고 “Start…”를 클릭하십시오.

Android Studio는 설치 중에 Android 가상 장치를 설정해야 하지만 Android Studio가 AVD를 설치하지 못한 경우 문제가 발생하는 경우가 일반적입니다. 필요한 경우 Android Studio 사용자 가이드를 따라 수동으로 새로운 AVD를 만들 수 있습니다.

React Native 설치 테스트

React Native 커맨드라인 인터페이스를 사용하여 “AwesomeProject”라는 새로운 React Native 프로젝트를 생성한 다음 새로 생성된 폴더 내에서 “react-native run-android”를 실행합니다.

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native run-android

잠시 기다리면, AVD에서 실행되는 앱을 보실 수 있을 것입니다.

“react-native run-android”는 앱을 실행하는 한 가지 방법일 뿐입니다. Android Studio 또는 Nuclide에서 직접 실행할 수도 있습니다.

앱 수정하기

이제 앱을 성공적으로 실행했으므로 수정해보세요.

  • 선택한 텍스트 편집기에서 index.android.js를 열고 일부 라인을 편집하십시오.
  • R키를 두 번 누르거나 Developer 메뉴에서 Reload를 선택하여 변경 사항을 확인하십시오!

다 됐습니다!

축하합니다! 첫 번째 React Native 앱을 성공적으로 실행하고 수정했습니다.

이제 뭘하죠?

  • 이 새로운 React Native 코드를 기존 앱에 추가하려면 Integration 가이드를 확인하십시오.
  • 이 기능을 사용할 수 없는 경우 문제 해결 페이지를 참조하십시오.
  • React Native에 대해 더 알고 싶다면 튜토리얼을 계속 진행하십시오.

Android + Windows

종속성(Dependencies) 설치

Node.js, React Native 커맨드라인 인터페이스 및 Android Studio가 필요합니다.

Node

Windows 용 인기 패키지 관리자인 Chocolatey를 통해 Node.js 및 Python2를 설치하는 것이 좋습니다. 명령 프롬프트를 관리자 권한으로 연 다음 다음을 실행하십시오:

1
2
choco install nodejs.install
choco install python2

Node.js의 다운로드 페이지에서 추가 설치 옵션을 찾을 수 있습니다.

React Native CLI

Node.js에는 npm이 있으며 React Native 커맨드라인 인터페이스를 설치할 수 있습니다.

터미널에서 다음 명령을 실행하십시오:

1
npm install -g react-native-cli

“Cannot find module ‘npmlog'”와 같은 오류가 발생하면, npm을 직접 설치하십시오.

1
curl -0 -L http://npmjs.org/install.sh | sudo sh

Android 개발 환경

Android 개발을 처음 하는 경우 개발 환경을 설정하는 것이 다소 지루할 수 있습니다. 이미 Android 개발에 익숙하다면 구성해야 할 몇 가지 사항만 있습니다. 두 경우 모두 다음 몇 단계를 주의 깊게 따라야 합니다.

1. Android Studio 다운로드 및 설치

Android Studio는 React Native 앱을 실행하고 테스트하는 데 필요한 Android SDK 및 AVD(에뮬레이터)를 제공합니다.

2. AVD 및 HAXM 설치

Android Studio를 처음 실행할 때 커스텀 설치를 선택하십시오. 다음 항목 옆의 체크박스가 선택되어 있는지 확인하십시오:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

그런 다음 “Next”를 클릭하여 이러한 컴포넌트를 모두 설치하십시오.

이미 Android Studio를 설치했다면 커스텀 설치를 수행하지 않고도 HAXM을 설치할 수 있습니다.

3. Android 6.0 (Marshmallow) SDK 설치

Android Studio는 기본적으로 최신 Android SDK를 설치합니다. 그러나 React Native에는 Android 6.0 (Marshmallow) SDK가 필요합니다. 설치하려면 SDK 관리자를 실행하고 “Welcome to Android Studio” 화면에서 “Configure”을 클릭하십시오.

SDK 관리자는 Android Studio “Preferences” 메뉴의 Appearance & Behavior → System Settings → Android SDK에서도 찾을 수 있습니다.

SDK 관리자에서 “SDK Platforms”을 선택한 다음 “Show Package Details” 옆의 확인란을 선택하십시오. Android 6.0 (Marshmallow) 항목을 찾고 확장한 후 다음 항목이 모두 선택되어 있는지 확인하십시오:

  • Google APIs
  • Intel x86 Atom System Image
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

그런 다음, ‘SDK Tools’를 선택하고 ‘Show Package Details’ 옆의 확인란을 선택하십시오. “Android SDK Build Tools” 항목을 찾아서 펼친 다음 ‘Android SDK Build-Tools 23.0.1’이 선택되어 있는지 확인하십시오.

마지막으로 “Apply”를 클릭하여 Android SDK 및 관련 빌드 도구를 다운로드하고 설치하십시오.

4. ANDROID_HOME 환경 변수 등록하기

React Native 커맨드라인 인터페이스를 사용하려면 ANDROID_HOME 환경 변수를 설정해야 합니다.

제어판 → 시스템 및 보안 → 시스템 → 설정 변경 → 고급 시스템 설정 → 환경 변수 → 새로 만들기로 이동한 다음 Android SDK의 경로를 입력하십시오.

명령 프롬프트를 다시 시작하여 새 환경 변수를 적용하십시오.

Android Studio를 사용하여 Android SDK를 설치하지 않은 경우 ANDROID_HOME의 올바른 경로를 내보내야 합니다.

Android 가상 디바이스 시작

Android Studio 내에서 “AVD Manager”를 열어 사용 가능한 AVD의 목록을 볼 수 있습니다. 터미널에서 다음 명령을 실행할 수도 있습니다.

1
android avd

“AVD Manager”에서 AVD를 선택하고 “Start…”를 클릭하십시오.

Android Studio는 설치 중에 Android 가상 장치를 설정해야 하지만 Android Studio가 AVD를 설치하지 못한 경우 문제가 발생하는 경우가 일반적입니다. 필요한 경우 Android Studio 사용자 가이드를 따라 수동으로 새로운 AVD를 만들 수 있습니다.

React Native 설치 테스트

React Native 커맨드라인 인터페이스를 사용하여 “AwesomeProject”라는 새로운 React Native 프로젝트를 생성한 다음 새로 생성된 폴더에서 ‘react-native start’를 실행하여 패키지 관리자를 시작합니다.

1
2
3
react-native init AwesomeProject
cd AwesomeProject
react-native start

새 명령 프롬프트를 열고 같은 폴더에서 ‘react-native run-android’를 실행하여 AVD에서 앱을 실행하십시오.

1
react-native run-android

모든 것이 올바르게 설정되었다면, 곧 Android 에뮬레이터에서 실행중인 새 앱이 보일 것입니다.

API 레벨 23을 타겟팅하는 경우, 앱이 처음 시작될 때 ‘Unable to add window android.view.ViewRootImpl$W@c51fa6 — permission denied for this window type’와 같은 충돌이 발생할 수 있습니다. 이 문제를 해결하려면, ‘System settings > Apps > Configure apps > Draw over other apps’로 이동하여 앱에 대한 권한을 부여해야 합니다.

참고: 많은 React Native 모듈은 Marshmallow에서 테스트되지 않았으므로 중단될 수 있습니다. API 레벨 23을 목표로 삼아 앱을 철저히 테스트하고 무언가가 깨진 경우 버그 보고서를 제출하십시오.

앱 수정하기

이제 앱을 성공적으로 실행했으므로 수정해보세요.

  • 선택한 텍스트 편집기에서 index.android.js를 열고 일부 라인을 편집하십시오.
  • R키를 두 번 누르거나 Developer 메뉴에서 Reload를 선택하여 변경 사항을 확인하십시오!

다 됐습니다!

축하합니다! 첫 번째 React Native 앱을 성공적으로 실행하고 수정했습니다.

이제 뭘하죠?

  • 이 새로운 React Native 코드를 기존 앱에 추가하려면 Integration 가이드를 확인하십시오.
  • 이 기능을 사용할 수 없는 경우 문제 해결 페이지를 참조하십시오.
  • React Native에 대해 더 알고 싶다면 튜토리얼을 계속 진행하십시오.