March 10, 2020
Date ๊ฐ์ฒด์ **๋ ์จ API **๋ฅผ ์ด์ฉํ ์ค๋์ ๋ ์ง, ์๊ณ, ๋ ์จ ์ฑ์ ๋ณผ ์ ์๋ ์ดํ๋ฆฌ์ผ์ด์ .
์๊ณ๋ ๋งค์ด๋ง๋ค ๋ฆฌ๋ก๋๋๋ฉฐ, ๋ ์จ๋ ์ด๊ธฐ๋ก๋ฉ ๋๋ง ๋ก๋๋๊ฒ ์ค์ ํด์ฃผ์๋ค.
์ฝ๋ ์คํ๋ฆฌํ
์์์๋ถํฐ ๋ ์ง, ์๊ฐ, ๋ ์จ ์..
const weekArr = ['์ผ', '์', 'ํ', '์', '๋ชฉ', '๊ธ', 'ํ ']
const [year, setYear] = useState('')
const [month, setMonth] = useState('')
const [day, setDay] = useState('')
const [week, setWeek] = useState('')
const [hours, setHours] = useState('')
const [minutes, setMinutes] = useState('')
const [seconds, setSeconds] = useState('')
๋ , ์, ์ผ, ์์ผ, ์๊ฐ, ๋ถ, ์ด๋ฅผ ๊ฐ๊ฐ hooks ๋ก ๋ง๋ค์ด์ฃผ์๋ค.
๊ทธ๋ฆฌ๊ณ ์์ผ์ ํ๊ธ๋ก ์ถ๋ ฅํด์ค ๋ฐฐ์ด์ ๋ฐ๋ก ๋ง๋ค์ด์ฃผ์๋ค.
useEffect(() => {
clock()
setInterval(clock, 1000)
})
const clock = () => {
const date = new Date()
// setTodayDate(date)
setYear(date.getFullYear())
setMonth(date.getMonth())
setDay(date.getDate())
setWeek(date.getDay())
setHours(date.getHours())
setMinutes(date.getMinutes())
setSeconds(date.getSeconds())
}
๋ง์ดํธ๊ฐ ๋๋๊ณ useEffect
ํจ์๋ฅผ ์คํํ ๋, clock ํจ์๋ฅผ ํ๋ฒ ์คํํ๊ฒ ํ๊ณ
๊ทธ๋ค์๋ถํฐ๋ setInterval
ํจ์๋ก clockํจ์๋ฅผ ์ฃผ๊ธฐ์ ์ผ๋ก ์คํ๋๋๋ก ํด์ฃผ์๋ค.
<>
<div style={{ marginTop: '5px', fontSize: '18px', fontFamily: 'escore7' }}>
{year}๋
{month + 1}์ {day}์ผ {weekArr[week]}์์ผ
</div>
<div style={{ marginTop: '10px', fontSize: '60px', color: 'orange' }}>
{hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}:
{seconds < 10 ? `0${seconds}` : seconds}
</div>
</>
1.
ํ๊ทธ๋ค์ด ๋ณต์กํ ๊ตฌ์กฐ๊ฐ ์๋์ฌ์, styled Component ๋ง๊ณ style ์์ฑ
์ ์ฌ์ฉํ๋ค.
2.
์๊ฐ, ๋ถ, ์ด๊ฐ ํ์๋ฆฌ์ผ ๊ฒฝ์ฐ ์์ 0
์ ๋ถ์ฌ ์ด์ํ์ง ์๊ฒ ํด์ฃผ์๋ค.
์ผํญ ์ฐ์ฐ์์ ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํด๋ณด์๋ค.
const [temp, setTemp] = useState('')
const [humidity, setHumidity] = useState('')
const [weather, setWeather] = useState('')
const [weatherIcon, setWeatherIcon] = useState('')
const [country, setCountry] = useState('')
const [city, setCity] = useState('')
const [cloud, setCloud] = useState('')
๋ ์จ์ ์ํ (state) ๋ ๋ง์ฐฌ๊ฐ์ง๋ก hooks๋ฅผ ์ด์ฉํ๋ค.
๊ฐ๊ฐ, ๊ธฐ์จ, ์ต๋, ๋ ์จ, ๋ ์จ์์ด์ฝ, ๋๋ผ, ๋์, ๊ตฌ๋ฆ์ ์ ์ด๋ค.
useEffect(() => {
weather_clock()
})
const weather_clock = () => {
const url =
'https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=5a852cca928001166e0c28dca72c5987'
fetch(url)
.then(res => {
return res.json()
})
.then(json => {
setTemp(Math.round(json.main.temp - 273.15))
setHumidity(json.main.humidity)
setWeather(json.weather[0].main)
setWeatherIcon(json.weather[0].icon)
setCountry(json.sys.country)
setCity(json.name)
setCloud(json.clouds.all + '%')
})
}
๋ ์จ๋ ๋ง์ฐฌ๊ฐ์ง๋ก useEffect
๋ฅผ ์ด์ฉํด์ ํจ์๋ฅผ ์คํ์์ผ ๋์ํ๋๋ก ํ์๋ค.
api๋ก๋ openweathermap API
๋ฅผ ์ฌ์ฉํ๋ค.
AJAX ๋ fetch
๋ฉ์๋๋ฅผ ์ฌ์ฉํ์๋ค.
<>
<div
style={{
marginTop: '4px',
fontFamily: 'escore8',
fontSize: '16px',
textShadow: '2px 2px #ccc',
}}
>
{weather}
</div>
<img src={`http://openweathermap.org/img/w/${weatherIcon}.png`} />
<div
style={{
fontSize: '10px',
fontFamily: 'escore9',
}}
>
{country}, {city},
</div>
<div style={{ marginTop: '20px', fontSize: '14px' }}>ํ์ฌ์จ๋ : {temp}โ</div>
<div style={{ marginTop: '10px', fontSize: '14px' }}>
ํ์ฌ์ต๋ : {humidity}%
</div>
<div style={{ marginTop: '10px', fontSize: '14px' }}>
๊ตฌ ๋ฆ : {cloud}
</div>
</>
๋ง์ฐฌ๊ฐ์ง๋ก styled component๊ฐ ์๋ style ์์ฑ์ ์ด์ฉํ๋ค.
๊ทธ๋ฆฌ๊ณ ๋ ์จ ์ด๋ฏธ์ง ์์ด์ฝ๋ openweathermap API ์์ ์ ๊ณต์ ํด์ค์ ๊ฐ์ด ์ฌ์ฉํ์๋ค.
// today > layout.js
import React from 'react'
import styled from 'styled-components'
import Weather from './Weather'
import Clock from './Clock'
import ContentsMenubar from '../ContentsMenubar'
const BackgroundContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #f5f6f7;
`
const TodayContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 3px;
box-shadow: -4px -2px 4px 0px white, 4px 2px 6px 0px #dfe4ea;
padding: 0px 40px 60px 40px;
`
const Layout = () => {
return (
<>
<BackgroundContainer>
<TodayContainer>
<ContentsMenubar name="today" />
<Clock />
<Weather />
</TodayContainer>
</BackgroundContainer>
</>
)
}
export default Layout
์ฒ์์๋ Date ๊ฐ์ฒด๋ก ์ํ๋ฅผ ๊ณ์ ์ ๋ฐ์ดํธํด์ฃผ๋ ์ฝ๋์ ๋ ์จ api๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญ, ์๋ตํ๋ ์ฝ๋๋ฅผ ํ ๊ณณ์ ๋์์๋ค.
๊ทผ๋ฐ, ์ธ๋ฐ์์ด ์๊ฐ์ ์นด์ดํธํ๋ฉด์ ๊ณ์ ๋ ์จ api ์์ฒญ๋ ๊ณ์ ๋ณด๋ด์ ๋์ค์๋ api ์๋ฒ์์ ์๋ฌ(429 Too many Request
)๋ฅผ ๋ฑ์ด๋๋ค.
๋ด๊ฐ ์ฌ์ฉํ api๋ ๋ฌด๋ฃ์๊ณ , ์ด๋น ๋ฐ์ดํฐ๋ฅผ ๋๋ง์ด ์์ฒญํ๋ ค๋ฉด ์ ๋ฃ๋ก ์ ํํด์ผํจ.
๊ทธ๋์ ์ด๋น ์ ๋ฐ์ดํธ๊ฐ ํ์ํ Clock ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ๋ค,
๊ทธ๋ฆฌ๊ณ ์ด๊ธฐ ๋ก๋ฉ ๋๋ง ์์ฒญํด๋ ๊ด์ฐฎ์ Weather ์ปดํฌ๋ํธ์ ๊ธฐ๋ฅ๋ค์ ๋ฐ๋ก ๋นผ์ฃผ์๋ค.
api๋ฅผ ์ฌ์ฉํ ๋, ์์ฒญ์ ์์ด ์ปค์ง์ ๋ฐ๋ผ ๋น์ฉ๋ ์ปค์ง๋ค๋ ๊ฒ์ ์๊ฒ ๋์๋ค.
๊ณต๊ณต๋ฐ์ดํฐํฌํธ์ open API ์ง์นจ์ ์ค..
์๋๋ ๊ธฐ์์ฒญ API ๋ฅผ ์ฌ์ฉํ๋ ค ํ์ผ๋ ๋ธ๋ผ์ฐ์ ๋ด javascript ์ฝ๋๋ก api์ ์ ๊ทผํ ๊ฒฝ์ฐ CORS ์ด์๊ฐ ์๋ค๋ ์ด์ผ๊ธฐ๋ฅผ ๋ฃ๊ณ ๋ค๋ฅธ api๋ฅผ ์ฌ์ฉํ๋ค.
์ด์ ์ ์๋ง๋ฒ ํ๋ก์ ํธ - 4 (crawling)ํฌ๋กค๋ง ์ฑ์์๋ ๋ฐ์ํ์๋๋ฐ CORS๋ฌธ์ ๋ฅผ ์ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ์๋ฒ๋ฅผ ํ๋ ๋๊ณ ์๋ฒ์ ํ๋ก ํธ์ AJAX
, ๊ทธ๋ฆฌ๊ณ ์๋ฒ์ api ํต์
์ด๋ฐ์์ผ๋ก ํ๋ ๊ฒ์ด ์ข์ ๊ฒ ๊ฐ๋ค๊ณ ์๊ฐํ๋ค.
์ฌ์ค nodeJS ์์ ๋ฐ๋ก api ํต์ ์ ํด๋ณด์ง๋ ์์์ง๋ง ๋์ค์ ๊ผญ ๋์ผํ api ํต์ ์ ๊ฐ์ง๊ณ
์น ๋ธ๋ผ์ฐ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ์ apiํต์
, ์๋ฒ์nodeJS์ ์๋ฐ์คํฌ๋ฆฝํธ์ apiํต์
๋๋ค ํ๋ฉด์ ๋น๊ตํด๋ด์ผ๊ฒ ๋ค.
์๋ง๋ฒ ํ๋ก์ ํธ - 4 (crawling)์์๋ ๋ธ๋ผ์ฐ์ ์์ ๋ฐ์ํ๋ CORS ์ด์๊ฐ nodeJS ์์๋ ๋ฐ์ํ์ง ์์๋ค.