[React Native] 날씨 앱 만들기 #1

 

 

React Native로 어떻게 앱을 만드는지 알아보기 위해 아주 간단한 날씨 앱을 만들어 봅시다. 다음 날씨 앱은 노마드 코더 유튜브를 보고 정리한 것이니 React Native에 대해 더 자세하게 알고싶은 분이라면 들어보시는 걸 추천드립니다. 오늘은 사용자의 위치정보를 가져오는 것을 구현해보겠습니다.

(참고: https://www.youtube.com/watch?v=cRhHBpYK8I4&list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi)

 

프로젝트 생성

우선 가장 먼저 프로젝트를 생성해주어야겠죠? weather이라는 프로젝트를 생성해줍시다.

> expo init my-weather-test

blank로 생성

 

사용할 라이브러리 install

우리는 사용자의 위치정보를 가져오기 위해 location이라는 API를 활용할 것입니다. expo는 매우 많은 라이브러리를 가지고 있지만 처음부터 다 사용가능한 것은 아닙니다. 따라서 기본적인 라이브러리 외에 것을 이용할 때는 다운로드해주는 과정이 필요하죠. expo를 이용하여 expo-location 라이브러리를 다운받아 줍니다.

> expo install expo-location

 

 

위치 정보 가져오기

사용자가 있는 곳에 날씨정보를 알기 위해서는 우선 위치정보가 필요합니다. 우리는 사용자에게 1) 허가를 요청한 후, 2) 위치정보를 얻을 수 있습니다. 코드는 다음과 같습니다. 

import React from 'react';
import {Alert} from 'react-native'
import Loading from "./Loading"
import * as Location from 'expo-location';

export default class extends React.Component {
  getLocation = async () => {
    try {
      /* 1.허가 요청 */
      const response = await Location.requestPermissionsAsync();
      console.log(response);
      /* 2.사용자 위치청보 가져오기 */
      const location = await Location.getCurrentPositionAsync();
      console.log(location);
    } catch (e) {
    	console.log(e);
        Alert.alert("ERROR");
    }
  };
  componentDidMount(){ //컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드
    this.getLocation();
  }
  render() {
    return <Loading />;
  }
}

 

위 코드를 실행 시키면 아래와 같이 위치접근을 허용하겠냐는 알림창이 뜹니다. 저는 앱을 사용하는 동안 허용을 체크해주었습니다. 그러고 expo dev tool 으로 가면 아래와 같이 반환 된 자신의 위치정보를 객체로 확인할 수 있습니다.

 



 

Object {
  "coords": Object {
    "accuracy": 65,
    "altitude": 21.004837036132812,
    "altitudeAccuracy": 10,
    "heading": -1,
    "latitude": 37.674411597635334,
    "longitude": 126.76379671479101,
    "speed": -1,
  },
  "timestamp": 1582017532825.4,
}

 

 

Reference

- https://www.youtube.com/watch?v=cRhHBpYK8I4&list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi

- https://velopert.com/1130