React-Native 가이드 - (2) 개발환경 세팅하기

지난편에서는

프로젝트를 생성해보았다

 

[ React-Native 가이드 - (1) 프로젝트 생성하기 ]

https://honeystorage.tistory.com/252?category=784116 

 

아쉽게도

생성된 프로젝트는 바로 실행되지는 않는다

android나 ios에 맞는 설정들을 진행해주어야한다.

 

0. 준비물

1) JDK (sdk) - https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

2) git - https://git-scm.com/book/ko/v2/%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0-Git-%EC%84%A4%EC%B9%98

3) Android Studio - https://developer.android.com/studio?gclid=Cj0KCQjwxdSHBhCdARIsAG6zhlUyhNLs6BwGLaUaNyCMdvN1e1ZiIt8RQCTBJLKMdxWDSi4nJZawgQsaArAREALw_wcB&gclsrc=aw.ds

4) Xcode (ios 개발용 - mac os에서만 가능)

5) npm, node

위 다섯가지 항목중 한개라도 설치되지 않은것이 있다면 먼저 설치를 진행해주어야한다.

 

1. Android 프로젝트 세팅

먼저, project/android/ 위치에

local.properties 라는 파일을 만들어줄것이다.

해당 파일에는

(mac os)
sdk.dir = /Users/USER_NAME/Library/Android/sdk

(window)
sdk.dir = C:\\Users\\USER_NAME\\AppData\\Local\\Android\\sdk

둘중에 자신의 os 맞는 코드를 한줄 적어주면 된다.

 

또한, android sdk 와 관련하여 간단한 설정을 해주어야한다.

(mac os 기준)

// .zshrc가 이미 있을 경우
open ~/.zshrc

// .zshrc가 없을경우
touch ~/.zshrc

// 맽 밑줄에 아래와 같은 내용 추가
export ANDROID_SDK=/Users/<USER_NAME>/Library/Android/sdk
export PATH=/Users/<USER_NAME>/Library/Android/sdk/platform-tools:$PATH

(저장 및 닫기)

// 스크립트 반영을 위해 터미널에서 아래의 명령어 실행
source ~/.zshrc

 

그러면 이제 실행을 위한 준비는 모두 되었다

 

 

안드로이드 시뮬레이터를 실행하거나  

pc에 안드로이드 디바이스를 연결한 뒤

npm run android

** 안드로이드 시뮬레이터(에뮬레이터) **

android-studio에서 설치가능하다.

프로젝트를 생성하거나 그런 작업은 할필요없다.

알맞는 android 버전을 가진 시뮬레이터를 생성만하면 된다.

 

** 안드로이드 디바이스 세팅 **

(simulator가 아닌 on-device 테스트 하기 위해서는 아래의 세팅이 필수)

1. 설정 > 휴대전화 정보 > 소프트웨어 정보 (이동)
2. 빌드번호를 5회 ~ 7회 연타
3. 개발자 옵션 활성화
4. 설정 > 개발자 옵션 (이동)
5. 화면켜짐 상태유지 On
6. USB 디버깅 On

 

 

2. Ios 세팅

다음은 애플의 ios 환경세팅이다.

시뮬레이터가 이미 설치되어있다면 다소 작업이 간단하다.

시뮬레이터가 없다면 xcode에서 simulator를 먼저 설치하자

 

설치되어있다면 시뮬레이터를 실행

(ios는 안드로이드와 달리 on-device 개발을 진행하는것이 어렵다.

시뮬레이터로 개발하고 배포전 testFlight을 통해 on-device 테스트를 해야한다.)

 

npm run ios

 

ios는 비교적 간단하게 실행해볼수있다.

 

 

 

다음 편에서는

개발을 진행하기위한 필수 세팅으로 볼수있는

 

에디터 환경 설정 + 절대경로 잡기 + 스타일모듈 붙이기 (styled-components)

 

위 3가지를 진행할것이다.