react-native 개발 환경 설정

react-native로 앱을 개발할 계획이다.

react-native로 웹을 개발하고 안드로이드 앱이면 android studio를 이용해 apk파일로 감싸고, ios앱이면 맥북을 이용해 감싸면 된다. 아마도

 

<환경설정 목록>

• chocolatey 설치
• Nodejs 설치
• python 설치
• React Native CLI 설치
• JDK설치
• 안드로이드 스튜디오 설치
• 안드로이드 스튜디오 SDK 설정
• 안드로이드 스튜디오 환경 변수 설정
• react-native 프로젝트 생성 및 확인
• 완성!

 

 

react-native 환경 설정 시작하자!

chocolatey 설치

 

chocolatey: 윈도우즈용 패키지 설치삭제 관리 프로그램이다.

 

cmd를 관리자 권한으로 실행한 뒤 아래 명령어를 실행하고

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

아래처럼 버전확인 명령어를 입력하면 

choco -version

잘 설치되었으면 아래 사진처럼 출력된다.

 

Nodejs 설치

chocolatey를 이용해 Nodejs를 설치해보자

아래 명령어로 설치하고 버전을 확인명령어로 설치가 잘 되었는지 확인하자.

choco install -y nodejs.install

node -–version

nodejs가 설치되면 nodejs의 패키지매니저인 npm도 설치된다고 한다.

npm --version

 

python 설치

 

아래 명령어를 통해 파이썬을 설치할 수 있다.

choco install -y python2

나는 이미 파이썬3으로 설치되어있어서 설치과정은 진행하지 않았다.

React Native CLI 설치

리액트 네이티브로 앱을 개발하기 위해 필요함

npm명령어로 React Native CLI를 설치하자. 

npm install -g react-native-cli

아래는 버전확인 명령어

npx react-native --version

문제없이 설치완료 ~

JDK설치

리액트네이티브로 안드로이드앱을 개발할 때 필요함

아래 명령어로  jdk를 설치하자

choco install -y jdk8

잘 설치되었는지 확인하자. javac는 자바 컴파일러를 의미한다. 자동으로 설치된다. 

java -version

 

javac -version

'java'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.라는 에러가 발생했다.

설치가 잘 안된줄 알았는데 choco install -y jdk8를 입력해보니 이미 설치는 완료되었다고 나온다. 

환경변수를 설정해서 해결했다!

시스템 환경변수 편집에 들어가서 

환경변수 버튼을 클릭하고

사용자변수의 Path를 더블클릭해서 java.exe가 있는 위치를 추가해주면 된다.

C:\Program Files\Java\jdk1.8.0_211\bin 위치를 입력하면 해결될 것이다.

cmd창을 새로 열어서 확인해보면 아래그림처럼 java, javac버전 모두 확인할 수 있다.

 

안드로이드 스튜디오 설치

안드로이스 스튜디오 사이트에서 설치파일을 다운로드하자.

 https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

나는 이미 설치되어있어서 위 과정은 생략했다.

안드로이드 스튜디오 SDK 설정

More Actions를 클릭하여 SDK Manager를 선택하자

• Android SDK Platform 29
• Intel x86 Atom System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

show package details를 선택해서 위 4개를 선택해 ok를 누르면 선택한 내용을 설치할 수 있다. 

 

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

ANDROID_HOME이라는 이름을 가진 사용자변수를 추가해준다.

변수 값은 안드로이드 SDK 위치를 넣어주면 된다.  

위치는 location에서 확인할 수 있다. 

그다음은 안드로이드 스튜디오의 platform-tools를 설정해주어야한다. 

사용자변수 리스트에서 path를 선택하여 환경변수 편집 화면으로 이동한다. 

 

제일 하단에 C:\Users\[사용자 이름]\AppData\Local\Android\Sdk\platform-tools

을 추가해준다. 

 

잘 설정이 되었다면 cmd 창에 아래 명령어를 입력하면 아래 사진처럼 결과를 확인할 수 있다. 

adb

 

react-native 프로젝트 생성 및 확인

여기부터는 cmd 관리자권한으로 하지말기 ^^~!

왜냐 ~ 에러남~ 못고침 ~ㅠㅠ 수지가 도와줘서 고쳤다 ㅠㅠ! 관리자권한 아님!! ㅠㅠ

안드로이드 키고 할 필요 없었음!

npx react-native init SampleApp

위 명령어를 입력해서 react-native 프로젝트를 생성할 수 있다.

cd SampleApp
npm run android

이 코드까지 입력하면..................

아래와 같은 화면이 나온다 !

 

이제 앱개발 준비 끝 !!