react-native-cli 설치방법
React-Native-Cli은 expo와 다르게 초기환경설정이 복잡한 대신, native file들을 직접 다룰 수 있다는 장점이 있다.
크게 다음과 같은 4가지 과정으로 진행된다.
과정
- chocolatey 설치
- node, python, jdk 설치
- 안드로이드 스튜디오 설치 및 SDK 설정
- react 프로젝트 생성
Requirements
- Node.js(8.3버전 이상), Python2, JDK(8버전 이상)이 설치되어있다면 넘어가도 된다.chocolatey를 통해 세 가지가 한번에 설치할 것이다.
- 때문에 하나 빼고 모두 설치 되어 있다면 없는 하나만 설치하는 것이 낫다. 하지만 하나라도 명령어로 간편하게 설치하고 싶다면 chocolatey를 사용하자.
- chocolatey는 윈도우용 패키지 관리자이다.
- "chocolatey"를 설치한다.
- window powershell 관리자 권한으로 실행
- 파워셸에 다음 명령어 입력
-
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
- 에러가 없이 설치되면 choco -v 입력 -> 설치버전 확인 및 설치성공여부 확인.
Dependencies
1. Node.js(8.3버전 이상), JDK(8버전 이상), Python2 설치
> cmd 관리자 권한 실행
>
choco install -y nodejs.install python2 jdk8
위 명령어로 choco로 필요한 패키지를 한번에 설치할 수 있다.
빨간 에러가 뜨지 않는다면 설치 성공.
node -v
jdk -version
python --version
을 통해 설치버전을 확인해본다.
2. Android Studio 설치
https://developer.android.com/studio/index.html
해당 링크를 통해 안드로이드 스튜디오(윈도우)를 다운받는다.
next를 눌러 설치를 진행한다.
단 Android Virtual Device, Performance (Intel HAXM)는 체크하고 설치한다.
3. Android SDK 설치
1) 설치가 완료됐으면 메인화면에서 Configure 클릭
(또는 아무 프로젝트나 생성한 뒤, File > Settings > Appearance & Behavior > System Settings > Android SDK > SDK Platforms로 들어간다.)
2) Click "show Package Details"
3) 다음과 같이 체크한다.

4. Android SDK 환경변수 설정
- 내 PC > (오른쪽버튼) 속성 > 고급 시스템 설정 > 환경변수 > 사용자 변수
- 변수: ANDROID_HOME
- 값: C:\Users\PC명\AppData\Local\Android\Sdk (default 경로)
에 없으면 File > Settings > Appearance & Behavior > System Settings > Android SDK Location 복사

5. platform-tools 환경변수 추가
같은 방법으로
환경변수 > 사용자 변수 > Path > C:\Users\PC\AppData\Local\Android\Sdk**\platform-tools**
React-Native-Cli 프로젝트 생성
- cmd창 열기
- 프로젝트 생성 원하는 폴더로 이동
// 프로젝트 생성 원하는 폴더로 이동
cd [프로젝트 폴더]
- react-native-cli 프로젝트 생성
// react-native-cli 프로젝트 생성
react-native init [프로젝트명]
- 프로젝트 폴더 이동
// 프로젝트 폴더 이동
cd [프로젝트명]
- 안드로이드 시뮬레이터와 함께 실행
// 시뮬레이터와 함께 실행
react-native run-android
결과화면

해당 화면까지 뜨면 설치완료!
ctrl + M 을 눌러 디버깅 메뉴를 사용할 수 있다는 정보도 나온다.
오류가 있을 경우 빨간색 오류문이 뜨는데 프로젝트 생성 시 생기는 오류로 버전오류, 다른 프로젝트를 닫지 않아 생기는 오류 정도를 생각할 수 있다.
오류문이 뜬다면 그대로 구글에 검색해보면 해결책이 대부분 나와있을 것이다.
그럼 #react-native 설치완료:))
'React' 카테고리의 다른 글
react native - EXPO 설치 방법 (0) | 2021.09.11 |
---|---|
react-expo 개발일지1 (0) | 2021.09.11 |
[npm] 모듈 자체를 수정하고 싶을 때! npm 모듈 수정방법 (0) | 2021.09.11 |
[React-Native] Error type 3 Error: Activity class {com.myapp/com.myapp.MainActivity} does not exist (0) | 2021.09.11 |
[React] 리액트 프로젝트 생성 (0) | 2021.09.11 |