React-native cli 개발환경 세팅하기

AN JUHYUN·2024년 2월 13일

react-native 개발일지

목록 보기
1/15

프로젝트 개발 프레임워크로 react-native가 선정되었다.
망했..?
이 문서는 사실 수 많은 시행착오를 정리한 글이다.

개발환경부터 세팅하기로 한다.

리액트 네이티브 설정 공식가이드
위의 사이트에 접속해서 순서대로 따라갔다.

📌 Chocolatey

Chocolatey 다운로드

난이도☆

https://chocolatey.org/install

cmd창에 아래의 문구 복사해서 붙여넣어 다운받았다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Chocolatey 환경 변수 등록 - 자동 등록

Chocolatey 버전 확인

cmd창에 아래의 문구로 설치를 확인한다

choco

📌 Node, JDK

Node, JDK 설치

는 참고로 이미 설치되어 있었다.
인데, JDK 버전때문에 굉장히 고생했다.
나는 환경변수 업데이트 후에도 버전업데이트가 정상적으로 되지 않아서
안드로이드 스튜디오를 재 설치 하였다.

Chocolatey가 정상적으로 설치되어 있다면 아래의 명령어를
cmd에 입력해서 node와 jdk를 빠르게 설치할 수 있다.

choco install -y nodejs-lts microsoft-openjdk17

📃 Node 환경 변수 등록

이 부분은 이전에 진행했던 부분이라 약간 명확하지 않을 수 있다.

1. 시스템 환경변수 Path 등록

1) 시스템 환경변수 path 들어가기
2) 새로 만들기
3) 설치경로~~~nodejs\ 등록

📃 JDK 환경 변수 등록

1. 사용자 환경변수에 새로만들기

변수 이름 JAVA_HOME
변수 값 jdk-17폴더 설치경로

2. 사용자 환경변수 Path 등록

1) 변수의 path에 들어가서
2) 새로만들기
3) 설치경로~~~jdk-17\bin 등록

📃 버전확인

nodejs 버전확인은 cmd창에
node -v
jdk 버전확인은 cmd창에
java -version
으로 확인 가능하며 정상 설치 여부도 확인 할 수 있다.

📌 Android Studio

Android Studio 설치

안드로이드 스튜디오 공식사이트(한글)
위의 사이트로 들어가서 설치하고 아래의 세 가지를 필수로 설치한다.

Android SDK
Android SDK Platform
Android Virtual Device

안드로이드 스튜디오를 처음 사용해봐서 엄청나게 고생하였다.

Android Studio 환경 변수 등록

사용자 변수 등록

변수명은 고정으로 하고 변수 값은 사용자폴더명만 바꾸면 된다.

변수 이름 ANDROID_HOME
변수 값 sdk 설치경로

Platform-tool 환경 변수 등록

아래의 경로를 사용자경로 path에 새로 등록한다.

%LOCALAPPDATA%\Android\Sdk\platform-tools

디바이스 만들기

이 부분은 너무 간단하지만 처음하면서 고생했으므로.. 상세히 작성한다.

  1. 안드로이드 스튜디오를 켜서 오른쪽 상단에 디바이스 매니저를 연다.
  2. 디바이스 추가하기위해 아이콘을 클릭한다.
  3. 적당한 크기의 playstore 접속이 가능한 기기로 선택한다.
  4. 추천하는 기기시스템을 선택한다.(추천외에도 가능함-너무 고민되서 내가 고른 기기를 써넣음)
  5. 기본설정으로 별도로 선택없이 finish
  6. 디바이스 매니저에 등록 된 기기를 확인 가능하다.

디바이스 실행하기

  1. start 버튼을 눌러서 디바이스를 에뮬레이터로 실행할 수 있다.
  2. 창 상단의 + 버튼으로 만들어놓은 기기를 불러온다.
  3. 에러가 뜬다...

이는 안드로이드 에뮬레이터가 실행되지 않았을 때 발생하는 오류라고 한다.
나의 경우는 실행하는 루트드라이브 용량이 2기가도 되지 않았을 때 오류가 발생하여 하드를 정리하고 실행하였다.

  1. 안드로이드 스튜디오 터미널로 가서 cmd창에 npm start를 입력한다.

  2. 안드로이드로 켤 것이므로 a를 선택한다.

또는 npm run android로 바로 실행해도 괜찮은 듯 하다.

📌 연결 성공!!

profile
frontend developer

0개의 댓글