프로젝트 생성

npx create-react-app [프로젝트명]

src/app.js 의 불필요한 부분 제거 후
$npm start 명령어로 앱 실행

현재위치 정보 가져오기

앱이 실행되자마자 현재위치에 대한 정보가 필요하므로
useEffect Hooks 를 사용

useEffect 에는 2개의 매개변수가 필요하고,
함수 내부에 원하는 내용을 작성 해 주면 된다.

useEffect(() => {함수},[배열])

현재위치정보 가져오기
https://www.w3schools.com/html/html5_geolocation.asp

위 Reference 를 참조하여 현재위치에 대한 정보를 가져와 보자.

latitude (위도), longitude (경도)

현재위치 기반 날씨정보 가져오기

Current Weather Data -> API doc -> API call

https://openweathermap.org/current#geocoding

API 를 불러오기 전 함수를 만들어 자리를 만들어주자.

getWeatherByCurrentLocation 함수 생성

API url 을 살펴보면 필요한 값들이 적혀있다.
lat 의 정보, lon 의 정보, API key

하지만,
이미 lat 과 lon 의 값을 구하는 코드를 만들었으니,
그 값을 호출만 해 주면 된다.

getCurrentLocation 함수 내부에서 lat 과 lon 의 값을 가져올때,
getWeatherByCurrentLocation 함수를 호출하고 그 값으로는 lat 과 lon 을 받는다.

매개변수로 lat 과 lon 을 주어
getCurrentLocation 함수가 실행될 때 던져준 값을 캐치한다.

$ 의 의미는 Dynamic Value 로 변화하는 값을 구할 때 사용한다.

API 호출 🔮

현재 위치정보가 담긴 url 을 기반으로 API 를 호출해보자 💥

먼저,
url 을 호출해 데이터를 가져올때까지 await 를 통해 기다려달라는 값을 response 에 담아주었다.

await 을 사용함으로써 비동기적처리를 알수 있다. async - await

fetch 란,
JavaScript 에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

마찬가지로 url 에서 추출한 json 파일을 담아줄 필요가 있다. response 에서 추출한 json 을 가져올때까지 기다려달라는 값을 data 에 담아주었다.

API 는 대부분 JSON 파일의 형태를 띄고있다.

데이터 확인 💥

이제,
가져온 데이터를 확인해 볼 차례이다 🙌🙌
console.log 를 찍어 값을 확인 해 보자.

헉스,, 내 신상정보가 담긴 데이터가 보여지고 있다 😱😱
코딩이란,, API 란,, 정말 심오하며 신기한것,,😎


다음 포스팅에선,
불러온 데이터를 UI 를 통해 화면에 뿌려주는 작업을 해 보도록 하자 😆