devnauts

생성 커맨드

yarn create react-app my-app

성공 메세지

이후 사용법에 대한 가이드가 담겨져 있다.

Success! Created my-app at D:\test\my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!

<테스트 환경>
- OS : Windows 10
- yarn create v1.17.3
- create-react-app@4.0.1

react-native init시 아래와 같이 Unexpected token … 에러가 발생하는 경우

SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Module._extensions..js (module.js:416:10)
    at Object.require.extensions.(anonymous function) [as .js] (C:\example01\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (C:/example01/node_modules/react-native/local-cli/server/runServer.js:18:18)
    at Module._compile (module.js:409:26)

node.js를 최신 버전으로 재설치하여 해결이 되었다.

기존 버전: 4.4.7
업그레이드후 최신 버전: 6.11.2

React Native는 react 문법을 사용하여 WebApp이 아닌 모바일 Native 앱을 작성할 수 있게 하는 기능을 제공한다.(안드로이드, 아이폰 지원)

• [참고] 데스크탑용으로는 Native 어플리케이션 작성을 지원하는 react-native-macos(OSX용), react-native-windows(윈도우용)가 있고, WebApp 형태로 작성할 경우 OS별 테마가 적용된 react component인 react-desktop이 있다.

사전 설치 요구사항

• Node.js

  
  

• 안드로이드 스튜디오

  
  

안드로이드 스튜디오 세팅

1. SDK Manager를 실행한다.

   
   

2. Android 6.0 SDK(Marshmallow, API Level = 23)를 설치한다. (주의: 현재 Android 7.0 SDK는 지원하지 않는다)

   
   

3. AVD Manager를 실행한다.

   
   

4. 6.0 SDK를 사용하여 AVD를 생성한다.

   
   

React Native 설치

1. 커맨드라인 상에서 아래와 같이 입력하여 React Native를 설치한다.

   npm install -g react-native-cli
   

   
   

샘플 프로젝트 생성 및 실행

1. 커맨드라인 상에서 아래와 같이 입력하면 샘플 프로젝트가 생성된다.

   react-native init 생성할-프로젝트명
   

   => [참고] react-native init시 Unexpected token … 에러가 발생하는 경우

   
   

2. AVD(안드로이드 에뮬레이터)가 실행되어 있는 상태에서 아래와 같이 입력하면 프로젝트가 빌드되어 에뮬레이터 상에 실행되는 것을 볼 수 있다.

   react-native run-android
   

   
   

3. [참고] IOS용 실행 커맨드는 참고로 다음과 같다.

   react-native run-ios
   

   
   

참고 사이트

• https://www.tutorialspoint.com/react_native/ - 튜토리얼

  
  

<테스트 환경>
- OS : Windows 7
- 안드로이드 스튜디오 버전 : 2.3.3
- node.js 버전 : 6.11.2
- react-native-cli 버전 : 2.0.1