react-native의 세팅을 도와주는 expo 이용해보기

expo를 이용해봅시다.

직접 react-native도 다운로드하고, 필요한 것들도 따라서 다운로드 해서 초기 환경을 세팅할 수도 있지만, expo를 이용하면 간단하게 리액트 네이티브 초기환경을 세팅할 수 있습니다. 또한 expo에서 제공해주는 여러 편리한 기능들이 있는데, 아마 가장 많이 사용하는 것이 아이콘 관련 기능일 것이고, 또 많이 사용하는 것이 다 만들고 나서 build할 때 그냥 간편하게 할 수 있다는 것이라고 생각합니다.

expo에서 제공하는 아이콘

 

expo에서 제공해주는 icon 보러가기

이처럼 해당 아이콘들을 간편하게 불러와서 사용할 수도 있고, 또 색을 넣을 때라던가 사용자가 이미지와 같은 리소스들을 다 불러올 때까지 앱로딩 화면을 보여주는 등의 기능도 있기 때문에 expo를 이용하는 것이 여러모로 이점이 많습니다.

expo cli 2.0 출시

예전에는 expo에서 GUI(그래픽 유저 인터페이스)와 CLI(커맨드 라인 인터페이스) 환경 둘다 제공해주었지만 현재 2.0 버전이 나오면서 CLI로 통합하고 CLI에서 개발자 환경을 제공해줍니다.

GUI로 접속 시 더이상 지원하지 않는다는 문구가 나옵니다.

저도 새로운 expo의 기능을 탐험(?)도 하고 공부도 하는 겸 이렇게 포스팅을 남깁니다.

expo 시작하기

expo를 다운로드 하는 것부터 시작하겠습니다.

npm install expo-cli --global

엑스포를 글로벌하게 다운로드해주시면 됩니다.

다운로드가 정상적으로 이루어졌는 지 확인하시려면 expo-cli --version 이나 expo --version 을 입력해보시면 됩니다.

2018.12.23을 기준으로 2.6.14 버전이 가장 최신버전입니다.

이제 현재 작업하고 있는 디렉토리에서 expo init 이라는 명령어를 입력해주세요. 그럼 프로젝트의 이름을 물어보고, 해당 프로젝트의 이름, 템플릿 설정 등을 물어봅니다. 저는 비어있는 템플릿을 설정하고 yarn을 통해 다운로드 받았습니다.

우리가 설정한 프로젝트 이름으로 폴더가 생성되고, 거기에 기본 세팅이 되어있습니다. 아주 간편하죠?

개발 시작하기

expo가 생성한 프로젝트 폴더에 들어가서 expo start라는 명령어를 입력해주세요. 개발서버가 시작되고 로딩이 끝나면 우리에게 QR코드와 아래와 같은 질문을 물어봅니다.

개발 환경 설정하기

expo에서는 expo client라는 앱을 제공해주는데, 해당 바코드를 안드로이드의 경우엔 클라이언트 내부의 스캔을 통해서 앱을 실행시키고, IOS의 경우 카메라 앱을 통해서 앱을 실행시킵니다. 자신의 휴대폰을 이용하기 싫으면 에뮬레이터를 이용해서 앱을 실행시킬 수 있습니다. 안드로이드의 경우엔 a를 클릭하면 됩니다.

expo cli를 이용해서 만든 프로젝트를 빌드하는 방법도 아주 간단합니다.

expo 옵션보기

커맨드 창에 exp 또는 expo라고 입력하시면 엑스포에서 사용할 수 있는 명령어와 옵션이 나타납니다.

exp build:android 또는 exp build:ios

 

이렇게 입력하시면 android는 apk파일을, ios는 ipa파일을 받을 수 있는 링크를 줍니다. 해당 링크를 웹브라우저를 통해서 다운로드 받으시면 됩니다.

빌드가 완료되면 expo.io/builds/ 에서 확인하고 다운로드 받을 수 있습니다.

expo를 이용해서 더 즐거운 코딩이 되시길 바랍니다. 공감은 제작자에게 큰 힘이 됩니다.