React-Native 개발환경부터 프로젝트 생성

사이드 프로젝트로 React-Native를 사용하여 모바일 App 앱 개발을 하려고 합니다.
새로운 컴퓨터에 개발환경부터 프로젝트 생성까지 생각보다 시간이 오래걸려서 해당 내용에 대해 정리해볼까 합니다.
아래 내용은 Windows 기준 개발환경 구축입니다.

개발환경 구축

먼저 React-Native를 실행하기 전 Node.js, Python, Android Studio 등의 설치가 필수적으로 선행되어야하는데
저는 JDK 1.8 과 11버전 두 개를 구축해보겠습니다.

1) Chocolatey 설치
2) Node.js 설치
3) Python 설치
4) java 8 or 11 설치
5) Android Studio 설치
6) React-Native 프로젝트 생성 및 실행

1. Chocolatey 설치

Chocolatey는 Windows 에서 필요한 패키지를 설치하고 관리하는 Windows 용 패키지 관리자입니다.
이번엔 이걸 활용해서 Node 와 Python, JDK를 설치해보겠습니다.

먼저 명령프롬프트 (CMD) 창을 관리자 권한으로 실행한 후에

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

위에 명령어를 입력 및 실행합니다.

설치가 다 된 후에

choco -version

을 실행해서

Chocolatey v1.2.1

설치가 잘 되었다면, 위와 같은 choco의 버전을 확인할 수 있습니다.

2. Node.js 설치

choco를 설치했다면 이제 실행시켰던 cmd창에 그대로

choco install nvm

명령어를 실행해줍니다.

설치가 잘 되었다면 아까 choco를 설치했을 때와 같이

nvm --version

을 입력하여 버전을 확인하며 설치가 잘 되었는지 확인하고 이전에 node를 설치한 적이 없다면

nvm install 12.13.1

혹은

nvm install 14.17.5

둘 중 하나를 실행합니다.

그 후에

nvm list

를 쳐보면 방금 명령어를 입력한 14.17.5와 12.13.1가 리스트업되는 것을 확인할 수 있습니다.

node -v

명령어를 실행하면 처음 설치했던 node의 버전이 적용된 것을 확인할 수 있고, node 버전을 변경하고 싶다면

nvm use 노드버전

을 실행하여 node의 버전을 변경해주면 됩니다.

nvm은 node의 버전관리를 해주는 shell script 입니다.
이전에 nvm을 설치하지않고 node만 먼저 설치한 경우에는 nvm으로 버전관리가 제대로 되지 않을 수 있으니 nvm 설치 전 깔려있던 node가 있다면 미리 제거해주는 것도 좋은 방법입니다.

3. Python 설치

Node.js를 설치했던 방식과 똑같이 cmd 창에

choco install -y python2

위 명령어를 실행해줍니다.

python --version

설치 완료 후 위 명령어로 버전확인 및 설치가 제대로 되었는지 확인하고

python

또는

python 3.9.4

위와 같이 나오면 설치가 정상적으로 진행된 것입니다.

4. JDK 설치

choco를 사용해서 JDK를 설치해도 되지만 저는 이미 다운로드 파일을 따로 받아서 두개의 설치를 마친 상태이기 때문에 설치 방법만 알려드리고 저처럼 하실 분들은 링크를 아래에 따로 달아둘테니 해당 링크로 가서 다운로드 후 설치하시면 되겠습니다.

choco install openjdk11

choco install openjdk8

맨 처음 말한 것처럼 저는 Java 8 과 11을 함께 다운받았기 때문에 둘 중 하나를 선택하셔서 설치하셔도 무방합니다.
설치 시의 기본 경로는
C:\Program Files\OpenJDK

환경 변수 설정 시 참고해주세요.

java -version

위 명령어를 실행하여 java 버전과 함께 설치가 잘 되었는지 확인합니다.

혹시나! java 버전이 본인이 설치한 것과 다르거나 나오지 않을 때에는 아래에 환경변수 설정도 같이 적어놓았으니 참고해주시면 됩니다.
문제가 없으시다면 다음 Android Studio 설치로 넘어가셔도 됩니다.

그 외 설치파일로 다운로드 받고 싶으시다면. 링크로 이동한 후에

상단에 Java 8 과 Java 11 중 선택한 후 하단 탭의 Windows 선택 후 x64가 적혀있는 exe 파일을 받은 후 설치해주시면 됩니다.

오라클을 처음 이용해보신다면 가입 후에 다운로드를 받을 수 있는데 가입 후에 다시 다운로드를 진행하면 되겠습니다.

오라클 배포버전 설치 시 기본 경로는
C:\Program Files\Java

오라클의 배포버전으로 설치 진행 시에는 JAVA의 환경변수를 설정해야하니 아래를 참고해주세요.

4-2. JAVA 환경변수 설정

환경 변수 설정은 내 PC -> 우클릭 후 속성 선택 -> 고급 시스템 설정 클릭 하신 후

위와 같이 시스템 속성에서 고급 -> 환경 변수 를 클릭합니다.

그럼 위와 같은 화면이 나오는데요.
시스템 변수의 새로 만들기를 클릭합니다.

새로 만들기를 클릭한 후에 위와 같은 화면이 나올텐데 우리는 JAVA의 환경변수를 설정하고 있음으로 변수 이름은 JAVA_HOME 으로 변수 값은 아까 위에 설치한 배포버전에 따라 경로를 작성해주시면 됩니다.

저는 오라클 배포버전의 Java 8 과 11을 받았기 때문에, 일단 먼저 Java 8을 JAVA_HOME의 변수값으로 입력하였습니다.

입력을 다 하셨으면 두번째 사진의 시스템 변수 리스트에서 Path 라는 변수가 보이실 겁니다. 해당 변수를 더블클릭하면

위와 같은 화면이 나오는데요.
여기서 새로 만들기 또는 빈칸을 더블클릭한 후 아까 작성했던 JAVA_HOME을 Path의 등록합니다.

%JAVA_HOME%bin

사진의 맨 아래 경로와 같이 입력해주고 확인하시면 됩니다.

이렇게 JAVA의 환경변수 설정도 끝났습니다 !

환경변수 설정 후에는 열어놓았던 CMD 창을 껏다 켜야 java -version을 확인할 수 있습니다.

5. Android Studio 설치

Android Studio는 React-Native의 안드로이드 기반 애뮬레이터를 실행하기 위해서 설치해야합니다.
이제 이것만 설치하면 저희는 React-Native 프로젝트를 구동할 수 있는 최소 조건이 되는 겁니다.

안드로이드 스튜디오
위의 링크를 클릭하여 Android Studio 공식 홈페이지에서 설치 파일을 다운로드 받습니다.

설치 파일을 실행한 화면입니다.
Next를 눌러서 진행해준 후에

Android Virual Device 를 체크 한 후 Next를 눌러줍니다.

그리고 Android Studio의 설치 경로를 수정하시려면 수정하신 후에 계속 Next로 화면을 넘겨줍니다.

설치가 다 된 후에 Start Android Studio를 체크한 후 Finish를 눌러 실행시킵니다.

다 설치한 후에는 위와 같이 추가 설치화면이 나오는데

잘 모르겠다면 위와 같이 Standard로 설치를 쭉 진행해주시면 됩니다.

Custom은 말 그대로 사용자가 직접 설치환경을 설정하는 것이고
Standard는 안드로이드에서 제공하는 기본 설치 환경입니다.

설치를 쭉 진행한 후에는

위와 같은 화면이 나올텐데 왼쪽 메뉴에서 Project를 누른 후 우측 상단에 New Project를 선택합니다.

그러면 애뮬레이터의 템플릿을 설정하는 창이 나올텐데

위와 같은 Empty Activity로 설정하여 다음 화면으로 넘어갑니다.

세부적인 설정 창이고 이 부분은 현재 쓰지않을 것이기 때문에 그냥 Finish로 프로젝트를 생성합니다.

프로젝트 창에 들어가면 상단에 Tools 라는 메뉴를 클릭 -> SDK Manager 를 클릭합니다.

SDK Manager 화면입니다.
우측 하단에 Show Package Details를 눌러 각 세부 Install 항목을 확인하고, 본인이 React-Native에서 사용할 SDK 버전을 다운로드 받습니다.

저는 API 29 버전이기 때문에 위와 같이 설치하였습니다.

그 후에 SDK Tools에 들어가서 위와 같이 설치파일에 체크해 준 후 OK를 눌러 Install을 진행합니다.

install이 모두 완료되었다면 Android Studio 에서 해야할 것들도 끝났습니다.

6. React-Native 프로젝트 생성 및 실행

이제는 실제 React-Native 프로젝트를 생성한 후 실행할 차례입니다.
마지막 단계네요.

npm install -g react-native-cli

먼저 위 명령어를 실행하여 react-native-cli 을 글로벌로 설치합니다.
-g는 global 설치의 약자입니다.

npx react-native init sampleApp --version 0.68.2

아까 맨 처음 Node를 설치할 때 14버전 이상을 설치했다면 위 명령어를

npx react-native init sampleApp —version 0.66.4

Node 12버전을 설치했다면 위 명령어로 react-native의 버전을 설정하여 설치합니다.

0.68 이상은 Node 14버전 이상을 요구하며
0.66 은 Node 12버전 이상을 요구하고 있습니다.

react-native 프로젝트의 생성이 완료 되었다면

npm run android

위 명령어로 프로젝트를 실행합니다.

그러면 위와 같은 화면이 나오면서 React-Native 애뮬레이터 구동이 끝났습니다.

마치며...

생각보다 글이 굉장히 길어졌습니다.
추후에는 안드로이드 스튜디오 설치 방법을 따로 작성해서 정리를 해봐야할 것 같습니다.