React Native Tutorial 따라하기 – Getting Started

expo를 이용해 기본 react native app을 만들자 roids upplements. 먼저 npm을 이용해 expo-cli 툴을 설치하도록 한다.

$ npm install -g expo-cli

expo-cli 를 설치하면 expo 명령을 사용할 수 있다. expo 명령으로 새로운 프로젝트를 생성해보자.

$ expo init AwesomeProject

위 명령으로 프로젝트를 생성할 때 다음과 같은 configuration을 선택할 수 있다.

$ expo init AwsomeProject
? Choose a template:
  ----- Managed workflow -----
❯ blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started
  minimal (TypeScript)  same as minimal but with TypeScript configuration

이 포스트에서는 blank 설정을 사용해 프로젝트를 생성했다.

? Choose a template: expo-template-blank
? Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ › 50% completed
 {
   "expo": {
     "name": "<The name of your app visible on the home screen>",
     "slug": "AwsomeProject"
   }
 }

App 이름을 설정할 수 있다. 원하는 이름으로 설정한다.

? Choose a template: expo-template-blank
✔ Please enter a few initial configuration values.
  Read more: https://docs.expo.io/versions/latest/workflow/configuration/ · 100% completed
? Yarn v1.17.3 found. Use Yarn to install dependencies? (Y/n)

위와 같이 프로젝트가 생성되었다면 다음 명령으로 프로젝트를 실행할 수 있다.

$ cd AwsomeProject
$ yarn start

위 명령을 실행하면 아래와 같은 결과를 확인할 수 있다.

$ yarn start
yarn run v1.17.3
$ expo start
Starting project at /Users/victor/010_dev/AwsomeProject
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19001.
Successfully ran `adb reverse`. Localhost URLs should work on the connected Android device.
Tunnel ready.

  exp://192.168.0.119:19000

[QR코드가 출력되는 위치]

  To run the app with live reloading, choose one of:
  • Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
  • Press a for Android emulator, or i for iOS simulator.
  • Press e to send a link to your phone with email.
  • Press s to sign in and enable more options.

Press ? to show a list of all available commands.
Logs for your project will appear below. Press Ctrl+C to exit.

보는바와 같이 ‘a’는 android emulator실행. ‘i’는 iOS 등으로 실행해볼 수 있다.

android 실행 결과는 다음과 같다.

This Post Has One Comment

Leave a Reply