1회차 - 02 react native 날씨 앱 따라 만들기(1)

노마드코더 니콜라스의 React Native Weather를 따라해보도록 하자. 작업은 00에 만들어둔 구름 IDE에서 해보자.

• https://www.youtube.com/playlist?list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi

영상 따라하기는 #0 2부터 시작했다. (왜냐면 구름 ide에 #0 1에 설치과정은 이미 되있으므로)
결론적으로 이번 글에서는 #0 3까지 진행한게 되었다.

EXPO

• https://reactnative.dev/docs/environment-setup
  react native로 개발시 IOS, 안드로이드의 개발환경을 구축하고 보다 심화된 작업(reate native file 제어 등)을 하기위해서 [React Native CLI Quickstart] 로 설치할 때도 있단다. 에뮬레이터도 설치해야되고..

대부분 expo만 써도 충분하다고 한다. expo는 native file들을 크게 제어할 수 없다는 단점이 있지만 이는 native file들을 숨겨놓기 때문이고, expo 개발자 계정만 만든다면 휴대폰에서 시뮬도 돌릴 수 있고(마치 앱인벤터 같다!), react native 업데이트도 처리해주고, 문서도 잘 되있고, api 정보(예로 결제 api 등)는 react native보다 expo가 더 많다는 등의 장점이 더 많은 듯 하다. 따라서 개발속도는 expo는 빠르다고 한다. 정말 큰 회사나 시스템에 접근하는 경우가 아니면 native file에 접근할 필요는 없단다.

또한 expo로 개발하면 좋은 점은 Windows에서도 iOS앱을 만들 수 있다고 한다.(해봐야겠지만!)

EXPO 가입

• https://expo.io/

따라하기 #0 3

expo 프로젝트 생성

이미 00 에서 컨테이너 만들 때 구성되어있다. 따라서 expo 명령어를 통해 프로젝트를 만드는 과정은 넘겨도 된다.

이 과정에서 git과 연동하려면 연동해도된다(컨테이너 생성 때 메뉴가 있었다. 아니면 터미널로 입력하자.) 이 과정은 git 내용이니 여기선 생략

app.json

expo가 읽게될 파일이다.(configuration 파일!) 따라서 버전 등의 내용이 들어있다.
name은 앱의 이름이 될 것이고, slug는 프로젝트 폴더명인 것 같다.

{
  "expo": {
    "name": "ReactNativeStudy01",
    "slug": "ReactNativeStudy01",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "packagerOpts": {
      "port": 54975
    }
  }
}

App.js

• 기본적인 리엑트 컴포넌트이나 조금 다르다
• 주로 여기서 구현한다.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

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

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

그외 기타 파일

나머지는 잘 안 건드리고, asset폴더에 icon(앱 아이콘 그림)과 splash(앱 켰을때 로딩 화면)파일이 임시로 들어있다.

프로젝트 실행

(2020.07.21)
yarn 설치 안하고 expo start나 npm start를 해도 된다.

(2020.07.21 이전)
터미널에 yarn start라고 입력한다. 그러면 자동으로 export DEV tools를 오픈해준다. 하지만 구름 IDE에는 yarn이 없는 상황.
[프로젝트] - [실행] - [new run react native] 로도 가능하지만, 학습을 위해 yarn 이 필요하니 설치해보자.

• npm install -g yarn

위의 방법말고 sudo apt update && sudo apt install yarn이나 apt update && apt install yarn를 해봤지만 설치는 되도, yarn start란 명령어는 실행되지 않았다.

어찌하여 yarn start를 터미널에 입력하든 [프로젝트] - [실행] - [new run react native] 를 하던 QR코드가 뜨고, 이를 휴대폰의 expo 앱을 열어 스캔하자.

음.. 그런데 구름 ide에서 yarn start를 했을 때 접속이 안된다.(이때의 url이 http://localhost:19002/ 와 exp://127.0.0.1:59140). 후자의 방법으로 진행해보자. 그랬더니 좀 더 시간이 오래 걸렸고, http://localhost:19002/는 똑같았는데 스캔은 제대로 되고, 연동도 잘 되었다.(어떤 차이가 있는거지?)

ios의 expo

ios는 qr코드가 없다(두둥!) 그래서 다음 과정을 거쳐야 한다.

• expo앱에서 로그인
• 작업 랩탑에서 expo login 을 실행 후 로그인

웹 사이트 링크로 클릭

처음 컨테이너 대시본를 클릭하기전 설정버튼을 누르고 컨테이너를 실행하면, 해당 컨테이너에 외부 IP등을 알 수 있고 포트포워딩도 설정할 수 있다. 때문에 19002를 포트포워딩하면 될 것이다!.

그런데 Free버전은 포트포워딩이 2개밖에 안된다고 한다.
이미 expo가 실행되면 포트포워딩이 3개가 생성되는데, 66,19000,19001이 되버린다. 웹으로 확인할 수 있는 링크의 포트가 19002인걸 생각하면 19000,19001은 expo관련해서 생성된 것 같다.(expo서버와 연동과 qr스캔을 위한 연동?) 그래서 66을 지워도. 이미 2개이기 때문에 19002추가를 무료버전에선 못할 것 같다.

react native는 예외로 3개로 풀어준건가? 기왕이면 19002도 풀어주면 좋았을 것을... 아니면 시뮬레이터 가동이 많은 부담이 되기 때문인 것 같기도 하다.

동기화가 오래걸리나?

조금씩 퍼센트가 올라가곤 있다. 일단 기다려보기로 했다. 그리고 터미널 창이 다 100% 될 때쯤. 폰 화면에선 이렇게 변했다.

App.js

<Text>Open up App.js to start working on your app!</Text> 부분을 <Text>Hello</Text>라고 바꿔봤다.
작성후 Ctrl+S를 누르니 실시간으로 바뀌는 걸 확인할 수 있었다.