(2022) 리액트 네이티브 윈도우 환경설정 및 프로젝트 생성 정리

🍒Jooooooo_eun🍒·2022년 4월 2일
0

mac은 기본적으로 특정 버전 이상이 되어야 설치 및 실행이 가능하기 때문에 윈도우 컴을 사용하게 되었다. (mac 홈브류 설치시 지속적으로 에러가 발생한다면... 새로 사야 한다는...ㅎㅎㅎ)

1. node.js 설치

현재 버전이 아닌 LTS버전을 다운로드 받는다. (최신버전은 공식버저이긴 하나 프로그래밍을 할때 잦은 오류와 버그가 발견될 수 있고, 서칭할때 매우 불편하기 때문에 안정적인 버전을 설치하는것이 좋다)

설치 후 버전확인 node --version

https://node.js.org/ko

2. 파이썬 설치

버전 2를 제공하기 때문에 버전2를 설치해준다

https://bit.ly/python-2-download

3. JDK 설치

14.02 버전을 설치하길 바란다.
왜그런진 모르겠지만 설치하다보니 14버전이 아닌 버전을 사용할 경우 자꾸에러가 났었다.

https://bit.ly/jdk-14-download

4. JDK 환경변수 설정

시스템 설정 > 환경 변수 > 시스템 변수 > 새로만들기 로 가서

변수 이름 : JAVA_HOME
변수 값 : C:\Program File\java\jdk-14.02

시스템 변수(path) 편집 > 새로만들기

%JAVA_HOME%\bin

이렇게 추가해주면 JDK환경변수 설정은 끝!

5. 안드로이드 스튜디오 설치

나는 안드로이드 설치가 쬐끔 복잡하게 느껴졌다 책이나 강의에서 나온 버전이 내가 설치한 최신버전과 좀 달랐기때문에ㅠㅠ 나름 정리한다 치고, 이부분만 좀 신경쓰면 된다

install Type -> Custom으로 설정
SDK Components Setup -> location

(이 location 설정부분에서 에러가 난다면 해당 경로는 무조건 영어로 지정하고, 미리 지정되어있는 경로에 파일명이 없는 경우 지정된 경로와 똑같이! 새로 만들어준다. 난 사용자 이름 자체가 한글로 되어있어서 결국 관리자 환경까지 들어가서 이름을 다 바꿔주었다....ㅎ 안그래도 되는데 뻘짓함 ㅠㅠ)

https://bit.ly/android-ide-download


최신버전이라 그런가.. SDK Manager는 이곳에 있다


SDK Platfrom 안드로이드 10 부분에서 위에 이미지처럼 체크해주기

SDK Tools부분은 이렇게 체크해주고 저장해준다. 그다음 시뮬레이터 설치를 위해 다시 이곳에 들어간다

여기서 Virtual Deivce Manager 로 들어가면 원하는 시뮬레이터 속성을 지정하고 안드로이드 화면 구축에 필요한 환경을 볼 수 있다

예시>

시뮬레이터까지 끝났다면 다시 환경변수를 설정해야한다.
시스템 설정>환경 변수> 사용자 변수> 새로만들기

변수명 : ANDROID_HOME
변수 값 : %LOCALAPPDATA%\Android\sdk

시스템 변수(path) 편집 > 추가

%LOCALAPPdATA%\Android\sdk\platform-tools

6. 리액트 네이티브 프로젝트 생성

npx react-native init Test(프로젝트명)
cd 프로젝트명
npm run android 또는 npm run ios

프로젝트 생성 후 가장 상위에 src 폴더를 만들어 관리해준다. App.js파일은 첫 화면이라는걸 잊지말고 작업하면 된다

profile
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍

0개의 댓글