[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

1. 기능 명세서

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.

//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태

//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)

//4. 로딩 스피너 기능 추가

 

2. weather api

https://openweathermap.org/api

Weather API - OpenWeatherMap

링크에서 회원가입하고 제공받은 key를 이용하고

무료 api를 사용해서 위치, 도시 기반 날씨 정보를 가져와보도록 한다.

 

9007b03099d0209ad491e058a2d63c26

 

3. Using HTML Geolocation

https://www.w3schools.com/html/html5_geolocation.asp

HTML Geolocation API

해당 문서를 참고하여 현재 위치를 보여주는 코드를 App.js에 작성한다.

import './App.css';
import { useEffect, useState } from 'react';

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.
//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태
//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)
//4. 로딩 스피너 기능 추가

function App() {
	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				alert('현재 위치는 ' + latitude + ' ' + longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	useEffect(() => {
		getCurrentLocation()
	}, []);
	return (
		<div>
			너의 날씨는
		</div>
	);
}

export default App;

 

4. api를 호출해서 데이터 가져와 세팅하기

 

import './App.css';
import { useEffect, useState } from 'react';

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.
//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태
//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)
//4. 로딩 스피너 기능 추가

const choice = {
	Seoul: { name: 'Seoul' },
	NewYork: { name: 'NewYork' },
	Toronto: { name: 'Toronto' },
	Paris: { name: 'Paris' },
	Rondon: { name: 'Rondon' }
}

function App() {
	const [userLocation, setUserLocation] = useState(null);
	const clickCity = (userChoice) => {
		setUserLocation(choice[userChoice]);
	}
	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				getWeatherByCurrentLocation(latitude, longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	//await 쓰고자 하는 함수는 async 여야 한다! 
	const getWeatherByCurrentLocation = async (lat, lon) => {
		let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=9007b03099d0209ad491e058a2d63c26`;
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
	}

	useEffect(() => {
		getCurrentLocation()
	}, []);
	
	return (
		<div>
			<div>
				<button onClick={() => clickCity('Seoul')}>Seoul</button>
			</div>

			<div>
			</div>
		</div>
	);
}

export default App;

 

 

5. 기본 UI 작업

 

https://react-bootstrap.github.io/

React-Bootstrap

서버 종료 후 설치 

npm install react-bootstrap bootstrap

기본적인 부트스트랩 까지 처리해주고 렌더링된 클라 화면

지금까지의 소스 스펙

 

App.js

import './App.css';
import { useEffect, useState } from 'react';
import WeatherBox from "./component/WaetherBox";
import WeatherButton from "./component/WeatherButton";
import 'bootstrap/dist/css/bootstrap.min.css';

//1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다.
//2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태
//3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시)
//4. 로딩 스피너 기능 추가

const choice = {
	Seoul: { name: 'Seoul' },
	NewYork: { name: 'NewYork' },
	Toronto: { name: 'Toronto' },
	Paris: { name: 'Paris' },
	Rondon: { name: 'Rondon' }
}

function App() {
	const [userLocation, setUserLocation] = useState(null);
	const clickCity = (userChoice) => {
		setUserLocation(choice[userChoice]);
	}
	const getCurrentLocation = () => {
		if (navigator.geolocation) {
			navigator.geolocation.getCurrentPosition((position) => {
				const latitude = position.coords.latitude;
				const longitude = position.coords.longitude;
				getWeatherByCurrentLocation(latitude, longitude);
			});
		} else {
			alert("Geolocation is not supported by this browser.");
		}
	}

	//await 쓰고자 하는 함수는 async 여야 한다! 
	const getWeatherByCurrentLocation = async (lat, lon) => {
		let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=9007b03099d0209ad491e058a2d63c26`;
		let response = await fetch(url) //비동기(직독: url을 patch하는 것을 기다려달라!) : url 로딩한 뒤 응답값을 받기로 함
		let data = await response.json(); //응답에서 json 추출하는 것을 기다려달라
	}

	useEffect(() => {
		getCurrentLocation()
	}, []);

	return (
		<div>
			<div>
				<WeatherBox />
				<WeatherButton title="Seoul" />
				<WeatherButton title="NewYork" />
				<WeatherButton title="Toronto" />
				<WeatherButton title="Paris" />
				<WeatherButton title="Rondon" />
			</div>
			<div>
			</div>
		</div>
	);
}

export default App;

 

App.css

body{
	background : url(https://wallpaperaccess.com/full/5466320.jpg);
	height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
}

.weather-box{
	color : #aec6fe;
}

WeatherButton.js

import React from 'react'
import { Button } from 'react-bootstrap';

const WeatherButton = (props) => {
	return (
		<div>
			<Button variant="primary">{props.title}</Button>
		</div>
	)
}

export default WeatherButton

 

WeatherBox.js

import React from 'react'

const WaetherBox = () => {
	return (
		<div className='weather-box'>
			<div>Your Weather</div>
			<h2>30도 / 230 화씨</h2>
			<h2>맑은 하늘</h2>
		</div>
	)
}

export default WaetherBox

기타 반응형 웹으로 마크업 하는 과정은 해당 포스팅(클릭)에 담았다.