[React Native] React Native CLI 시작하기

React Native를 시작하는 방법은 React-native-cli와 Expo 프로젝트로 2가지 방법이 존재한다. 이전 포스팅에서 Expo를 활용하여 간단한 웹뷰 앱을 만들어보았다. 이번 포스트에서는 React Native CLI를 활용하여 프로젝트 생성 및 시작하는 방법을 알아보겠다.

1. 개발 환경 구축

1. 개발 툴 설치

React 프로젝트를 개발할때 대체적으로 사용하는 것이 Visual Studio Code라는 프로그램을 사용한다. 아래의 링크에서 다운로드 받아서 설치가 가능하다.
https://code.visualstudio.com/

2. 확장팩 설치

Visual Studio Code 설치가 완료되면 확장팩을 설치하는 단축키 Ctrl + Shift + x 를 눌러 ES7+ React/Redux/React-Native snippets을 검색하여 설치한다.

3. Node.js 설치

React 프로젝트를 생성하기 위해서 Node.js라는 것이 필요하다.
다음의 링크에서 Node.js를 다운로드 받아 설치할 수 있다.
https://nodejs.org/ko/

4. Android Studio 설치

프로젝트를 생성 후 실행하기 위해서는 안드로이드 에뮬레이터가 필요하다. Android Studio를 설치하면 자동으로 에뮬레이터도 설치가 되니 아래의 링크로 다운로드 후 설치한다.
https://developer.android.com/studio

2. 생성하기

프로젝트를 생성하는 방법은 작업 공간 폴더를 생성 후 Visual Studio Code로 폴더를 열어 Ctrl + ` 로 명령 프롬프트를 실행하여 아래의 명령어를 입력하면 생성이 된다.

npx react-native init [프로젝트명]

위의 방법대로 하면 프로젝트가 최신 버전의 타입스크립트로 생성되며 타입스크립트에 익숙하지 않으면 자바스크립트로 생성하는 방법은 아래의 명령어를 입력하면 된다.

npx react-native init [프로젝트명] --version 0.68.2

3. 실행하기

안드로이드 에뮬레이터를 사용하기 위해 Android Studio를 설치한 후 환경변수 설정이 필요하다.
환경변수를 설정하는 곳은 아래를 따라하면 된다.

1. 윈도우 설정에서 시스템 클릭
   
2. 정보 > 고급 시스템 설정 클릭
   
3. 고급 > 환경변수 클릭
   

사용자에 대한 사용자 변수 항목의 새로 만들기(위에 있는 새로 만들기 버튼)를 눌러 아래와 같이 새로운 환경변수를 생성한다.

※참고: 안드로이드 sdk의 기본 경로는 %LOCALAPPDATA%\Android\Sdk으로 설정해도 문제 없다.

시스템 변수에서 path부분을 찾아서 편집 버튼을 누른다.

다음과 같은 창이 나오면 새로 만들기 버튼을 눌러 마지막 줄에 다음과 같이 입력한다.

%LOCALAPPDATA%\Android\Sdk\platform-tools

Visual Studio Code의 프로젝트 폴더로 돌아와서 아래의 명령어를 명령 프롬프트에 입력하여 안드로이드 에뮬레이터로 프로젝트를 시작할 수 있다.

npx react-native run-android

4. 빌드하기

에뮬레이터에서 앱을 구동하는 것이 아닌 실제 스마트폰 환경에서 테스트 용도로 구동할 수 있다. 테스트용 apk파일을 생성 후 스마트폰에 설치를 하면 된다.

1. bundle 생성

프로젝트 폴더에서 android\app\src\main의 assets폴더를 생성한 후 명령 프롬프트에 아래의 명령어를 입력한다. 각 옵션들이 제대로 적혀 있는지 본다. 간혹 코드의 시작점을 바꾸는 경우가 있는데 만약 시작점을 변경했다면 –entry-file을 변경해주어야 한다.

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

2. 안드로이드 스튜디오 열기

개발중인 리액트 네이티브 앱의 프로젝트 폴더를 연다.

3. apk 생성

프로젝트를 열었다면 안드로이드 스튜디오의 상단 Build 옵션에 들어가서 Build Bundle / APK를 확인한다. APK를 생성하기 위해 Build APK 클릭한다.

4. 생성된 APK 확인

APK 빌드가 완료되면 –assets-dest 옵션에서 명시한 경로에 app-debug.apk 파일이 생성된다.

경로 : /android/app/build/outputs/apk/debug/
파일명 : app-debug.apk