์ค๋์ todolist ์์
1. ์์ด์ด ํ๋ ์ + ์ปดํฌ๋ํธ ๋๋๊ธฐ.
2.Data , Weather Component ๋ง๋ค๊ธฐ.
1. ์์ด์ด ํ๋ ์ + ์ปดํฌ๋ํธ ๋๋๊ธฐ.
์ ์ฒด ํ์ด์ง๋ App์ ๋์ฐ๊ณ , ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ค์ ๊ฐ์ ํ ์ผ์ ์๊ฒ ๋๋์ด ๋ง๋ค๊ธฐ๋ก ํ๋ค.
App์ ํ์๋ ์ปดํฌ๋ํธ ์ธ์๋ Listํด๋์ ๋ฐ๋ก ๋ด์๋์๋ค.
์ด๋ป๊ฒ state์ props๋ฅผ ๋ด๋ ค์ฃผ์ด์ผ ํ ์ง ํท๊ฐ๋ฆด๊ฒ ๊ฐ์์ ๋ถ๋ชจ์์๊ฐ์ ํธ๋ฆฌ๊ตฌ์กฐ๋ ํํํด๋ดค๋ค.
๋งค์ผ ๋ฐ๋ณตํ ์ผ์ ์ ๋์ธ DayLoop์ ๋น์ผ ์ผ์ ํ์ ๋ฆฌ์ ๋ TodoList๋
AddList๋ฅผ ํตํด ์ฌ์ฉ์๊ฐ ์ผ์ ์ ์ถ๊ฐํ ๋ ํ ๊ธ๋ฒํผ์ ์ด์ฉํด ๋ง๋ ์ปดํฌ๋ํธProp์ผ๋ก ๋ด๋ ค ์ค ์์ .
remove๋ ์ด๋์ ํฌํจํด์ผํ ์ง ์๋ชจ๋ฅด๊ฒ ์ด์ ์งํํ๋ค๊ฐ ๋ผ์๋ฃ์๊ฑฐ ๊ฐ์๋ฐ ์๋ง addlist์ ๋ค์ด๊ฐ์ง์์๊น...
2. Data , Weather Component ๋ง๋ค๊ธฐ.
<Data />
ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด์ค๋ค, ๋ณ์์ ํ๊ตญ์ ํ๊ธฐ์ ์ผ์ ์ ๋ง๋ค์ด spanํ๊ทธ์ ๋ด์ ๋ฆฌํด(๊ฐ๋จ)
<Wheather />
API๋ ์ฒจ๋ถํ ๊ณณ์ Current Weather data๋ฅผ ์ฌ์ฉํ๋ค.
https://openweathermap.org/current
fetch๋ฅผ ์ด์ฉํด ๋ ์จ์ฑ์ URL๋ฐ์ดํฐ๋ฅผ ๋ฐ์์๋ค.
api.openweathermap.org/data/2.5/
weather?lat={์ํ๋๊ณณ์ ๊ฒฝ๋}&lon={์ํ๋๊ณณ์ ์๋}&appid={๋์ API key}
const request = 'http://api.openweathermap.org/data/2.5/weather?lat=37&lon=127&appid={API key}'
const temp = fetch(request)
.then((response) => response.json()) //์๋ต์ JSON ํํ๋ก ๋ณํ์์ผ์ ๋ค์ Promise๋ก ์ ๋ฌ
.then((result) => {
//์ ๋ฌ๋ฐ์ promise๊ฐ์ฒด์ ํค๋ฅผ ์ฐพ์๋ค์ด๊ฐ์ ์ํ๋ temp์กฐํ
const kelbinTemp = result.main.temp;
//์จ๋๊ฐ kelbin?์์ผ๋ก ๋์์ ์ญ์จ๋ก ๋ณ๊ฒฝํ๋ค ์์์ ๋ค์ ํ ์๋ฆฌ๋ง ๋จ๊ฒจ์ค.
setWeather((kelbinTemp-273.15).toFixed(1));
//๋ ์จ API์์ icon์ ์ง์ํจ ํคweather์ 0๋ฒ์งธ ๋ญ์ค์ icon์ usestate์ ๋๊ฒจ์ค.
setIcon(result.weather[0].icon)
});
์ดํ ๋ฆฌํด๋ฌธ ์์์ ํ๊ทธ์์ ์ค๊ดํธ๋ฅผ ์ด์ฉํด state๋ก ๋ฃ์ด์ฃผ์๊ณ
icon์ URL๋ก ์ด์ฉ๊ฐ๋ฅํด์ ๋ฐฑํฑ์ ์ด์ฉํด icon state๋ฅผ ์ ์ฉํด์ฃผ์๋ค.
error์ปจํธ๋กค๋ ์ ์ด๋จ์์ง๋ง, ์ผ๋จ์ ์ง์๋ค (์ด๋ป๊ฒ ์จ์ผํ ์ง ์์ง๋ชจ๋ฅด๊ฒ ๋ค..)
<App />
app์ ๋์ฐ๊ณ css๋ฅผ ์ฌ์ฉํ์ฌ ์กฐ๊ธ ๋ง์ก๋ค.
์ปดํฌ๋ํธ ๋จ์ ๊ฐ๋ฐ์ด ์ ์ง๋ณด์๋ฉด์์ ํธํ๋ค๋ ๋ง์ ์ข๋ ์ฒด๊ฐํ ์ ์์๊ณ ,
์ง์ง ๋ฆฌ์กํธ ์๋ ๋ชป๋๋๋ฐ ํ๋ค๋ณด๋ฉด ๋๋๊ตฌ๋ ํ๋ ์๊ฐ์ด ๋ค์๊ณ ,
๋ ์จ ๋ถ๋ถ์ด ์์ํด์ ์๊ฐ์ด ๋ง์ด ๊ฑธ๋ ธ๋ค.
๊ทธ๋๋ ์ด๋ ค์ํ๋ Fetch, State, API์ ์ฉ์ ๋ชจ๋ ํด๋ณผ ์ ์์ด์ ๋ง์ ๊ณต๋ถ๊ฐ ๋์๋ค.
๋ด์ผ์ AddList ์ ์ฉํ์.
'TIL -์ผ๊ฐํ์ต๊ธฐ๋ก > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
API, UseEffect๋ก ๊ด๋ฆฌํ๊ธฐ (0) | 2022.02.17 |
---|---|
Stateairline-client ๊ณผ์ (0) | 2022.02.09 |
[React ์์ต์] Tic Tac Toe.. (0) | 2022.02.03 |
[TodoList]create react app ์ค์น (0) | 2022.01.30 |
๋ฆฌ์กํธ๋ก Todo list๋ฅผ ๋ง๋ค์ด๋ณด์ (0) | 2022.01.30 |
๋๊ธ