Step 1) 화씨 온도를 섭씨로 바꾸기

• API->Current Wather->API doc->좌측의 Other features->Units format을 클릭한다.

• &units=metric 을 추가한다. 그 후 시뮬레이터를 실행시키고 콘솔 로그를 확인해보면 아래와 같이 temp가 섭씨 온도(14도)로 바뀐것을 확인할 수 있다.

Step 2) Temperature Component 생성

• Weather.js 파일을 새로 만든다.
• props가 필요하므로 prop-types를 install 하기 위해 vscode terminal에

$ npm install prop-types

를 입력한다.

• Weather.js 파일에 아래와 같이 코드를 작성한다.

• App.js파일에 작성한 Weather.js 를 아래의 방법으로 import 한다.

import Weather from "./Weather";

• temperature 정보를 가져오기 위해

우리는 data.main.temp 가 필요하다.

• 위와 같이 App.js 코드를 수정한다.
• 수정 후 시뮬레이터를 실행하면

이렇게 온도 (temperature) 가 스크린에 출력된다.

• 그런데 이 과정에서 간단한 문제로 오류가 나서 애를 먹었다.

[오류 해결]

• Invariant Violation : Element type is invalid : expected a string (for built- in components) or a ~ (이하 생략) 이라는 오류가 발생했다.
• 문제는 자동으로 Weather가 import 되지 않고 수동으로 import ~ 라고 타이핑해서 링크가 되지 않아 발생한 것이었다.
• App.js 파일의 맨 아래 부분에 render() 안에서 ‘null’을 <Weather /> 로 바꿀 때, 하나씩 수동으로 타이핑하면 코드를 인식하지 못하는 것 같다. <Weather></Weather> 로 자동 생성 되도록 하면 자동으로 App.js 파일의 상단에 Weather가 import 됨을 확인할 수 있다. 그럼 오류가 해결된다.

Step 3) condition name (날씨 종류) 정보 가져오기

• API->Current weather data->Parameters of API resonse->List of condition codes 를 클릭한다. (링크 : https://openweathermap.org/current#list)

• weather condition codes 를 클릭한다. (링크 : https://openweathermap.org/weather-conditions)
• Thunderstrom, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds 와 같은 날씨의 유형을 코드에 적용한다.

• 그러나 이 방법은 condition name을 얻는 최선의 방법이 아니다.
• 콘솔 로그를 보면 딱 하나의 Array 가 있는걸 확인할 수 있는데

객체 하나를 가진 Array가 하나 있다. 이 배열안의 객체 안의 main이 우리가 얻고자 하는 condition name 이다.

• 그럼 weather 배열로부터 main 부분을 가져와보자.

• 코드를 조금 더 보기 쉽게 살짝 수정하였다.
• line 28을 보면 weather 배열의 첫번째 요소(객체 Object)로부터 main 값을 가져왔음을 볼 수 있다.

Step 4) import vector-icon

• Icon을 다루기 위해 Weather.js 에 아래와 같이 코드를 작성한다.
• 참고 : https://docs.expo.io/versions/v33.0.0/guides/icons/#_next

import { Ionicons } from '@expo/vector-icons';

• 아이콘 디렉토리를 살펴보자 (https://expo.github.io/vector-icons/)
• condition name에 각각 맞는 아이콘을 찾는다.
• MaterialCommunityIcons Family 중에 골라보자.
• 위에서 작성한 코드에서 중괄호에 있는 Ionicons를 MaterialCommunityIcons 로 바꾼다.

import { MaterialCommunityIcons } from '@expo/vector-icons';

• 이제 아이콘을 가져와보자.

예시

• 비오는 날씨를 예로 들면, 우리는 위의 화면에서 제일 하단에 위치한 ‘MaterialCommunityIcons Family’ 의 ‘weather-lightning-rainy’ 를 가져올것이다.

출처 : 노마드코더 - React Native로 날씨앱 만들기

Step 1) expo application 실행

$ npm start

• vscode 터미널에 위와 같이 입력하면 자동으로 ‘export DEV tools’ 창이 크롬에 열린다.

• 안드로이드 폰 유저는 폰의 expo앱을 열어 QR code 를 스캔하면 폰에서 앱을 테스트할 수 있다.
• ios 유저는 폰의 expo앱에 로그인하고 vs code terminal에 아래와 같이 입력한다.

$ expo login

• 폰으로 실행시키면 위의 화면을 볼 수 있다.
• 이때 폰, 맥은 같은 wi-fi에 연결되어 있어야한다.

ERROR: Node.js version 6.10.1 is no longer supported.

expo-cli supports following Node.js versions:
* >=8.9.0 <9.0.0 (Maintenance LTS)
* >=10.13.0 <11.0.0 (Active LTS)
* >=12.0.0 (Current Release)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ start: `expo start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kimnan-young/.npm/_logs/2019-10-28T08_37_43_452Z-debug.log

• 만약 위와 같은 오류가 뜬다면

$ nvm install node

• 위와 같은 명령 실행 후 다시 $npm start를 하면 문제가 해결됨을 확인할 수 있다.

Step 2) Loading 화면 작성하기

• 새파일 버튼을 눌러 Loading.js 컴포넌트를 추가한다.
• 아래와 같이 코드를 작성한다. (Loading.js)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function Loading(){
 return (
  <View style={styles.container}>
    <Text style={styles.text}>Getting the weather</Text>
  </View>
 );
}
const styles = StyleSheet.create({
 container: {
   flex: 1, 
   justifyContent: "flex-end",
   paddingHorizontal: 30,
   paddingVertical: 100,
   backgroundColor: "#FDF6AA"
},
text :{
 color: "#2c2d2c",
 fontSize: 30
 }
});

• App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Loading from "./Loading";
export default function App() {
  return <Loading />;
}

<결과 화면>

이번 포스팅은

[React Native로 날씨앱 만들기 (by 노마드코더) ]

이란 강좌를 수강하기에 앞서 처음에 expo를 인스톨하는것부터 에러가 나는 바람에 이를 해결하는 방법을 포스팅해보았다.

Step 1) Nodejs 설치하기

nodejs.org/ko/download/

사양에 맞게 다운로드를 한다.

• node를 설치하면 npm은 default 로 설치된다.

Step 2) version 확인하기

$ node -v
$ npm -v

• node는 12.13.0으로, npm은 6.12.0으로 설치되었음을 확인할 수 있다.

Step 3) expo cli 설치하기(에러 발생 단계)

$ npm install -g expo-cli

• 위와 같은 에러가 떴다.
• 액세스 하는것에 문제가 생긴 것 같아 구글링을 해보니 node를 root 권한으로 설치하고 실행했기 때문에 문제가 발생했음을 확인할 수 있었다. (참고 : https://stackoverflow.com/questions/16151018/npm-throws-error-without-sudo)

(Step 1 에서 다운을 받을 때 관리자암호를 입력하라는 창이 떴는데 그게 root 권한 permission을 요구한건가 싶다.)

Step 4) 기존에 설치된 node 삭제하기

$ sudo npm uninstall npm -g

• 기존에 설치된 node는 root 권한으로 설치된 것이므로 uninstall 해준다.

Step 5) NVM(Node Version Manager) 설치하기

• 참고 :https://gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1

nvm은 root 권한 없이 node를 설치할 수 있게 해준다고 한다.

1. 설치하기

$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash

2. 확인하기

$ nvm ls

nvm ls를 터미널에 입력하면

-bash: nvm: command not found

위의 문장이 출력된다.

3. vi 에디터 열기

$ vi ~/.bash_profile

• 빈 에디터에 아래의 문장을 복사해서 붙여넣은 후 :wq 로 저장하고 에디터를 나온다.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

4. 재시작하기

$ source ~/.bash_profile

5. 다시 확인하기

$ nvm ls-
> system
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

Step 6) node 재설치하기

1. 최신 버전 설치

$ nvm install 6.10.1

(2019년 10월 23일 기준으로 6.12.0이 최신버전이지만 참고한 링크에서 버전 6.10.1을 설치해서 필자도 6.10.1 버전을 설치해보았다.)

2. 확인하기

$ nvm ls
-> v6.10.1
system
default -> 6.10.1 (-> v6.10.1)
node -> stable (-> v6.10.1) (default)
stable -> 6.10 (-> v6.10.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.16.3 (-> N/A)
lts/erbium -> v12.13.0 (-> N/A)

$ node -v
v6.10.1

Step 6) expo 설치

$ npm install -g expo-cli

• Step 3 단계와는 달리 접근 오류가 뜨지 않고 성공적으로 설치되었다.