React-Native-Cli 개발 환경 구성

1. Node.js 설치

Node.js 가 없다면 Node.js를 먼저 설치 한다.

• 윈도우 이신 분들은 공식 홈페이지 에서 받으시면 됩니다!.! => Nodejs: https://nodejs.org/

• Mac 이신 분들은 Homebrew 명령어를 통해 Node.js를 설치 하시면 됩니다 !.!

1 brew install node

설치가 완료 되시면 Node.js가 제대로 설치 되었는지 확인 하셔야 겠죠?

1 node -v

설치가 되셨다면 Node.js 버전을 확인 할 수 있습니다.

1 v12.16.1

Node.js 의 패키지 매너지인 npm도 같이 설치 되는데 잘 설치 되었는지 확인 해보셔야 겠죠?

1 npm -v

npm도 잘 설치 되셨으면 버전을 확인 할 수 있습니다

1 6.13.4

---

2. Ios 필수 환경 설정

2.1 Watchman 설치

Watchman은 Facebook에서 파일 시스템의 변경 사항을 보는 도구 입니다. 더 괜찮은 성능을 위해 설치 하는 것이 좋다고 합니다.

1 brew install watchman

설치가 완료 되었다면 버전으로 잘 설치 가 되었는지 확인 합니다

1 watchman –v

잘 설치가 되었다면 버전을 확인 할 수 있습니다.

1 "version": "4.9.0"

2.2 Xcode

React-native로 ios를 개발 하기 위해서는 ios개발 툴인 xcode가 필요 합니다.

Appstore에서 Xcode를 검색 하시면 아래의 그림과 같이 나오게 되고 Xcode를 받으 시면 됩니다.

다 설치를 완료 하시면

Xcode를 실행 시켜 줍니다 !.! 밑에 하단의 메뉴 중 Preferences에 들어 갑니다.

들어 가시면 아래와 같은 화면이 나오게 되고 저희는 메뉴 중 Locations을 선택 을 하고

Locations에서 3번째에 위치 해 있는 Command Line Tools에서 최신 버전을 선택 해줍니다!

2.3 Cocoapods 설치

Cocoapods는 ios 개발에 사용되는 의존성 관리자 입니다.

아래의 명령어로 다운 받아 줍니다.

1 sudo gem install cocoapods

설치가 완료 되었으면 버전 확인으로 잘 설치 되었는지 확인 합니다.

1 pod --version

문제 없이 설치가 되었다면 버전을 확인 할 수 있습니다.

1 1.9.1

3. Android 필수 환경 설정

3.1 JDK(Java Development Kit)

React-Native로 안드로이드 앱을 개발 하기 위해서는 JDK(Java Development Kit)를 설치 해야 합니다.

brew로 아래의 명령어를 사용 하여 다운로드 하시면 됩니다.

1 brew cask install adoptopenjdk/openjdk/adoptopenjdk8

설치가 완료 되면 java가 잘 설치 되었는지 확인 합니다.

1 java -version

잘 설치 되셨다면 아래와 같이 Java의 버전을 확인 할 수 있습니다.

1 2 3 openjdk version "1.8.0_252" OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_252-b09) OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.252-b09, mixed mode)

다음은 JDK를 설치하면 Java 컴파일러도 같이 설치 가 되서 아래의 명령어를 사용하여 Java 컴파일러의 버전을 확인 합니다.

1 javac -version

JDK를 통해 Java 컴파일러도 잘 설치 되었다면, 아래와 같이 Java 컴파일러의 버전을 확인 할 수 있습니다.

1 javac 1.8.0_252

3.2 안드로이드 스튜디오 설치(SDK)

React-Native로 안드로이드 앱을 개발하려면 안드로이드 스튜디오를 설치 하셔야 됩니다.

아래의 링크를 통해 안드로이드 스튜디오를 설치 하시면 됩니다.

• 안드로이드 스튜디오 => https://developer.android.com/studio

  

  안드로이드 스튜디오를 설치 하시면 메인 화면이 나오고 저희는 먼저 SDK를 설정 해 줄 겁니다.

  아래의 그림과 같이 Configure 클릭 하시면 메뉴 들이 나오고 SDK Manager를 클릭 해줍니다.

  

  
  

클릭 하셔서 들어 오시면 아래의 화면과 같은 창이 나오게 됩니다.

안드로이드 9.0이상을 을 설치 합니다!

추가로 다운을 받으시려면 Show Pacakge Details 을 클릭 하셔서

• Android SDK Platform 28

• Intel x86 Atom System Image

• Google APIs Intel x86 Atom System Image

• Google APIs Intel x86 Atom_64 System Image

해당 되는 것들을 클릭 하시고 Apply나 OK 버튼을 클릭 하셔서 설치 해주시면 됩니다.

3.3 안드로이드 스튜디오 설치(AVD)

아래의 그림과 같이 AVD를 선택 하시고 가상 에뮬레이터를 생성 해줍니다.

아래의 그림 과 같은 창이 나오게 되고 Next를 계속 눌리셔서 설치 하시고 나면

아래의 같은 화면이 나오게 되고 Create Virtual Device를 선택 하시게 되면

가상 시뮬레이터를 생성 할 수 있습니다.

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

앞서 SDK를 받았던 것들을 환경 변수에 추가 해줘야 됩니다.

아래의 명령어로 들어 갑니다.

1 vi ~/.bash_profile

들어 가시게 되면

1 2 3 4 5 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

추가 해주시고 :wq로 저장 후 나오시면 환경 변수는 끝이 납니다.

4. 실행 하기

아래의 명령어를 통해 React-Native-Cli를 설치 합니다.

1 npm install -g react-native-cli

React-Native init 프로젝트명 으로 프로젝트를 생성 합니다.

1 react-native init 프로젝트명

실행하시기전 서버를 먼저 실행 시켜 둡니다.

1 npm start

안드로이드의 경우

1 npm run android

ios의 경우

1 npm run ios

를 실행 시켜 주면 실행이 됩니다.