REACT NATIVE 개발 환경 설정

React Native 앱을 설치하고 빌드하는 과정을 소개하는 아티클 입니다.

Lucas Moon

Lucas Moon

  • # 2020
  • # 자료공유
  • # 자기개발
  • # 스터디
tags
2020
자료공유
자기개발
스터디
author
description
React Native 앱을 설치하고 빌드하는 과정을 소개하는 아티클 입니다.
created_at
Feb 11, 2022 07:43 AM
priority
published
published
published_at
Jun 22, 2020
updated_at
Mar 4, 2022 09:01 AM
📢
개발 환경은 두가지 방법으로 설정 할 수 있습니다.
  1. Expo CLI
  1. React Native CLI
 
 

1. Expo-CLI

Expo는 React Native 기반으로 구축된 도구 모음으로 간단하게 React Native 앱을 개발 할 수 있습니다. (create-react-native-app이 Expo-CLI에 병합되었다고 합니다.)
 
Node 12 LTS 이상의 환경에서 설치할 수 있습니다.
npm install -g expo-cli

프로젝트 생성

expo init AwesomeProject
 

개발서버 시작

cd AwesomeProject
yarn start # you can also use: expo start
 

스마트폰에서 어플리케이션 실행

Expo CLI를 사용하면 개발 환경을 설정하지 않고도 물리적 장치에서 React Native 앱을 실행할 수 있습니다.
iOS 또는 Android 스마트폰에 Expo 클라이언트 앱을 설치하고 컴퓨터와 동일한 무선 네트워크에 연결합니다.
  • Android 에서는 Expo 앱을 사용하여 QR 코드 스캔
  • iOS 에서는 카메라 앱을 사용하여 QR 코드 스캔
 

시뮬레이터에서 어플리케이션 실행

우선 하단의 React Native CLI 항목을 참조하여 개발 환경을 설정합니다.
설정 후에 npm run android 를 실행하여 Android 가상 장치에서 또는 npm run ios 를 실행하여 iOS 시뮬레이터에서 앱을 시작할 수 있습니다 (macOS 만).
 
 

2. React Native CLI

Node 와 Watchman 설치

brew install node
brew install watchman

IOS 개발 환경

XCode 설치

xcode를 설치 합니다. (Apple ID가 필요)
설치 사이트 이동
 

Command Line Tools 설치

Preferences... > Locations > Command Line Tools 에서 최신 버전을 선택하여 설치합니다.
 

IOS 시뮬레이터 설치

Preferences... > Components 에서 IOS 시뮬레이터 선택합니다.
Java Development Kit(JDK)를 설치합니다.
brew cask install adoptopenjdk/openjdk/adoptopenjdk8

안드로이드 개발 환경

안드로이드 스튜디오 다운로드 및 설치

안드로이드 스튜디오를 설치합니다.
설치 사이트 이동
 
설치 시 Custom 설정으로 아래의 구성 모두 설치 합니다.
  • Android SDK
  • Android SDK Platform
  • Android Virtual Device
 
Preference > Appearance & Behavior > System Settings > Android SDK 로 이동합니다.
 
SDK Platform 탭에서 Android 9 (Pie)의 다음 항목을 선택합니다.
  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom System Image
 
SDK Tools 탭에서 "Show Package Details"를 클릭하여 "Android SDK Build-Tools"의 다음 항목을 선택합니다.
  • 28.0.3
해당 항목을 다운로드 받고 설치합니다.
 
환경변수를 설정 합니다.
vi ~/.zshrc`

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
 
환경변수를 적용 합니다.
source ~/.zshrc
 

React native cli 설치

npm install -g react-native-cli

React Native 프로젝트 생성

npx react-native init AwesomeProject

React Native 어플리케이션 실행

cd AwesomeProject

IOS 용 시뮬레이터로 실행

npx react-native run-ios

안드로이드 시뮬레이터로 실행

npx react-native run-android