[React Native] 윈도우에서 React Native 개발 환경 준비

그동안 여러 프로젝트를 진행하면서 노트북에 이것저것 너무 많은 것들을 설치했다. 정리하기가 어려워서 노트북 초기화를 하고 처음부터 다시 시작해보고자 한다. 

 

React Native를 개발하기 위해서는 아래 리스트의 설치가 필요하다.

 

1. Node.js
2. Python
3. JDK
4. Andriod Studio
5. Visual Studio Code
6. Expo 어플리케이션

 

1. Node.js

• Node.js 를 설치하면 node package manager인 npm도 함께 설치된다.

웹페이지에서 LTS 버전 다운로드 받아서 설치하기

설치 확인 : node --version

 

2. Python

• RN는 빌드할 때 파이썬이 필요함
• RN에서는 python 2 version 사용

근데 나는 그냥 웹페이지에서 version 3을 다운받았다. 이렇게 해도 실행은 되는 듯 싶다.

설치 확인 : python --version

 

3. JDK

• 안드로이드 개발을 위한 안드로이드 개발 언어인 자바 개발 도구 JDK 설치

웹페이지에서 다운로드

추가로 환경변수 설정도 해야한다. (리액트 네이티브 책 참고함)

설치 확인 : java -version, javac -version

 

4. Andriod Studio

• 안드로이드를 개발하기 위한 공식 IDE

웹페이지에서 다운로드

 

안드로이드 설정

- install type : custom

- More Actions -> SDK Manager -> 오른쪽 아래에 Show Package Details 클릭 -> 최신 안드로이드 버전 아래의 Andriod SDK Platform n, Intel x86 ~, Google APIs Intel x86~ 이렇게 3가지 클릭해서 설치

 

환경변수 설정

사용자 변수

- 변수 이름 : ANDRIOD_HOME

- 변수 값 : C:\Users\y28\AppData\Local\Android\Sdk

(변수 값은 Andriod SDK 메뉴 맨위에 나온다)

 

시스템 변수

- Path 에 C:\Users\y28\AppData\Local\Android\Sdk\platform-tools 추가하기

 

설치확인 : adb --version

 

에뮬레이터 설정

AVD Manager로 이동

device 선택 -> Image 선택 : 나는 모두 default 값으로 설정했다.

오른쪽 삼각형 모양을 클릭하면 에뮬레이터가 실행된다. 

 

5. Visual Studio Code

• 마이크로소프트에서 일렉트론을 기반으로 제작 및 관리하는 오픈소스 코드 편집기로, 다양한 프로그래밍 언어를 지원하며, 다른 편집기에 비해 가볍고 빠른 것이 장점. 특히 확장 프로그램을 통해 풍부한 기능을 사용할 수 있음.

VS code를 새로 깔았으니 Prettier도 설정해주어야 한다. 

Format On save : true, 그리고 single quote로, dafault formatter : prettier로 변경

 

나는 추가로 Atom도 설치했다.

 

6. Expo 어플리케이션

 

이건 노트북에서 설치하는 것이 아니라 핸드폰에 설치해야한다.

안드로이드인 경우 playstore에서 다운로드

iOS인 경우 app store에서 다운로드

 

준비완료!