첫 페이지 완성

자바스크립트로 처음 페이지를 만들었다.

마지막인 날씨 기능을 추가하고 css 작업을 통해 업데이트를 지속적으로 할 예정이다.

이 기능을 추가하면 필요한건 모두 모은 셈이다.

우선 내가 위치한 정보를 불러모아야한다.
다음과 같다.

<script>
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
</script>

이 코드를 입력하면 브라우저 자체에서 정보를 전달한다.
참고로 저 괄호안에 있는 것들은 함수다.
위치정보를 성공적으로 불러왔을 경우 부르는 함수 1
실패했을 경우 불러오는 함수 2 라고 이해할 수 있다.

먼저 날씨 오류부터 만들어보자

function onGeoError() {
    alert("위치를 찾을 수 없어 날씨 정보를 띄울 수 없습니다.")
}

이렇게 해주면 끝이다.
리프레쉬 해주면 저렇게 물음이 뜬다.
여기서 차단을 선택하면

이런식으로 등장하게 된다.

그리고 성공적으로 위치 정보를 불러오기 위해서 다음과 같이 작성해보자

function onGeoOk (position){
	console.log(position)
}

이렇게 작성해둔다면

이런식으로 coord 코드 내에 위치 정보가 등장하는 것을 알 수 있다.
이걸 활용해 현재 내 위치 정보를 꺼내오면 다음과 같은 변수로 정의할 수 있다.

const lat = position.coords.latitude;
   const lon = position.coords.longitude;

이를 활용해 날씨 api를 적용해서 날씨를 불러와보자.

openweatherapi를 검색하고 이런 url을 불러와보자

https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}

그리고 여기에 내가 가진 함수를 저렇게 집어넣으면 현재 내 위치에 기반해 등장한다.
그리고 fetch를 적용해보자.

다음과 같이 구성한다면, 날씨 정보를 성공적으로 불러올 수 있다.