Web/React-native

React-native, 개발환경 및 Expo로 프로젝트 생성/실행

__bo0o_ 2021. 6. 6. 22:35

1. React-native란

페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크로

React의 방식으로 native 앱을 개발할 수 있습니다.

 

2. React-native 개발환경 설치

1) nodejs 10.0 이상 설치

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

2) expo 설치

만든 결과물을 스마트폰으로 확인하기 위해서는

Xcode(mac용)나 Android Studio(window, linux용)가 필요하지만

expo 오픈 소스 플랫폼을 설치하면 아주 간단하게 Application 테스트 해볼 수가 있습니다.

 

먼저

  1. App store 또는 playstore에서 Expo Go를 설치합니다.
  2. expo 계정을 만듭니다.
  3. expo를 명령어로 설치합니다
// cmd 창에서 
npm install --global expo-cli

 

3. Expo로 프로젝트 생성하기

// 프로젝트를 생성할 폴더로 이동해서
// cmd 창에서
expo init [프로젝트명]

이후 템플릿 선택은 자유롭게 해주시면 됩니다.

(경험자라면 Typescript를, 초보자라면 blank를 선택을 추천)

 

4. Expo로 프로젝트 실행

npm start

프로젝트를 실행하면 창이 하나 열리고,

위와 같이 아래에 QR 코드가 뜨는데 스마트폰 카메라로 QR 코드를 인식해서

Expo 앱으로 열면, 만든 앱을 바로 폰에서 테스트 해볼 수 있습니다.

 

또한 웹에서 보고 싶다면 Run in web browser를 클릭하면 되고,

안드로이드 스튜디오나 xCode와 같은 시뮬레이터에서 실행하고 싶으시다면

Run on Android device/emulator 또는 Run on iOS simulator를 클릭하면 됩니다.

 

마지막으로 반드시 같은 wifi에 연결되어있어야합니다.