React Native 설치 및 프로젝트 생성하기

저번글에서는 리액트 네이티브가 무엇인지 작성하였습니다.

 

https://marshmello.tistory.com/68?category=1213283 

 

이번글에서는 리액트 네이티브로 프로젝트를 생성해 보도록 하겠습니다.

1. 자바 설치 및 환경설정

https://www.oracle.com/java/technologies/javase-downloads.html 사이트로 가서 자바를 설치합니다.

JDK Download 클릭 -> jdk-xxx.-x64-bin.exe 클릭합니다. (windows10 기준)

 

 

팝업이 뜨면 체크박스 클릭 허용 후 Next 버튼을 계속 클릭하여 설치를 완료합니다.

 

환경변수 설정을 위해 설치된 자바 경로로 이동합니다. (C:\Program Files\Java\jdk-16.0.1)

* 시스템 속성 찾는 방법

윈도우 탐색창에 '고급 시스템 설정' 검색을 하거나

내컴퓨터 - 우클릭 - 속성 - 고급 시스템 설정 으로 이동해도 됩니다.

 

* 시스템 속성 -> 환경변수 클릭 -> 새로만들기 클릭

 

변수 이름은 JAVA_HOME 을 입력하고 하단의 변수 값에는 설치한 폴더 경로를 입력 후 확인버튼을 클릭합니다.

시스템 변수(S)영역의 Path 를 찾아 더블클릭합니다.

새로만들기 클릭 ->

%JAVA_HOME%\bin 입력 후 확인 버튼을 클릭합니다.

명령 프롬프트 창을 실행하여 javac 와 java -version을 입력하여 다음과 같이 실행되는지 확인합니다.

 

 

 

2. 안드로이드 스튜디오 설치 및 환경설정

안드로이드 스튜디오 공식홈페이지 https://developer.android.com/studio?hl=ko 로 가서 다운로드합니다.

동의하기 체크박스 클릭 -> 다운로드 버튼 클릭합니다.

Next 계속 클릭하다가 아래의 화면이 나오면 안드로이드 버츄얼 디바이스(AVD)도 체크 후 함께 설치합니다

안드로이드 스튜디오 실행하고,  configure -> SDK Manager 클릭

SDK Platforms 탭에서 사용할 디바이스들 선택 (저는 Android4.0 상위 버전 모두 선택하였습니다.)

SDK Tools 로가서  사용할 툴을 모두 선택합니다. ( 저는 거의 모두 체크했습니다.)

체크 후 OK 버튼을 눌러 설치완료합니다.

 

* 시스템 속성 -> 환경변수 클릭 -> 새로만들기 클릭

시스템 PATH 변수 편집

새로 만들기  sdk 폴더 밑에 platform-tools 경로까지 입력 후 확인 클릭

예시 ) D:\Android\Sdk\platform-tools

 

3. Node.js 설치

Node.js 공식홈페이지 https://nodejs.org/ko/ 로 가서 다운로드 버튼을 클릭합니다. (안정화된 LTS 버전을 추천합니다. )

 

 

명령프롬프트 창을 열어 node -v 를 검색하여 버전이 나오면 성공적으로 설치된 것인지 확인합니다.

4. 파이썬 설치

파이썬 공식 홈페이지의 다운로드 페이지(http://www.python.org/downloads)에서 다운로드 버튼을 클릭하여 설치합니다. Python 3.x로 시작하는 버전 중 가장 최근의 윈도우 인스톨러를 다운로드합니다.

 

5. 에디터 설치

비주얼 스튜디오 코드 공식 홈페이지의 다운로드 페이지(https://code.visualstudio.com/download)에서 다운로드 버튼을 클릭하여 VS Code 설치를 진행합니다.

6. 프로젝트 생성하기

리액트 네이티브 프로젝트를 생성하는 방법은 2가지가 있습니다.

첫번쨰는 Expo를 이용하는 방법, 2번째는 리액트 네이티브 CLI를 이용하는 방법입니다.

 

Expo를 이용하여 프로젝트를 생성하면, 미리 여러가지 설정이 되어있어 보다 간편이 앱을 만들 수 있다는 장점이 있습니다. 또한 완성된 프로젝트를 쉽게 배포 및 관리를 할 수 있습니다. 또 iOS, 안드로이드, 웹도 함께 개발할 수 있습니다. 그러나 Expo에서 제공하는 API만을 사용할 수 있다는 대표적인 단점이 있습니다. 그리고 CLI와 비교했을때 빌드파일의 크기가 크다는 단점 또한 있습니다.

 

우선 비교적 더 간단한 방법인 Expo를 이용하여 프로젝트를 생성하고 실행해보겠습니다.

 

위에서 설치한 VS Code를 실행합니다.

상위 메뉴에 터미널 -> 새터미널을 실행합니다.

작업할 워크스페이스 경로에서 아래의 명령어를 입력하여 Expo를 설치합니다.

npm install --global expo-cli

* 설치방법은 Expo공식 홈페이지(https://docs.expo.io/get-started/installation/)를 참고하세요.

다음은 새 프로젝트를 생성합니다.

my-app는 프로젝트 명입니다. 알맞게 변경하여 사용하세요.

expo init my-app

프로젝트 생성 명령어를 입력하면, 다음과 같이 어떤 프로젝트를 생성할지 선택지가 나옵니다.

빈 화면인 black를 선택합니다.

- blank는 처음부터 시작하고 싶을 때 선택합니다.

- blank(TypeScript)는 경험자라면 이것을 선택합니다.

- tabs는 navigation tab과 같은 tab을 사용하고싶으면 선택합니다.

 

 

프로젝트를 실행합니다.

cd my-app
npm start

 

위 명령어를 실행하면 웹 브라우저에서 Expo 개발자 도구페이지가 열립니다.

 

만약 자동으로 실행되지 않는 경우 터미널에서 Developer tools running on http://localhost:19002 밑줄쳐진 http://localhost:19002에 ctrl 키를 누른채 클릭을 하여 웹브라우저를 엽니다.

Run in web browser를 클릭하여 간단하게 웹 브라우저로 확인하는 방법을 주로 테스트할 떄 사용하게 될 것입니다.

버튼을 누르면 잠시뒤에 아래와 같이 새창이 열리면서 프로젝트 화면을 웹브라우저에서 확인 할 수 있습니다.

만약 아이폰과 안드로이드에서 실행해보려면 구글 플레이스오와 애플 앱스토어에서 Expo 애플리케이션을 다운받아 설치합니다. 설치한 Expo 앱 내에서 QR코드를 스캔하여 화면을 확인합니다.

 

실제 기기에서 휴대폰을 흔들면 메뉴가 Expo 프로젝트 메뉴가 열립니다. 에뮬레이터로 진행하는 경우 IOS와 안드로이드 환경에서 각각 Command+Control+z와 Command +M 윈도우의 경우 Control+M을 이용해서 메뉴를 엽니다.

 

마지막으로, 시뮬레이터를 이용하여 화면을 확인하고 싶은 경우 반드시 AVD를 띄어놓아야지만 확인할 수 있습니다.

 

우선 Android Studio를 열어 AVD를 AVD Manager를 실행합니다.

Create Virtual Device.. 버튼을 눌러 테스트할 디바이스를 선택한 후 Next 버튼을 누릅니다.

테스트하고싶은 안드로이드 OS 버전을 선택 한 후 Next

AVD 이름을 알아보기 쉽게 적어둔 다음에 Finish를 합니다.

 

생성한 AVD를 더블클릭하여 엽니다.

아래와 같이 AVD가 열린것을 확인하면 닫지 말고 실행해둔채 놔둡니다.

 

다시 Expo가 실행된 웹브라우저로 가서 Run on Android Device/emulator를 클릭하면 아래와 같이 에뮬레이터에서 실행되는 것을 확인할 수 있습니다.

Expo 프로젝트를 종료하고 싶으면, VScode 터미널로 가서 Ctrl+C를 눌러 프로젝트를 종료합니다.

 

로그는 Expo 도구 또는 실행한 터미널에서 확인 할 수 있습니다.

 

만약 Expo 프로젝트를 시작했다가 필요에 따라 CLI 프로젝트로 변경해야하는 상황이 발생할 수 있습니다.

이 경우 eject 명령어를 이용하여 Expo 프로젝트가 감추고 있던 것들이 드러나며, 리액트 네이티브 CLI프로젝트로 시작한 것처럼 프로젝트가 변경되고 Expo 프로젝트에 있던 제약들도 없어집니다.

 

그러나 한번 실행하면 역으로 Expo 프로젝트가 될 수 있는 없으니 변경시에 주의하여야 합니다.

 

프로젝트를 생성하는 두번째 방법인 리액트 네이티브 CLI를 이용하여 프로젝트를 생성해보겠습니다.

 

CLI를 이용할 경우 필요한 기능이 있는 경우 직접 모듈을 만들어 사용할 수 있다는 장점이있습니다. 그러나 Expo에 비해 배포가 불편하며 초보자에게는 어려울 수 있다는 단점이 있습니다.

 

아래의 npm 명령어를 통해 React Native CLI 프로젝트를 생성합니다. (리액트 네이티브 사이트 참조)

AwesomeProject는 프로젝트명입니다 알맞게 변경하여 사용하세요.

npx react-native init AwesomeProject

https://reactnative.dev/docs/_getting-started-macos-ios#react-native-command-line-interface

_getting-started-macos-ios · React Native

프로젝트 생성이 정상적으로 완료되면 아래와 같은 화면이 나옵니다.

프로젝트 생성이 완료되면 프로젝트 폴더로 이동하여 프로젝트를 실행합니다.

cd AwesomeProject
npm run android
또는
npm run ios

반드시 AVD는 실행되어 있어야합니다.

 

위 명령어를 입력하면 아래와 같이 정상적으로 에뮬레이터에 화면이 실행되는 것을 확인할 수 있습니다.

실행되면서 터미널창이 실행되는데 터미널에 출력되는 Metro는 리액트 네이티브를 위한 자바스크립트 번들러로서 리액트 네이티브가 실행될때마다 자바스크립트 파일을 단일 파일로 컴파일하는 역할을 합니다. 

 

프로젝트를 종료하고 싶으면, VScode 터미널로 가서 Ctrl+C를 눌러 프로젝트를 종료합니다.

일괄 작업을 끝내시겠습니까 (Y/N)? Y

 

터미널에서 프로젝트를 종료 후 

VScode를 열어 파일 -> 폴더열기를 눌러 생성한 CLI 폴더를 엽니다.

VSCode에서 프로젝트를 열면 생성된 App.js 파일을 찾을 수 있습니다.

 

Expo 프로젝트와 리액트 네이티브 CLI 프로젝트의 화면에 보이는 것은 모두 App.js 파일에 있습니다. 

 

 

이번 글에서는 리액트 네이티브를 개발하기 위한 환경설정과 프로젝트 생성 방법을 작성하였습니다.

 

리액트 네이티브를 처음 시작하는 분이라면, Expo로 프로젝트를 생성하여 프로그램 개발하는 것을 추천드립니다.

 

Expo프로젝트를 개발하다가 네이티브 모듈을 추가할 필요가 있는경우 eject명령어를 사용하여 프로젝트를 변경하는 것이 효율적인 방법이라고 생각됩니다.

 

다음글에서는 소스를 직접 변경해보도록 하겠습니다.

 

감사합니다.