Framework/ReactNative

ReactNative 시작하기 (with. Expo)

LoggerONE 2021. 7. 19. 15:34
반응형

Expo란 ReactNative를 개발하기 위한 빌드 툴로 실시간으로 개발 내용을 확인하거나 네트워크를 통해서 간단히 expo 앱을 통해 실시간으로 내용 변경을 확인하는 등의 기능을 합니다.

00. 준비사항

우선 개발 PC에 NodeJS 가 설치되어 있어야 합니다.

2021.07.02 - [Programming/NodeJS] - NodeJS 설치 하기 - macOS, Windows

 

NodeJS 설치 하기 - macOS, Windows

여기서는 간단히 NodeJS를 macOS 와 Windows에서 설치하는 방법을 알려 드리겠습니다. 1. macOS 에서 NodeJS 설치하기 macOS 에서 가장 간단히 설치하는 방법은 Homeberw 를 통하여 설치하는 방법으로 * Homebrew.

logger.one

 

1. Expo 설치

NodeJS 가 설치되어 있다면 expo의 설치는 간단히 npm -g expo-cli 혹은 yarn global add expo-cli로 설치가 가능합니다.

 

$ npm install -g expo-cli
$ yarn global add expo-cli

 

모두 설치되셨다면 expo -V를 통해 버전 확인이 가능합니다.


2. Expo ( ReactNative ) 프로젝트 생성

프로젝트 생성은 간단히 expo init {프로젝트 이름}으로 원하는 프로젝트의 생성이 가능합니다.

$ expo init tutorial_01

 

 

3. 프로젝트 실행하기

  프로젝트를 생성하셨다면 간단히 수정 후 실행해 보도록 합니다. 위의 init에서도 쓰여있지만 cd를 통해 프로젝트를 이동 후 간단히 npm start를 통해 프로젝트 실행이 가능합니다.

 

$ npm start

 

 

프로젝트를 실행하시면 프로젝트에 접근 가능한 url 및 QR 코드 등이 보이면서 몇 가지 설명이 나옵니다.


4. 웹 및 실제 기기 테스트

이제 개발 샐행이 완료되었으니 화면을 보면서 개발을 시작할 차례입니다. 여러 가지 방법이 있지만 여기서는 간단히 웹&모바일을 통해 개발 테스트 화면에 접속하는 방법을 알려 드리겠습니다.

 

웹 - 간단히 브라우저에서 Run in web browser를 클릭해 주시면 됩니다.

 

모바일 (실제 기기)

모비일 실제 기기의 경우는 개발 중인 PC와 네트워크 접속이 가능하다는 전제 하에 Expo 앱을 설치 후 QR 코드를 통해 접속이 가능합니다.



안드로이드의 경우 앱 내의 QR 코드 리더기를 애플 기기의 경우 자체 QR 코드 리더기를 이용하시면 Expo를 통해 개발 중인 머신에 접속하여 실시간으로 변경 사항을 확인하면서 개발이 가능해집니다.

정상적으로 접속이 된다면 화면 하단에는 간단히 번들의 빌드가 이루어진 후 결과를 확인하실 수 있습니다.

 

QR 코드를 이용해 앱을 실행하여 접속하시면 위와 같이 JavaScript 로딩 후

 

로딩이 완료된다면 기본 앱이 실행된 결과를 확인하실 수 있으실 것입니다.

 

5. 실시간 테스트

이제 테스트 환경이 완료되셨다면 프로젝트 폴더를 에디터로 열어서 App.js를 원하는 내용으로 변경해 주시면
모바일 앱에서 내용이 실시간으로 변경되는 모습을 확인하실 수 있으실 수 있으십니다..



이제 개발만 하시면 됩니다! 즐거운 개발되시기 바랍니다.

반응형