Skip to main content

환경 설정하기

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

note

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

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

프레임워크를 사용한다면 환경 설정이 필요하지 않다. React Native 프레임워크를 사용하면 네이티브 앱 빌드를 프레임워크가 대신 처리하기 때문에 Android Studio나 Xcode를 별도로 설정할 필요가 없다.

프레임워크 사용이 어려운 상황이거나 직접 프레임워크를 작성하고 싶다면 로컬 환경 설정이 필수적이다. 환경 설정을 마친 후에는 프레임워크 없이 시작하기를 참고해 진행할 수 있다.

개발 환경 운영체제​

대상 운영체제​

의존성 설치​

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

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

Node

리눅스 배포판별 설치 가이드를 따라 Node 18.18 이상을 설치한다.

Java Development Kit

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

안드로이드 개발 환경

안드로이드 개발이 처음이라면 개발 환경 설정이 다소 지루할 수 있다. 이미 안드로이드 개발에 익숙하다면 몇 가지 설정만 추가로 해주면 된다. 어느 쪽이든 다음 단계를 꼼꼼히 따라야 한다.

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은 파일 시스템 변경 사항을 감시하는 페이스북의 도구다. 성능 향상과 특정 엣지 케이스에서의 호환성을 위해 설치를 권장한다(설치하지 않아도 될 수 있지만, 나중에 문제가 발생하지 않도록 미리 설치하는 것이 좋다).

안드로이드 디바이스 준비

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

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

실제 디바이스 사용

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

가상 디바이스 사용

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

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 소개를 살펴본다.