Today I Learned #11

loopbacksealยท2021๋…„ 1์›” 8์ผ
0

Javascript

๋ชฉ๋ก ๋ณด๊ธฐ
10/16
post-thumbnail

์‹œ๊ฐ„๊ณผ ์‚ฌ์šฉ์ž์˜ ์ด๋ฆ„, To Do List๋ฅผ ๊ฐ–๊ณ ์žˆ๋Š” ํ˜„์žฌ์˜ momentum์—, ์‚ฌ์šฉ์ž์˜ ์œ„์น˜๋ฅผ ๋ฐ›์•„ ํ•ด๋‹น ์œ„์น˜์˜ ๋‚ ์”จ๋ฅผ ์ถœ๋ ฅํ•˜๋„๋ก ํ–ˆ๋‹ค.
์‚ฌ์šฉ์ž์˜ ์œ„์น˜๋Š” navigator.geolocation.getCurrentPosition()์„ ํ†ตํ•ด ๋ฐ›์•„์˜ค๊ณ , ๋‚ ์”จ๋Š” openweathermap์„ ํ†ตํ•ด ๋ฐ›์•„์™”๋‹ค.


navigator๋Š” ์‚ฌ์šฉ์ž ์—์ด์ „ํŠธ (์›น์˜ ๊ฒฝ์šฐ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋œปํ•จ) ์˜ ์ƒํƒœ๋‚˜ ์‹ ์› ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋ฉฐ, ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ฐธ๊ณ ๋กœ ํ‘œ์ค€ ์†์„ฑ์€ ์ „๋ถ€ Read only๋กœ ๋ฐ˜ํ™˜๋œ๋‹ค.

geolocation

๊ทธ ์ค‘ ๋‚˜์—๊ฒŒ ํ•„์š”ํ•œ ๊ฒƒ์€ ์‚ฌ์šฉ์ž์˜ ์œ„์น˜ ์ด๋ฏ€๋กœ geolocation์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ์œ„์น˜๋ฅผ ๋ฐ›๋„๋ก ํ–ˆ๋‹ค.<script src="weather.js"></script>๋ฅผ ํ†ตํ•ด weather.js๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋„๋ก ํ•˜๊ณ  ์ƒ์„ฑํ–ˆ๋‹ค.

loadCoords()

init()์—์„œ๋Š” loadCoords()๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ํ•˜์˜€๊ณ , ํ•ด๋‹น ํ•จ์ˆ˜์—์„œ๋Š” const loadedCoords = localStorage.getItem("coords");๋ฅผ ํ†ตํ•ด LS์—์„œ ์ง€์—ญ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ๋ฐ›์•„์˜ค๋„๋ก ํ•˜์˜€๊ณ , if(loadCoords === null)์„ ํ†ตํ•ด ๋งŒ์•ฝ ์ด๋ฏธ ์ •๋ณด๊ฐ€ ์žˆ๋‹ค๋ฉด askForCoords()ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ํ•˜์˜€๊ณ , ๊ทธ๋ ‡์ง€ ์•Š์€ ๊ฒฝ์šฐ ํ•ด๋‹น ์ง€์—ญ์˜ ๋‚ ์”จ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋„๋ก ํ•˜์˜€๋Š”๋ฐ, ์ •๋ณด๊ฐ€ ์—†๋Š” ๊ฒฝ์šฐ๋ฅผ ๋จผ์ € ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

askForCoords()

์ด ํ•จ์ˆ˜์—์„œ navigator.geolocation.getCurrentPosition(handleGeoSuccess, handleGeoError)์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์˜ ํ˜„์žฌ ์œ„์น˜๋ฅผ ๋ฐ˜ํ™˜ ํ•˜๋„๋ก ํ•˜์˜€๋‹ค. getCurrentPosition๋Š” ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ 3๊ฐœ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ณ , success๋ฅผ ์ œ์™ธํ•œ ๋‘ ๋ณ€์ˆ˜(error,option)์€ ํ•„์ˆ˜๊ฐ€ ์•„๋‹ˆ๋‹ค. success์™€ error๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜์ธ๋ฐ, success์˜ ๊ฒฝ์šฐ๋Š” GeolocationPosition์„ ์œ ์ผํ•œ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋ฐ›๊ณ , error๋Š” GeolocationPositionError๋ฅผ ์œ ์ผํ•œ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋ฐ›๋Š”๋‹ค.option์—์„œ๋Š” ์ •ํ™•๋„์™€ ์†Œ๋ชจ์‹œ๊ฐ„์„ ์ถ”๊ฐ€์ ์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋‚˜์˜ ๊ฒฝ์šฐ option์€ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๊ณ , success๋Š” handelGeoSuccess(position), error๋Š” handleGeoError(err)๋กœ ์ฝœ๋ฐฑํ•˜๋„๋ก ํ•˜์˜€๋‹ค. handleGeoError()์—์„œ๋Š” ์˜ค๋ฅ˜ ๋ฌธ๊ตฌ๋ฅผ ์ถœ๋ ฅํ•˜๋„๋ก ํ–ˆ๋‹ค.

handleGeoSuccess()

handleGeoSuccess(position)์—์„œ๋Š” position.coords๋ฅผ ํ†ตํ•ด GeolocationCoordinates์„ ๋ถˆ๋Ÿฌ์˜ค๊ณ , position.coords.latitude, position.coords.longitude๋ฅผ ๊ฐ๊ฐ latitutde,longitude๋กœ ์„ ์–ธํ•ด์ฃผ์—ˆ๋‹ค. ์ด latitude, longitude๋ฅผ coordsObj๋กœ ์„ ์–ธํ•ด์ค€ ํ›„, ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ local storage์— ์ €์žฅํ•˜๋Š” ํ•จ์ˆ˜ saveCoords(coordsObj)๋ฅผ ํ˜ธ์ถœํ•ด์ฃผ์—ˆ๋‹ค. ๋‹ค์Œ์€ coordsObj์„ ์–ธ์ด๋‹ค.

    const coordsObj = {
        latitude,
        longitude
    };

๋ณดํ†ต์˜ ์„ ์–ธ์ด๋ผ๋ฉด, latitude: latitude, longitude: longitude;์™€ ๊ฐ™์ด ์„ ์–ธํ–ˆ๊ฒ ์ง€๋งŒ, javascript์˜ ํŠน์ง• ์ค‘ ํ•˜๋‚˜๋กœ, ์„ ์–ธํ•˜๊ณ ์ž ํ•˜๋Š” key์™€ value์˜ ๊ฐ’์ด ๊ฐ™์€ ๊ฒฝ์šฐ, latitude, longitude;๋งŒ ํ•ด์ฃผ์–ด๋„ ๊ฐ™์€ ์˜๋ฏธ๋ฅผ ๊ฐ–๋Š”๋‹ค.

saveCoords()

coordObj๋ฅผ ์ธ์ž๋กœ ๊ฐ–๋Š” saveCoords()๋Š” ์ด javascript ๊ฐ์ฒด๋ฅผ stringifyํ•˜์—ฌ local storage์— ์ €์žฅํ•˜๋Š” ๊ธฐ๋Šฅ์„ ํ•œ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋กœ ์ง„ํ–‰๋œ๋‹ค.

localStorage.setItem("coords", JSON.stringify(coordsObj));

์‚ฝ์งˆ

์ง€๊ธˆ๊นŒ์ง€์˜ ๊ณผ์ •์„ ๊ฑฐ์น˜๋ฉด, local storage์— ์•„๋ž˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด coords๊ฐ€ ์ €์žฅ๋œ๋‹ค.

ํ•˜์ง€๋งŒ, ๋‚˜์˜ ๊ฒฝ์šฐ ์ฒ˜์Œ๋ถ€ํ„ฐ ์ €์žฅ์ด ๋œ ๊ฒƒ์€ ์•„๋‹ˆ์—ˆ๋Š”๋ฐ, ์•„๋ž˜ ์‚ฌ์ง„์ฒ˜๋Ÿผ ์œ„์น˜ ์‚ฌ์šฉ ์—ฌ๋ถ€๋ฅผ ์งˆ๋ฌธํ•˜๋Š” ํŒ์—…์€ ๋–ด์ง€๋งŒ, ์‹ฌ์ง€์–ด ํ—ˆ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด handleGeoError๋„ ์‹คํ–‰๋์ง€๋งŒ,

ํ—ˆ์šฉ์„ ๋ˆ„๋ฅด๋Š” ๊ฒฝ์šฐ ์ง„ํ–‰๋˜์–ด์•ผ ํ•  coords์˜ ์ €์žฅ์€ ์ด๋ฃจ์–ด์ง€์ง€ ์•Š์•˜๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐ ํ•จ์ˆ˜์— console.log("(ํ•จ์ˆ˜์ด๋ฆ„) works")๋ฅผ ํ†ตํ•ด ์–ด๋””๊นŒ์ง€ ์ง„ํ–‰์ด ๋˜๋Š”๊ฐ€ ํ™•์ธ์„ ํ•ด๋ณด์•˜๊ณ , askForCoords()๊นŒ์ง„ ์ •์ƒ ์ง„ํ–‰๋˜์ง€๋งŒ, "ํ—ˆ์šฉ"์„ ๋ˆ„๋ฅธ ํ›„ ์ง„ํ–‰๋˜์ง€ ์•Š์•˜๋‹ค. ๊ตฌ๊ธ€๋ง์„ ํ•˜๋ฉฐ ์ด๊ฒƒ์ €๊ฒƒ ์‹œ๋„ํ–ˆ์ง€๋งŒ, ์ž‘๋™๋˜์ง€ ์•Š์•˜๊ณ , ํ˜น์‹œ๋‚˜ ์‹ถ์–ด ํ™•์ธํ•œ ์„ค์ •์ด ๋‹ต์ด์—ˆ๋‹ค.

... ์ด์œ ๋Š” ์•Œ ์ˆ˜ ์—†์ง€๋งŒ, ํ•ด๋‹น ์„ค์ •์€ ํ™œ์„ฑํ™”๋ฅผ ํ•ด์ฃผ์–ด๋„ ๊ณ„์† ํ•ด์ œ๋˜๊ณ , ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์ฒดํฌ๋ฅผ ๋‹ค์‹œ ํ•ด์ค€ ๋’ค ์‚ฌ์šฉํ–ˆ๋‹ค.


openweathermap

ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•œ ํ›„, ์‚ฌ์šฉ์ž์˜ ์œ„๋„์™€ ๊ฒฝ๋„๋ฅผ ์ €์žฅํ–ˆ์œผ๋‹ˆ, ํ•ด๋‹น ์œ„๋„์™€ ๊ฒฝ๋„์˜ ๋‚ ์”จ๋ฅผ ํŽ˜์ด์ง€์— ์ถœ๋ ฅํ•˜๋„๋ก ํ•˜๋Š” ์ž‘์—…์„ ํ–ˆ๋‹ค. ์‚ฌ์šฉํ•œ API๋Š” openweathermap์ด๊ณ , ์‚ฌ์šฉ ์กฐ๊ฑด์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ๋‚˜์˜ ๊ฒฝ์šฐ๋Š” ๋ฌด๋ฃŒ๋กœ ์ด์šฉํ–ˆ๋‹ค. Divide๋ฅผ ์œ„ํ•ด loadCoords()์—์„œ local storage์— "coords"๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ, ์—†๋Š” ๊ฒฝ์šฐ askForCoords()๋ฅผ ์‹คํ–‰ํ–ˆ๋˜ ๊ฒƒ๊ณผ ๋‹ฌ๋ฆฌ, ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด getWeather()์ด ์‹คํ–‰๋˜๋„๋ก ํ–ˆ๋‹ค.

const parsedCoords = JSON.parse(loadedCoords);
getWeather(parsedCoords.latitude,parsedCoords.longitude);

๋˜ํ•œ, index.html์— <span class="js-weather"></span>๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ innerText๋ฅผ ํ†ตํ•ด ์›ํ•˜๋Š” ๊ฐ’์„ ์ถœ๋ ฅ ๊ฐ€๋Šฅํ† ๋ก ํ•˜์˜€๊ณ , const weather = document.querySelector(".js-weather");,
const API_KEY = "//๋‚˜์˜ API_KEY//";๋ฅผ ํ†ตํ•ด weather์™€ API_KEY๋ฅผ ๋ฏธ๋ฆฌ ์„ ์–ธํ–ˆ๋‹ค.

fetch()

API๋ฅผ ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ getWeather(lat,lng)์—์„œ ๊ฐ€์žฅ ๋จผ์ € ํ•œ ๊ฒƒ์€ fetch()์˜€๋‹ค. ์ •ํ™•ํžˆ๋Š” WindowOrWorkerGlobalScope.fetch()๋กœ, ์ธ์ž๋กœ์„œ ์ „๋‹ฌ๋œ request๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ๋‚ด๊ฐ€ ์š”๊ตฌํ•œ request๋Š” ๋‹ค์Œ ์‚ฌ์ง„๊ณผ ๊ฐ™๋‹ค.

then()

fetch()๋ฅผ ํ†ตํ•ด request๋ฅผ ์ „๋‹ฌํ–ˆ์œผ๋‹ˆ, ๋‹ค์Œ์€ response๋ฅผ ์ฝ์–ด์™€ json()์„ ํ†ตํ•ด JSON์˜ ํ˜•ํƒœ๋กœ ๋ณ€ํ™˜ํ•˜์—ฌ returnํ•˜์—ฌ innerText()๋กœ ์ถœ๋ ฅํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

ํ•˜์ง€๋งŒ, ๋น„๋™๊ธฐ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋Š” API์˜ response๊ฐ€ ๋„๋‹ฌํ•˜๊ธฐ ์ „์— json()์ด ์‹คํ–‰๋œ๋‹ค๋ฉด, ์ฝ์–ด์˜ฌ response๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๋”ฐ๋ผ์„œ then()์„ ํ†ตํ•ด ์ง„ํ–‰ํ•˜๋Š”๋ฐ, ์ด ํ•จ์ˆ˜๋Š” API์™€ ๋น„์Šทํ•œ promise๋ฅผ ํ†ตํ•ด ์„ฑ๊ณต์œผ๋กœ ํ•ด๋‹น promise๊ฐ€ ์™„๋ฃŒ๋œ ๊ฒฝ์šฐ ์ธ์ž๋กœ ์ „๋‹ฌ๋œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋„๋ก ํ•œ๋‹ค. ์ถ”ํ›„ YDKJS์—์„œ ์ž์„ธํžˆ ๋‹ค๋ฃจ๋„๋ก ํ•˜๊ฒ ๋‹ค. ๊ฒฐ๊ตญ, getWeather()์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑ๋œ๋‹ค.

function getWeather(lat, lng) {
fetch(`https://api.openweathermap.org/data/2.5/weather?
lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
    ).then(function(response){
        return response.json();
    }).then(function(json){
        const temperature = json.main.temp;
        const place = json.name;
        weather.innerText = `${temperature}ยฐC @ ${place}`;
    });
}

fetch()๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด, response๋ฅผ ์ธ์ž๋กœ ํ•˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ, ํ•ด๋‹น response๋ฅผ JSON ํ˜•ํƒœ๋กœ ๋ฐ”๊พธ์–ด์ฃผ๊ณ , ํ•ด๋‹น ํ•จ์ˆ˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด, ํ•ด๋‹น json์„ ์ธ์ž๋กœ ํ•˜์—ฌ temperature๊ณผ place๋ฅผ ์„ ์–ธํ•ด์ฃผ๊ณ , innerText๋ฅผ ํ†ตํ•ด <span>์˜ ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•˜๋„๋ก ํ•˜์˜€๋‹ค.

profile
CAU Business Administration

0๊ฐœ์˜ ๋Œ“๊ธ€