[React] 간단한 날씨 웹앱 만들어보기 - Loading.js 와 Location

로딩 화면을 만드는 것부터 시작한다.

아주 간단...!

 

이게 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 Weather ...</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-end",
    paddingHorizontal: 20,
    paddingVertical: 100,
    backgroundColor: "#B2CCFF",
  },
  text: {
    color: "#2C2C2C",
    fontSize: 20,
  },
});

 

그리고 이게 App.js

import React from "react";
import Loading from "./Loading";

export default function App() {
  return <Loading />;
}

이렇게 써주고 나면,

 

출처: 노마드 코더 https://www.youtube.com/watch?v=me6gH0s1Nvw&list=PL7jH19IHhOLPEhP6oPSgK6r-neUVVA-pi&index=9

 

이런 화면이 생성되고, 즉각적으로 폰에서도 볼 수 있다.

(Expo Go를 설치해서 보니까 내 폰에서 바로바로 업데이트하면서 볼 수 있더라. 진짜진짜 신기하다. 심지어 발열도 없음)

 

그 다음으로는 바로 Location에 대해 메소드들이 뭐가 있는지 들여다 보는 시간을 가졌다.

https://docs.expo.io/versions/v33.0.0/sdk/location 

Location안에 있는 기능들을 사용할 예정이라, 이 안에 있는 기능들을 자세히 봐두면 좋다.

Location.hasServicesEnabledAsync()	user가 enable할 수 있는 service들이 있는지 체크하는 용도
Location.requestPermissionsAsync()	user에게 location permission 요청 보내기
Location.getCurrentPositionAsync()	디바이스의 현재 위치 얻기
Location.geocodeAsync()	주소를 가지고, 위도 경도를 반환해주는 기능
Location.reverseGeocodeAsync()	위치를 받아서, 주소를 반환해주는 기능

말고도 geofencing(사용자가 어떤 지역에 들어갔을 때, 떠났을 때에 app이 반응을 보이는 기능) 이라던가, 많은 기능이 있는 것이 보인다.

 

설치하는 방법은 expo install expo-location 을 터미널에 입력하기. (완전 쉬움 그자체)

그 후 설치 되면,

import * as Location from "expo-location";

하고 임포트만 해주면 된다.

 

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 {
    //위치 요청
      await Location.requestPermissionsAsync(); //이때 위치 허용할건지 allow 하라는 alert 뜨게 된다.
      const location = await Location.getCurrentPositionAsync(); //현재 위치 가져오기. 
      console.log(location); //가져왔으면 해당 정보를 console에 띄워주기.
    } catch (error) {
      Alert.alert("Can't find you.", "So Sad");
    }
  };
  componentDidMount() {
    this.getLocation();
  }
  render() {
    return <Loading />;
  }
}

 

 

내 위치는 비밀이니까 가리고!

 

 

잘되는지 확인해보았는데, console에 정확한 내 위치가 떴다!

 

이 위치 정보를 가지고 날씨를 가져오는 건 다음에..............!

 

 -

노마드 코더님 영상은 진짜 진귀한 듯.

비전공자도 뭐든 이해할 수 있도록, 이해하면서 만들어 볼 수 있도록 해주시는 것 같다. 

(저는 비전공자는 아니지만 ..........
웹이든 앱이든 웹앱이든 프로젝트 자체가 첨이라 .... 비전공자 같은 전공자 ....｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡)