리액트 네이티브 앱 개발 환경 준비(macOS) | expo

안녕하세요. 오늘은 리액트 네이티브 프로젝트 생성해보겠습니다. 

우선, 프로젝트 생성 전에 개발 환경 준비부터 해보겠습니다.

 

1. 왓치맨 설치

왓치맨은 페이스북에서 제작한 파일 시스템 변경 감지 도구로, 파일의 변화를 감지하고 파일의 변화가 조건을 만족시키면 특정 동작을 실행시킵니다. 리액트 네이티브에서 왓치맨은 소스코드의 변화를 감지하고 자동으로 빌드하여 화면에 업로드하는 역할을 담당합니다. 왓치맨은 홈브류를 이용해서 설치합니다.

$ brew install watchman

 

2. Node.js 설치

Node.js 설치를 해보겠습니다. Node.js를 설치하면 노드 패키지 매니저인 npm(Node Package Manager)도 함께 설치되는데, npm을 통해 다양한 패키지를 설치하고 사용할 수 있습니다. 맥에서는 nvm(Node Version Manager)로 여러 버전의 Node.js를 설치하고 관리할 수 있습니다. 

아래 링크의 nvm 깃헙에 nvm 설치 방법이 자세하게 소개되어 있습니다.

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

위 코드로 터미널에서 쉘 스크립트를 실행해줍니다.

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

설치가 모두 완료되면 위 코드를 .zshrc에 추가해줍니다.(기본 쉘이 bash이면 .bashprofile에 추가해 주어야합니다.) 환경변수로 NVM_DIR을 지정해주는 코드입니다.

 

3. expo 설치

npm install expo-cli --global

 

4. 프로젝트 생성

expo init PROJECT_NAME
cd PROJECT_NAME
npm start

터미널에 이렇게 DEveloper tool을 볼 수 있는 주소와 Bundler를 실행할 수 있는 큐알코드가 나타납니다.

터미널에서 i 명령어를 입력하면 iOS 시뮬레이터를 실행시킬 수 있습니다.

 

 

이렇게 하면 개발환경 준비가 끝났습니다!