이 글은 nomadcoders.co의 "왕초보를 위한 React Native 101"를 시청하고 공부한 내용을 정리한 글입니다.
Application 구조
전 글에서 설명 했듯이, 앱은 우리가 실제로 개발하는 코드와 Bridge들을 통해서 코드가 Platform API와 통신할 수 있게 해주는 인프라 시설들로 구성되어 있다.
그래서 앱을 만들고 싶으면 안드로이드 스튜디오, 자바, 안드로이드 SDK, 시뮬레이터 등등 필요한 모든 소프트웨어를 설치해야만 한다.
하지만 Expo라는 도구로 어떤 소프트웨어도 다운받지 않고 React Native를 사용할 수 있다.
Expo는 위 그림에 있는 모든 인프라 시설들을 가지고 있지만, 코드부분만 가지고 있지않다.
우리가 컴퓨터와 핸드폰에 설치한 Expo를 연동시켜서 Expo에 우리가 설계한 React Native 코드만 전송해준다면, 따로 컴파일 할 필요없이 핸드폰에서 즉시 그 코드를 실행해 볼 수 있는것이다.
이는 대부분 앱들이 동일한 인프라 시설을 사용하기 때문에 가능한 일이다.
Expo를 사용하기 위해선 약간의 준비과정이 필요하다.
핸드폰
구글 플레이스토어에서 Expo검색후 앱을 다운로드 해준다.
그 후에 Profile탭에 들어가서 계정을 만들어 준다.
컴퓨터
우선 node.js와 Visual Studio Code를 설치해준다.
node.js 설치
VS Code 설치
설치 완료후 cmd창에서
node -v
npm -v위 두 명령어를 입력했을때 자신이 다운받은 버전이 나타난다면 node.js와 npm이 설치 완료된 것이다.
npm install --global expo-clicmd에 위 명령어를 입력해 Expo를 컴퓨터에 설치해준다.
예제 실행
설치가 완료되면
expo init ProjectName명령어를 입력해 ProjectName을 이름으로 하는 프로젝트를 생성한다.
이건 옵션 선택 화면인데, blank를 선택하고 엔터를 누르면 필요한 프로그램이 설치된다.
cd ProjectName
code .cmd에 위 명령어를 입력하면 visual studio code에서 프로젝트가 자동으로 열린다.
우선 컴퓨터에서도 동일한 계정으로 로그인 해야하기 때문에 터미널에 expo login을 입력하고 로그인을 해준다.
이때 나는 시스템에서 스크립트를 실행할 수 없다는 보안 오류가 발생했고 Window PowerShell을 관리자모드로 실행하여
Set-ExecutionPolicy -ExecutionPolicy Unrestricted a명령어 입력으로 해결했다.
package.json 파일에서 "start": "expo start" 부분을 실행시키면 터미널에 qr코드가 출력되는데 핸드폰 Expo어플로 들어가서 QR 코드를 스캔하면 프로젝트에 접근할 수 있다.
QR코드를 스캔 후 로딩시간이 끝나면 휴대폰 화면에는 visual code App.js파일 안에 있는 Text부분 Open up ~~이 나타날 것이다.
이제 그 부분을 수정하고 저장해보자.
역시 잠깐의 로딩이 끝난후에 휴대폰에 수정된 글자가 보일 것이다 👍👍👍
