Expo 정리

React Native 개발을 진행할 때 Expo 라는 3rd Party 서비스를 사용할 수 있다. 이를 활용하여 쉬운 배포, 버전 업데이트 및 테스트가 가능해진다. 물론 단점도 있다. Expo 를 사용하게 되면 Expo 에서 제공하는 기능들만 사용할 수 있고, native 파일들을 제어할 수 없어진다. Expo 는 간단하고 편리한 대신에 복잡하고 섬세하게 제어할 수 없다는 점이 있는 것이다. Expo 를 사용하여, 아래 명령어로 간단하게 React Native 프로젝트를 생성해볼 수 있다.

 

 

 

npx create-expo-app 프로젝트_이름

 

 

 

이렇게 설치하게 되면 아래와 같은 구조를 띄게된다.

 

 

 

result

 

 

 

하나씩 살펴보자면 우선 assets 폴더는 이미지 등의 asset 들을 보관하는 곳이고, node_modules 는 앱을 실행할 때 필요한 모든 라이브러리들이 들어가는 곳이다. app.json 에는 React Native 앱 자체의 설정을 넣어주게 되고, babel.config.js 에는 바벨을 이용하여 어떻게 코드를 transpile 할지 설정하는 곳이다. 여기서 바벨이란, 최신 JS 문법을 지원하지 않는 브라우저들을 위해 최신 JS 문법을 구형 브라우저에서도 사용할 수 있게끔 변화해주는 라이브러리이다. package.json 에는 해당 프로젝트에 대한 정보들이 적혀있다. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전 등이 명시되어 있는 곳이다. 앱을 실행, 빌드, 테스트할 때 등의 사용할 스크립트가 명시되어있다. 프로젝트에서 자주 실행해야하는 명령어를 스크립트로 작성해두면 명령어로 실행이 가능하다고 한다.

 

 

 

Expo 로 만든 프로젝트는 npx expo start 명령어로 실행을 시켜줄 수 있다. 실행시켜준 후, 스마트폰에 Expo 앱을 다운받고 명령창에 뜨는 QR 코드를 스캔하면 앱을 스마트폰에서 사용해볼 수도 있다. 또, 컴퓨터 웹에서도 프로젝트를 열어서 확인해볼 수도 있다. 프로젝트를 실행시키고 w 를 누르면 웹 페이지가 열리는 것을 확인할 수 있다. (웹에서 열기 위해 필요한 모듈이 없을시 특정 다운로드 명령어를 실행하라는 문구가 나온다)