개발 블로그

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

<Getting the Weather>

Step 1) API KEY 가져오기

• https://openweathermap.org 에 접속한다.
• 상단의 sign in 을 클릭한다. (회원 가입을 하도록 한다.)

• API keys를 클릭한다.
• API keys 가 없으면 새로 생성한다.
• API key를 복사해서 App.js 파일에 붙여넣자. (line 7)

Step 2) API 호출하여 정보 얻기

• https://openweathermap.org/api에 접속하여 ‘Current Weather Data -> API doc’ 를 클릭한다.

• 우리가 사용할 것은 ‘By geographic coordinates’방식이며 위의 방법으로 api 를 호출해주면 된다.
• 먼저 API call을 참고하여 브라우저에서 시도해보면 결과는 아래와 같다.

• API Key를 포함해서 다시 시도해보자.
• API Key를 포함하여 테스트하는 방법은 API 탭을 클릭한 후 하단으로 스크린을 내리고 ‘How to start -> Example of using API key in API call’에 나와있다.

• &APPID = {APIKEY}를 브라우저 주소창에 추가하여 결과를 보면 아래와 같다.
• 날씨에 관한 전반적인 정보를 얻을 수 있다.

Step 3) App 내부에 URL fetch하기

• fetch를 위해 Axios를 설치한다.
• vscode terminal 에 아래의 명령을 실행한다.

$npm install axios

• 그 후 코드를 아래와 같이 수정한다.(line 6, 13–17, 27)

• 이때 주의할 점은, 변수를 문자열에 포함시키기 위해 URL을 백틱(`)으로 감싸야한다는 것이다(line 15). 참고로 백틱은 맥에서 option키를 누르고 숫자 1 옆에 있는 ₩ 를 누르면 된다.

출처 : 노마드코더 - 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 />;
}

<결과 화면>