React Native 개발 환경 설정

React Native

어플리케이션을 개발할 때 가장 먼저 떠오르는 고민은 플랫폼 문제이다. 현재 안드로이드와 IOS로 분리되어있는 시장에 앱을 출시하기 위해서는, Swift 또는 Java나 코틀린을 사용하여 두 가지 버전의 앱 개발을 해야한다. 그러나 여기 자바스크립트와 리액트로 안드로이드/IOS 앱을 만들 수 있는, 리액트 네이티브가 등장하면서 개발 과정이 좀 더 간결하게 되었다. 

이번 글에서는 리액트 네이티브의 특징이나 장단점 보다는, create-react-native-app을 통해 놀랍도록 간소화된 개발 환경 구축에 대해 설명할 것이다.

CRNA를 통한 개발 환경 구축

얼마 전까지만 하더라도 expo + typescript + react native의 조합을 사용하기 위해서 많은 설정을 추가해 줘야했는데, Create React Native App(CRNA)을 통해 명령어 몇 줄로 개발 환경 세팅이 가능하게 되었다. 관련 자료를 찾아보니 이미 나와있었는데 그냥 내가 못찾아서 못썼던거 같기도 하다. 다시 한번 실감하는 구글링의 중요성.

https://github.com/react-community/create-react-native-app

$ npm i -g create-react-native-app
$ create-react-native-app [프로젝트 이름]                                              
$ cd [프로젝트 이름]
$ npm install

위의 코드가 CRNA를 사용하는 방법이다. 먼저 전역적으로(global) CRNA를 설치하고, create-react-native-app 키워드를 통해 프로젝트를 생성해준다. 프로젝트가 생성되면 해당 디렉토리로 이동하여 npm install 키워드로 필요한 default 모듈들을 설치해준다.

$ npm install -g create-react-native-app
$ create-react-native-app my-app --scripts-version=react-native-scripts-ts         
$ cd my-app/
$ npm start

추가로 위의 코드와 같이 --scripts-version 옵션을 Typescript로 주면, 타입스크립트가 적용된 React Native 프로젝트가 생성된다. 별도의 모듈이나 typescript를 설치해야 할 필요가 전혀 없다.

프로젝트 실행

npm start                                                                           

CRNA 프로젝트를 생성하면, 기본적으로 실행 및 동작에 필요한 파일이 만들어 진다. 터미널을 켜고 프로젝트 디렉토리에서 위 명령어를 입력하면 아래와 같은 출력을 볼 수 있다.

현재 앱이 동작하고 있으며, 위의 QR 코드는 Expo 어플리케이션을 통해 자신의 휴대폰에서 동작이 가능하다.

앱이 실행되고 있는 터미널에서는 가장 마지막 5줄에 적힌 것처럼 문자열을 입력하면 특정 동작이 실행된다. 동작되는 모드는 다음과 같다.

> a를 누르면 안드로이드/ i를 누르면 IOS 에뮬레이터가 동작한다.

> s를 누르면 앱의 url을 폰이나 이메일에 전송한다.

> q를 누르면 QR 코드를 보여준다

> r을 누르면 재시작하고, R을 누르면 캐시를 비우고 재시작한다.

> d를 누르면 실행 모드 변경

에러 발생 시

$ react-native-scripts-ts start
17:04:42: Unable to start server
See https://git.io/v5vcn for more information, either install watchman or run the following snippet:
  sudo sysctl -w kern.maxfiles=5242880
  sudo sysctl -w kern.maxfilesperproc=524288
 
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c react-native-scripts-ts start
Directory: /Users/eunwoo/Desktop/personal/clean-todo/webapp
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/Users/eunwoo/Desktop/personal/clean-todo/webapp/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

만약 위와 같은 에러가 발생할 경우 watchman을 설치해 주도록 하자. macOS 기준으로 homebrew로 설치하는 watchman의 명령어는 아래와 같다.

brew update
brew install watchman