Expo.io를 사용하여 스마트 폰 앱 개발 환경을 구성하십시오 (React Native)

React Native를 사용한 스마트폰 앱의 개발 환경을 그림 x포. 이오

수중의 iPhone이 없었기 때문에, 본 기사의 실기 검증은 Android(Pixel4)를 이용하고 있습니다만, 시뮬레이터/에뮬레이터를 도입하면 iOS도 Android도 개발 머신상에서 검증할 수 있습니다.

Expo.io 계정 만들기

계정을 만들어 둡시다.
그림 x포. 이오

위 사이트에서 계정을 만듭니다.

여기에 등록한 유저의 자격증명은 실기 검증 시에도 사용하므로, 만약 비밀번호를 브라우저의 자동 생성으로 작성한 경우는 실기와 공유하는지, 기억해 주세요.

작성한 후 실제 기기 측에 Expo 앱을 설치합니다.

Android용 Expo 앱
iOS용 Expo 앱

설치가 완료되면 앱 측에서도 동일한 자격 증명으로 로그인하십시오.

개발 머신측의 환경을 정돈한다

Expo는 npm으로 설치하므로 최신 버전인지 확인하십시오.

$ npm -v
$ node -v

최신 버전이라면 expo-cli를 전역으로 설치합니다.
$ npm i -g expo-cli
조금 시간이 걸립니다.

설치가 끝나면 적절한 디렉토리에서 init합니다.

$ expo init MyProject
? Choose a template: (Use arrow keys)
  ----- 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 (TypeScript)를 선택합니다.

Enter로 진행하면 필요한 패키지가 설치되므로 기다리자.

완료되면

To get started, you can type:

  cd MyProject
  npm start

라고 표시됩니다. 지시대로 cd하고 start합시다.

$ cd MyProject
$ npm start

즉시 브라우저에서 새 페이지가 열립니다.

일단 터미널 측에서도 QR이 표시됩니다만, 브라우저에 표시되고 있는 것과 같습니다.

브라우저 측의 QR 위에 있는 메뉴에서 iOS/Android 시뮬레이터/에뮬레이터가 시작됩니다. 포함되어 있지 않으면 개발 머신에 추가해 오류를 토합니다.





여기까지 오면 실제 기기 측의 앱에서 Scan QR Code를 선택하여 스캔합니다.



App.tsx를 열고 개발을 시작하세요! 라고 표시되므로 개발 머신에서 App.tsx(템플릿에서 TypeScript 선택하지 않으면 App.js)를 열고 코드를 편집해 봅니다.

App.tsx

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello!! MyProject!</Text> 
      <Text>Open up App.tsx to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

편집하고 저장하면 실제 기기 측도 실시간으로 업데이트됩니다. 핫 리로드 기능이 처음부터 붙어 있습니다.



이제 React Native를 사용하여 앱을 개발하는 환경이 완성되었습니다.