jineecode

개발환경 세팅 본문

React native

개발환경 세팅

지니코딩 2021. 6. 26. 14:11

1. 홈브루 설치

맥에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자

brew --version

brew의 버전이 뜨지 않는다면 

https://brew.sh 으로 들어가서 설치 명령어를 터미널에 입력한다.

 

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

2. node.js 

brew install node@12
node --version
v12.6.0

node13을 사용하면 안드로이드 실행시 문제가 발생했던 이슈가 있었던 모양. 직접 확인된 바는 없습니다.

 

3. 왓치맨 설치

특정 디렉토리나 파일을 감시하다가 변경이 발생하면 특정 동작을 실행하도록 하는 역할. rn은 소스코드의 변경이 발생하면 자동으로 빌드하고 디바이스 또는 시뮬레이터에 업로드하기 위해 왓치맨을 사용한다.

brew install watchman

 

4. RN CLI 설치

npm install -g react-native-cli

react-native --version

5. Xcode 설치

ios 모바일 앱을 개발하기 위한 맥 os와 ios 개발 툴인 xcode가 필요. 맥의 앱 스토어를 실행하고 xcode를 검색하여 설치.

왼쪽 상단의 xcode > preferences 메뉴 > location > command line tools 가 설정되어있는지 확인. 않다면 최신 버전을 설정.

 

6. cocoapods 설치

ios개발에 사용되는 의존성 관리자. 오브젝티브c나 스위프트로 ios를 개발할 때 사용되는 라이브러리를 설치하거나 관리할 때 사용. 노드와 노드 패키지 관리자 관계와 비슷하다. 

sudo gem install cocoapods

pod --version

 

7. 자바 개발 킷 설치

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

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

 

8. 안드로이드 스튜디오 설치

custom type > 테마 선택 > performance(intel~) & android virtual device (설치경로에 한글이 없도록 함)

설치가 완료되었다면

우측하단에 configure를 선택하고 sdk manager 선택 > 우측 하단에 show pakage details 선택 > 자신이 타깃으로 개발할 sdk 버전을 선택하고 다운로드 

rn에서는 android 9.0 pie 를 안내하고 있다. 

-android sdk platform 28

-intel x86 atom system

-google apis intel x86 atom system image

-google apis intel x86 atom_64 system image

 

안드로이드 스튜디오 환경 변수 설정

catalina부터 zsh이 기본 터미널 쉘로 지정, ~/.zshrc 파일을 열어 수정.

~/.zshrc

export ANDROID_HOME=안드로이드 sdk 위치/Library/Android/sdk
export ANDROID_SDK_ROOT=안드로이드 sdk 위치/Android/sdk
export PATH=$PATH:/Users/사용자이름/Library/Android/sdk/platform-tools/
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

안드로이드 sdk 위치: 안드로이드 스튜디오 실행>오른쪽 하단 configure > sdk manager > 상단의 android sdk location에서 안드로이드 sdk의 위치 확인 가능

환경변수가 잘 설정 되었는지 확인

source ~/.zshrc
adb version

 

'React native' 카테고리의 다른 글

RN 새로운 프로젝트 생성하기  (0) 2021.07.10
todolist  (0) 2021.07.03
AsyncStorage 사용  (0) 2021.07.03
props & state  (0) 2021.07.03
install  (0) 2021.06.21
Comments