thebirghtwide 2021. 7. 24. 14:13

react native를 설치하고 세팅하기 위해서는 여러가지 프로그램을 필요로한다. 

 

1. nvm (Node Version Manager)

 

우선 가장 필요한 프로그램은 nodejs 이다. 그리고 이 nodejs를 사용하는데 있어 좀 더 편하고 유용하게 사용할 수 있게 해주는 프로그램이 nvm이다.  nvm의 장점을 살펴보면 

  1. 컴퓨터에 여러 버전의 Node.js 를 설치 할 수 있게 한다.
  2. use 커맨드를 이용해 필요한 Node버전으로 이동 할 수 있게 해준다. 
  3. 특정 버전을 사용하거나 이용한다는 장점은 버전이 높아지면서 사용할 수 없는 라이브러리나 버전이 낮아 사용할 수 없는 라이브러리를 사용할 수 있게 해준다. 

설치 방법은 nvm-windows : https://github.com/coreybutler/nvm-windows/releases  경로로 이동하여 

nvm-setup.zip 파일을 설치한다. 

그리고 파일을 실행시켜 경로를 설정하고 마치면 nvm이 설치 된 것을 알 수 있다. 이제 cmd 에 간단한 명령어를 쳐보며 다운이 완료 되었는지 확인하자. 

>>>npm -v
6.14.8

>>>node -v
v12.18.3

>>>nvm list
 * 12.18.3 (Currently using 64-bit executable)

>>>nvm use 12.18.3
Now using node v12.18.3 (64-bit)

다음과 같이 cmd에 명령어를 입력 했을 때 다음과 같은 결과가 나온다면 정상적으로 설치가 되었다는 것이다.

 

2. open jdk 설치 

 

안드로이드 앱을 빌드하기 위한 Java openJdk를 설치 진행한다. 직접 오라클 사이트를 방문하여 설치하는 방법도 있지만

https://www.azul.com/downloads/zulu-community/?version=java-8-lts&os=windows&architecture=x86-64-bit&package=jdk

 

Java Download | Java 8, Java 11, Java 13 - Linux, Windows & macOS

Download Java Builds of OpenJDK 8, 11, 13 & 15. Azul Zulu Builds of OpenJDK runs on Linux, Windows, macOS & Solaris on X86, Arm, SPARC & PPC

www.azul.com

위 사이트에 들어가 쉽게 다운 하는 방법도 있다. 

사이트에 들어가 Java 8, Windows, 64-bit, JDK를 선택하시고 msi 버튼을 눌러 설치 진행한다.  

> java -version
java version "1.8.0_261"
Java(TM) SE Runtime Environment (build 1.8.0_261-b12)
Java HotSpot(TM) Client VM (build 25.261-b12, mixed mode, sharing)

다음과 같이 나온다면 정상적으로 설치가 완료된 것이다.

 

3. python 설치 

 

React native 빌드 시스템은 python을 통해 진행된다. 따라서 python 설치는 필수적이다. 

 

https://www.python.org/downloads/

 

Download Python

The official home of the Python Programming Language

www.python.org

홈 페이지로 가서 현재 가장 최신의 stable 버전을 설치한다. 

python 3.9.6 버전을 설치하고 아래 명령어를 입력하여 정상적으로 설치 되었는지 확인하자 

>python --version

 

4. 리액트 네이티브 CLI 설치

 

다음으로 react-native를 직접적으로 사용하기 위한 CLI 를 설치한다. CLI는 

  1. Expo CLI
  2. React Native CLI

이렇게 2가지로 나누어진다. 두 가지 프로그램 다 장 단점이 있지만, 우리는 필요한 기능을 직접 구현해서 사용할 수 있는 React Native CLI를 설치하기로 한다.

>npm install -g react-native-cli

위의 명령어를 입력하면 react-native 파일을 설치 할 수 있다. 

>react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

파일 설치가 완료되면 위의 명령어를 통해 설치가 완료된 것을 확인 할 수 있다. 

 

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

 

이제 대망의 마지막 설치과정이다. 안드로이드 스튜디오를 직접 설치해보자 

 

https://developer.android.com/studio/index.html

 

Download Android Studio and SDK tools  |  Android 스튜디오

developer.android.com

우선 설치 파일 사이트로 들어가자 

사이트를 들어가면 대문짝하게 설치 파일 다운로드 받는 곳이 나온다. 이제 설치를 진행하자 

안드설치에 가장 큰 문제점은 내가 클릭을 진행했지만 이게 정말 클릭이 되었는지 안 되었는지 알 수가 없는 미칠듯한 느린 진행속도 이다. 필자는 껏다 켯다를 5번 반복했다. 부디 이 글을 읽는 분들은 약간의 기다림을 가지고 진행하기로 하자. 설치 파일을 열면 

다음과 같은 화면이 나오게 된다. 

virtual Device는 포함시킨 상태로 next버튼을 눌러주자 그리고 쭉쭉 next 및 install을 눌러 설치를 진행하자 

설치가 완료되면 안드로이드 스튜디오가 실행되게 된다. 설치가 완료되면 이제 sdk파일이 설치된 경로로 사용자 path에 추가해 줘야 한다. 

다음에서 환경 변수를 클릭하여 추가 변수를 설정해두자 

새로만들기 버튼을 클릭하여 ANDROID_HOME 이란 이름의 sdk가 설치된 파일로 path를 저장해두자   

 

이제 이렇게 함으로써 드디어 기본적인 react-native 세팅을 끝낼 수 있게 되었다. 이제 본격적으로 개발을 진행해보자