개발 환경 설정

맥, 윈도우를 기준으로 설명합니다.

2.1 맥 개발 환경 설정

2.1.1 홈브루 설치

맥용 패키지 관리자 입니다.

https://docs.brew.sh/Installation 에 접속하여 설치합니다.

$ mkdir homebrew && curl -L https://github.com/Homebrew/brew/tarball/master | tar xz --strip 1 -C homebrew
$ brew --version

2.1.2 node 설치

$ brew install node
$ node --version
$ npm --version

2.1.3 왓치맨 설치

왓치맨은 특정 디렉토리나 파일을 감시하다 내용의 변경 발생을 확인하면 특정 동작을 시행할 수 있도록 합니다.

$ brew install watchman
$ watchman --version

2.1.4 React native CLI설치

리엑트 네이티브를 시작하는 방법은 2가지

• 엑스포 CLI

리액트 네이티브에 자주 사용되는 오픈소스 네이티브 모듈 (위치정보,사진,센서 등)을 패키지로 묶어서 제공합니다. 실제 서비스에 불필요한 네이티브 모듈도 있어서 메모리를 차지합니다.

• 리액트 네이티브 CLI

그래서 가벼운 리액트네이티브 CLI를 사용합니다.

$ npm install -g react-native-cli
$ react-native --version

2.1.5 Xcode 설치

맥 OS ,ios개발 툴인 XCODE 설치

1. 앱스토어에서 설치
2. X code의 Command Line Tool를 설정하기위해 Xcode 메뉴를 선택 Preferences 메뉴 선택
3. 설정화면이 표시되면 Locations를 선택하고 Command Line Tools가 설정되어 있는지 확인한다. 설정되어 있지 않다면, 드랍다운 메뉴를 선택하여 리스트에서 가장 최신 버전을 선택하여 Command Line Tools 을 설정한다.

2.1.6 코코아포드 설치

코코아포드는 IOS개발에 사용되는 의존성 관리자입니다.

노드와 노드패키지관리자의 관계처럼 Object-C,Swift와 코코아포드도 같은 관계로 생각하시면 됩니다.

$ sudo gem install cocoapods
$ pod --version

2.1.7 JDK설치

안드로이드를 개발하기 위해서는 안드로이드의 개발 언어인 자바가 필요합니다. 자바로 개발하기 위해서는 자바 개발 킷(JDK)를 설치할 필요가 있습니다.

$ brew tap AdoptOpenJDK/openjdk
$ brew cask install adoptopenjdk8
$ java -version

2.1.8 안드로이드 스튜디오 설치

안드로이드 앱 개발하기 위해서는 안드로이드 개발 툴인 안드로이드 스튜디오가 필요합니다.

안드로이드 공식 다운로드 홈페이지

설치 할 때

standard가 아닌 custom 설정

• 테마 설정
• sdk 컴포넌트 설정화면
  • Performance (intel @ haxm) 선택
  • android virtual device 선택
• android sdk 설치 경로에 한글로 된 폴더가 포함되지 않도록 합니다.
• 에뮬레이터 설정은 recommend 기본 설정으로 둡니다.

설치 후 실행 -> 오른쪽 하단의 Configure 에서 SDK Manager를 선택 후

오른쪽 하단의 Show Package details를 체크하고 자신이 타깃으로 개발할 SDK 버전을 선택하고 다운로드 합니다.(리액트 네이티브 docs에서는 안드로이드 9.0 선택하라고 명시)

• Android SDK Platform 28
• Sources for Android 28
• Intel X86 Atom System Image
• Intel X86 Atom_64 System Image
• Google APIs Intel X86 Atom_64 System Image

그리고 ~/.bash_profile 또는 ~/.zshrc 파일 안에 안드로이드 환경변수를 설정합니다.

export ANDROID_HOME=$HOME=자신의 안드로이드SDK 위치/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

설치 방법은 아래의 사이트에 자세히 설명되어 있습니다.

https://reactnative.dev/docs/environment-setup#docsNav

MacOS 10.15 버전에는 ~/.bash_profile이 아니라 ~/.zshrc에 환경변수를 설정해야합니다.(터미널 쉘의 종류에 따라 설정)

성공적으로 설치했고 환경변수도 설정 했다면 아래와 같은 명령어를 실행하여 확인합니다.

$ adb

2.2 윈도우 개발 환경 설정

2.1.1 초코렛티 설치

맥os의 홈브루와 같은 윈도우 패키지 매니저

https://chocolatey.org/install#individual

윈도우 파워셀을 관리자 권한으로 실행하고 아래의 명령어(공식홈페이지참고)로 설치합니다.(명령프롬프트가 아닙니다)

복사하여 붙여 넣기 후 실행합니다. 아래의 방법으로 설치 확인을 합니다.

$ choca -version
Chocolatey v0.10.15

2.2.2 노드 설치

명령프롬프트를 관리자 권한으로 실행합니다.

$ choco install -y nodejs.install
$ node --version
$ npm --version

2.2.3 파이썬 설치( 2가 아니라 3도 가능합니다.)

명령프롬프트를 관리자 권한으로 실행합니다.

Python3이 설치되어있으면 2를 설치 하지 않아도 됩니다.

$ choco install -y python2
$ python --version

2.2.4 JDK 설치

명령프롬프트를 관리자 권한으로 실행합니다.

자바,자바컴파일러 설치 확인

$choco install -y jdk8
$java --version
$javac --version

2.2.5 리액트 네이티브 CLI 설치

명령프롬프트를 관리자 권한으로 실행합니다.

$ npm install -g react-native-cli
$ react-native --version

2.2.6 안드로이드 스튜디오 설치

https://developer.android.com/studio

Android virtual device 체크

계속 next누르다 보면 설치 완료가 됩니다.

Do not import settings를 선택하고 진행합니다.

custom 선택

SDK Components setup의 모든 요소를 다 체크합니다

위 sdk 설치 경로에 한글이 들어가지 않도록 주의합니다.

이제 계속 next 합니다.

설치한 후 실행하고 오른쪽 하단의 Configure이 보입니다. 클릭해서 SDK Manager를 선택합니다.

리액트 네이티브 공식 홈페이지에서 안드로이드 9.0 (Pie)와 기타 sdk platform 설치를 안내합니다.안내를 따라 설치하시면 됩니다.

Android 9.0(Pie) 
Android SDK Platform 28
Sources for Android 28
Intel x86 Atom System Image
Google APIs Intel x86 Atom System Image
Google APIs Intel x86 Atom_64 System Image

환경변수를 등록하러 갑니다.

고급 시스템 설정,-> 환경변수 -> 사용자변수 섹션의 새로 만들기 버튼을 누릅니다.

새 사용자 변수 화면에서 변수 이름을 ANDROID_HOME , 변수값은 자신이 설치한 안드로이드 SDK의 위치를 입력합니다.

그리고 사용자 변수리스트에서 Path를 선택하고 환경 변수 편집 화면으로 이동하여 C:\Users\wootae\AppData\Local\Android\Sdk\platform-tools

를 설정합니다.

이렇게 환경 변수를 설정하셨다면 명령 프롬프트를 관리자 권한으로 열고 다음 명령어를 실행 해봅니다.

$ adb
Android Debug Bridge version 1.0.41
Version 30.0.3-6597393
Installed as C:\Users\wootae\AppData\Local\Android\Sdk\platform-tools\adb.exe

끝났습니다.

보다 더 자세한 설치사항은 아래 공식 홈페이지를 참고하세요

https://reactnative.dev/docs/environment-setup