React Native와 expo를 활용해 앱 만들기 - 1

MAC 기준으로 간단하게 시작하는 방법은 아래와 같다.

1. expo-cil, watchman 설치

npm install --global expo-cli

MAC은 watchman을 설치해주어야 한다.

brew install watchman

2. expo init

expo init 프로젝트이름

3. 아이폰에 Expo go 설치 및 회원가입

안드로이드는 Expo 이다.

4. npm start

이 과정을 거치면서 발생할 문제와 해결방법을 적어보려고 한다.

코딩을 시작하면서 웹사이트는 여러개 만들어보았지만 앱을 만들어본적은 없어서 React Native를 배워보기로 했다. 특히 React를 사용할 줄 알면 공통된 부분이 많다고 하기에, 부담없이 시작해보았다.

앱을 만들기 위해서는 다양한 소프트웨어들이 필요하다.
하지만 expo를 사용하면 그 소프트웨어들을 다 준비해주고 우리가 작업한 부분만 교체되어지기 때문에 간편하게 앱을 프로토타이핑 할 수 있어 이방법을 사용하지만, 실제 앱을 만들때는 모든 소프트웨어가 필요하다. 이는 실제 앱을 만드는 실습을 할때 다시한번 소개해보겠다.

설치가 완료되면 우리의 핸드폰에 expo go 앱을 설치하면 된다.

React Native는 인터페이스로 우리와 운영체제 사이에 있는것이며 브라우저가 없다. 우리가 작성한 코드가 ios또는 안드로이드 코드로 번역이 되는 시스템이다.

문제

새로운 프로젝트를 생성하고, npm start를 진행해야되는데 문제가 발생했다.
Expo CLI를 설치했는데, 설치가 안된것으로 오류메세지가 발생했다.

이를 해결하기 위해 전역적으로 설치했고

npm install -g expo-cli

설치하는 과정 중, 설치하기 위한 권한이 없다는 오류메세지를 확인하여 npm의 기본 디텍토리에 대한 쓰기 권한을 부여했다.

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

그래도 발생하는 오류메세지에는 Expo CLI의 글로벌 설치 대신, 프로젝트 내에 로컬 패키지로 Expo CLI를 사용하도록 권장하고 있다고 하여 터미널에서 Expo CLI를 로컬로 설치했다.

npm install --save-dev expo-cli

이후 실행 성공.

폰에서 앱을 실행하고 로그인 / VSCODE에서도 expo login을 통해 아이디 및 비밀번호를 입력하고
npm start 후 앱을 열면 폰으로 볼수 있다.

여기서 주의할점
컴퓨터와 폰이 같은 네트워크를 사용해야 한다. 나는 와이파이로 연결했다.

텍스트를 바꾸니까 바로 적용되는것을 볼 수 있다.