[ React Native ] Expo로 개발 환경 설정

˚ Expo를 사용하는 이유

˚ 설치

˚ 실행

---

 

React Native는 웹을 개발하는 것이 아니라 앱을 개발하는 것이 목적이기 때문에 앱을 만드는데 필요한 모든 소프트웨어를 다운받아야 해요.

일반적으로 안드로이드 앱을 개발하려면 안드로이드 스튜디오, Java, Android SDK가 필요하고,iOS 앱은 Xcode가 필수예요.

하지만 Expo를 사용하면 이러한 복잡한 소프트웨어 설치나 세팅 없이도 바로 앱 개발을 시작할 수 있어요.

그래서 앱 개발 초보자는 EXPO를 이용하여 개발 환경을 간단히 세팅하고, 실제 디바이스나 애뮬레이터에서 앱을 실행해 보는 것이 좋답니다 !

---

Node & npm 설치

리액트 네이티브는 Javascript로 개발되므로, Node.js와 npm (패키지 매니저) 을 설치해야 해요.

 

Node.js — Download Node.js®

위 링크로 접속해 Node.js를 다운로드할 수 있으며, Current 버전보단 안정된 LTS 버전을 추천해요.

 

설치가 완료되면 터미널 창에 아래 명령어로 정상적으로 설치되었는지 확인해 주세요.

node.js와 npm의 버전이 각각 출력된다면 성공적으로 설치가 완료되었다고 보시면 됩니다.

$ node -v
$ npm -v

 

Expo 설치

터미널에서 아래 명령어를 입력하여 Expo CLI를 전역적으로 설치해 주세요.

$ npm install --global expo-cli

만약 윈도우 사용자라면, 위 명령어를 입력해 전역적으로 "expo-cli"를 설치하면 끝이에요 !

 

설치 후에는, 안드로이드는 play store, iOS는 app store로 가서 "Expo Go" 라는 앱을 다운 받아

앱에서 계정 생성 후 로그인해 주세요.

웹에서 진행하셔도 되지만 폰으로 직접 코드를 실행시키기를 원한다면 앱에서도 로그인해주셔야 해요.

 

Expo 실행

리액트 네이티브 학습을 위한 새 폴더를 만들고 해당 폴더로 이동한 뒤, 아래 명령어로 새 프로젝트를 시작해 주세요.

아래 명령어로 "my-project" 라는 이름을 가진 프로젝트를 생성할 수 있어요.

$ expo init my-project

template 선택

설치 중 나타나는 화면에서는 그냥 엔터를 눌러 blank를 선택해 주시면 됩니다.

 

프로젝트 생성이 완료되면, 아래 명령어로 프로젝트 폴더로 이동 후, VSCode로 코드를 열어보세요.

$ cd my-project
$ code .

 

Expo로 개발 중인 앱을 배포하기 위해서는 컴퓨터에서도 Expo 로그인을 진행해주셔야 해요.

VSCode 터미널을 열어 아래 명령어로 Expo에 로그인해 주세요.

$ expo login

위 명령어를 입력하면 이메일과 비밀번호를 입력하는 란이 차례로 나올 텐데 모두 차례로 입력하시면 로그인 성공이에요.

 

로그인 후에는 아래 명령어를 입력해서 프로젝트를 실행해 주세요.

$ npm start

 

정상적으로 실행되면, 여러분의 콘솔에 QR code와 여러 command들이 표시될 거예요.

 

폰으로 직접 결과를 확인하기 위해서는 실행 준비가 되어 있는 프로젝트에 바로 접속하거나,

직접 터미널에 있는 QR 코드를 스캔하면 바로 앱을 실행할 수 있어요.

Expo Go 화면

 

코드

제대로 실행이 되면 위 사진들처럼 코드의 실행 결과를 실시간으로 확인할 수 있답니다 !

---

* Snack

Expo를 사용한다면 "Snack"이라는 웹사이트를 이용할 수가 있어요.

Snack - React Native in the browser

 

Snack은 브라우저에서 React Native를 개발할 수 있게 해주는 온라인 코드 에디터라고 할 수 있어요.

Visual Studio Code와 같은 에디터를 설치할 수 없거나, node.js를 다운로드할 수 없는 경우 등에 유용하게 사용될 수 있어요 !

 

Snack 또한 VSC에서 실행할 때와 같이 QR코드로 인식이 가능하며, 웹 브라우저에서 애뮬레이터를 실행할 수도 있어요.

브라우저에서 코드를 직접 수정하고 브라우저에서 실시간으로 수정사항을 확인할 수도 있는 거죠.

아무런 제약 없이 iOS도 안드로이드도 개발할 수 있기 때문에 연습 삼아 개발해 볼 때 추천합니다 !

---

Nomad Coder 강의를 바탕으로 작성했기 때문에 최신 버전과 조금 다를 수도 있으니, 공식문서를 참고해서 작성하는 것도 괜찮다 !

기록용으로 작성한 내용이니 정확하지 않을 수 있다는 점 참고 부탁해요 .. :)

Expo Documentation