소개

이번에는 Expo cli를 사용하여 React Native의 환경 구축을 실시하겠습니다.
환경 구축의 목표는 시뮬레이터에 "Open up App.js to start working on your app!"라고 나오는 것입니다.

목차

1.Node.js 설치
2.시뮬레이터 설치
3.Expo로 프로젝트 만들기
4. 프로젝트 시작

1. Node.js 설치

Node.js의 패키지 관리 시스템인 npm에서 Expo cli를 설치하므로 로컬 환경에 Node.js가 없는 사용자는 설치해야 합니다.
Node.js 공식

2. 시뮬레이터 설치

스마트 폰 앱을 만들려면 시뮬레이터도 설치해야합니다.
IOS 앱 개발의 경우 'Xcode'(Mac 사용자 전용)
Android 앱 개발의 경우 "Android Studio"

Xcode 설정

Mac 사용자는 App Store에서 Xcode를 다운로드하고 Xcode->Preference에서 Command Line Tools를 선택합니다.

그런 다음 Components에서 가장 최신 Simulator를 설치하십시오.
이제 Xcode 설정이 완료되었습니다.

Android Studio 설정

Android Studio를 시작하고 ⚙ Configure에서 SDK Manager를 선택하고 아래 사진과 같이 패키지를 선택하면 괜찮습니다.


Windows 사용자는 여기에서 설정 완료입니다. 아래에서는 Mac 사용자만 추가 설정을 합니다.

path 설정(Mac 전용)

터미널을 열고 다음 명령을 입력합니다.

cd ~/.bash_profile

다음으로, 안드로이드 스튜디오의 SDK 매니저의 안드로이드 SDK 위치에 쓰여진 경로를 다음과 같이 명령한다.

.bash_profile

export ANDROID_SDK=/Users/kajigaya/Library/Android/sdk
export PATH=/Users/kajigaya/Library/Android/sdk/platform-tools:$PATH

마지막으로 .bash_profile에 추가한 path를 .zshrc를 열고 복사합니다.

Mac 사용자의 path 설정

AVD Manager 설정

Android studio의 ⚙ Configure에서 AVD Manager를 선택하고 +Create Virtual Device를 선택합니다.
사용하려는 하드웨어를 선택하고 Q Download에서 다운로드를 시작하고 완료됩니다.
(사용할 때는 사용하려는 하드웨어의 ▶️ 버튼을 누릅니다)

3. expo로 프로젝트 만들기

이번에는 디스크 톱에 프로젝트를 만들고 싶으므로 디스크 톱으로 이동하여 npm으로 expo를 설치합니다.

cd ~/Desktop

Desktop

npm install -g expo-cli

expo를 설치한 후 expo에서 프로젝트를 만듭니다.

Desktop

expo init プロジェクト名

설치하는 동안 여러 가지를 선택해야 하지만 기본적으로 Enter를 사용할 수 있습니다.

4. 프로젝트 시작

먼저 만든 프로젝트로 이동합니다. 그래서 프로젝트를 시작합니다.

프로젝트 이름

cd ~/Desktop/プロジェクト名
npm start

브라우저가 시작되고 Run on iOS simulator를 선택합니다.

이러한 화면이 일어나면 환경 구축 완료입니다.
수고하셨습니다.

참고 자료

React Native 공식
Expo 공식 Mac 사용자를 위한 Android Studio 설정
Android Studio 공식 Android Studio 설치 방법