Skip to main content
Version: Next

환경 설정하기

이 가이드에서는 Android Studio와 Xcode를 사용해 프로젝트를 실행할 수 있도록 개발 환경을 설정하는 방법을 배운다. 이를 통해 Android 에뮬레이터와 iOS 시뮬레이터에서 개발하고, 앱을 로컬에서 빌드하는 등의 작업을 수행할 수 있다.

note

이 가이드는 Android Studio 또는 Xcode가 필요하다. 이미 이 프로그램 중 하나가 설치되어 있다면 몇 분 안에 준비를 마칠 수 있다. 설치되어 있지 않다면 프로그램 설치와 설정에 약 1시간 정도 소요될 수 있다.

개발 환경 설정이 꼭 필요한가요?

프레임워크를 사용한다면 개발 환경을 설정할 필요가 없다. React Native 프레임워크를 사용하면 네이티브 앱 빌드를 자동으로 처리해주기 때문에 Android Studio나 Xcode를 별도로 설정하지 않아도 된다.

프레임워크 사용이 제한되거나 직접 프레임워크를 작성하려는 경우에는 로컬 환경 설정이 필수적이다. 환경 설정이 완료되면 프레임워크 없이 시작하기 방법을 배울 수 있다.

개발 환경 운영체제​

타겟 운영체제​

필요한 의존성 설치​

앱을 개발하려면 Node, React Native 커맨드라인 인터페이스, JDK, 그리고 Android Studio가 필요하다.

원하는 에디터를 사용해 앱을 개발할 수 있지만, Android용 React Native 앱을 빌드하려면 Android Studio를 설치해야 한다.

Node

Node 18.18 이상 버전을 설치하려면 리눅스 배포판별 설치 가이드를 참고한다.

Java Development Kit

React Native는 현재 Java SE Development Kit (JDK) 17 버전을 권장한다. 더 높은 JDK 버전을 사용하면 문제가 발생할 수 있다. OpenJDK를 AdoptOpenJDK에서 다운로드하거나 시스템 패키지 관리자를 통해 설치할 수 있다.

Android 개발 환경

Android 개발이 처음이라면 개발 환경 설정이 다소 번거로울 수 있다. 이미 Android 개발에 익숙하다면 몇 가지 설정만 추가로 진행하면 된다. 어느 경우든 다음 단계를 꼼꼼히 따라야 한다.

1. Android Studio 설치

Android Studio를 다운로드하고 설치한다. 설치 마법사에서 다음 항목 옆의 체크박스를 모두 선택한다:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

그런 다음 "Next"를 클릭해 모든 컴포넌트를 설치한다.

체크박스가 회색으로 표시되면 나중에 이 컴포넌트를 설치할 수 있다.

설치가 완료되고 환영 화면이 나타나면 다음 단계로 넘어간다.

2. Android SDK 설치

Android Studio는 기본적으로 최신 Android SDK를 설치한다. 하지만 네이티브 코드가 포함된 React Native 앱을 빌드하려면 Android 15 (VanillaIceCream) SDK가 필요하다. 추가 Android SDK는 Android Studio의 SDK Manager를 통해 설치할 수 있다.

Android Studio를 열고 "Configure" 버튼을 클릭한 후 "SDK Manager"를 선택한다.

SDK Manager는 Android Studio "Settings" 대화상자에서도 찾을 수 있다. Languages & Frameworks → Android SDK 경로로 들어가면 된다.

SDK Manager에서 "SDK Platforms" 탭을 선택한 후 오른쪽 하단의 "Show Package Details" 옆의 체크박스를 선택한다. Android 15 (VanillaIceCream) 항목을 찾아 확장한 후 다음 항목이 선택되었는지 확인한다:

  • Android SDK Platform 35
  • Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom System Image

다음으로 "SDK Tools" 탭을 선택하고 여기서도 "Show Package Details" 옆의 체크박스를 선택한다. "Android SDK Build-Tools" 항목을 찾아 확장한 후 35.0.0이 선택되었는지 확인한다.

마지막으로 "Apply"를 클릭해 Android SDK와 관련 빌드 도구를 다운로드하고 설치한다.

3. ANDROID_HOME 환경 변수 설정

React Native 도구는 네이티브 코드로 앱을 빌드하기 위해 일부 환경 변수를 설정해야 한다.

$HOME/.bash_profile 또는 $HOME/.bashrc 파일에 다음 줄을 추가한다. zsh를 사용한다면 ~/.zprofile 또는 ~/.zshrc 파일에 추가한다:

shell
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

.bash_profile은 bash 전용이다. 다른 셸을 사용한다면 해당 셸의 설정 파일을 수정해야 한다.

bash를 사용한다면 source $HOME/.bash_profile, zsh를 사용한다면 source $HOME/.zprofile을 입력해 현재 셸에 설정을 적용한다. echo $ANDROID_HOME을 실행해 ANDROID_HOME이 설정되었는지 확인하고, echo $PATH를 실행해 적절한 디렉토리가 경로에 추가되었는지 확인한다.

올바른 Android SDK 경로를 사용해야 한다. Android Studio "Settings" 대화상자에서 Languages & Frameworks → Android SDK 경로로 들어가면 실제 SDK 위치를 확인할 수 있다.

Watchman

Watchman 설치 가이드를 따라 소스 코드를 컴파일하고 설치한다.

Watchman은 Facebook에서 만든 파일 시스템 변경 감지 도구이다. 성능 향상과 특정 에지 케이스에서의 호환성 증가를 위해 설치를 권장한다 (다시 말해, 설치하지 않아도 동작할 수 있지만, 나중에 문제가 발생할 수 있으니 미리 설치하는 것이 좋다).

Android 디바이스 준비

React Native Android 앱을 실행하려면 Android 디바이스가 필요하다. 실제 Android 디바이스를 사용하거나, 더 일반적으로는 컴퓨터에서 Android 디바이스를 에뮬레이션할 수 있는 Android Virtual Device (AVD)를 사용할 수 있다.

어느 쪽이든 개발을 위해 Android 앱을 실행할 수 있도록 디바이스를 준비해야 한다.

실제 디바이스 사용

실제 Android 디바이스가 있다면 USB 케이블로 컴퓨터에 연결하고 여기의 지침을 따라 AVD 대신 사용할 수 있다.

가상 디바이스 사용

Android Studio에서 ./AwesomeProject/android를 열면 "AVD Manager"를 통해 사용 가능한 Android Virtual Devices (AVDs) 목록을 확인할 수 있다. 다음 아이콘을 찾으면 된다:

Android Studio AVD Manager

최근에 Android Studio를 설치했다면 새로운 AVD를 생성해야 할 것이다. "Create Virtual Device..."를 선택한 후 목록에서 아무 폰을 선택하고 "Next"를 클릭한다. 그런 다음 VanillaIceCream API Level 35 이미지를 선택한다.

성능 향상을 위해 VM 가속을 설정하는 것을 권장한다. 지침을 따라 설정한 후 AVD Manager로 돌아온다.

"Next"를 클릭한 후 "Finish"를 눌러 AVD를 생성한다. 이제 AVD 옆의 녹색 삼각형 버튼을 클릭해 실행할 수 있다.

완료!

축하한다! 개발 환경 설정을 성공적으로 마쳤다.

이제 무엇을 할까?

  • 기존 애플리케이션에 이 새로운 React Native 코드를 추가하려면 통합 가이드를 확인한다.
  • React Native에 대해 더 알고 싶다면 React Native 소개를 살펴본다.