33일차(날씨 api)[navigator / getLocation]

진하의 메모장·2025년 2월 23일

Fetch async await getlocation navigator 날씨 API 복습 자바스크립트

공부일기

목록 보기

39/66

2025 / 02 / 21

오늘 수업 시간에는 저번에 혼자서 사용해본 날씨 API를 교수님과 함께 사용했습니다.
navigator이나 getLocation, 위도, 경도 등등 어려워 보이는 내용을 다루고 있지만 최대한 쉽게.. 정리해서 포스팅해보도록 하겠습니다.

💌 navigator 객체

웹 브라우저에서 제공하는 전역 객체입니다.

브라우저와 관련된 기능에 접근할 수 있게 해줍니다.

사용자의 위치 정보뿐만 아니라, 브라우저 정보, 언어 설정, 플랫폼 정보 등을 알 수 있는 속성들이 포함되어 있습니다.
console.log(navigator.userAgent);  // 사용자 브라우저 정보
console.log(navigator.language);   // 브라우저 언어 설정

navigator 객체는 브라우저와 관련된 다양한 정보를 제공하는 중앙 객체입니다.

💌 geolocation 속성

navigator.geolocation

geolocation은 navigator 객체의 속성 중 하나입니다.

사용자의 위치 정보를 다루는 여러 메서드와 속성들을 포함하고 있습니다.

이 속성을 통해 사용자의 위치를 가져오거나 추적할 수 있습니다.

geolocation 속성은 객체입니다.

geolocation 속성에는 위치 정보를 얻을 수 있는 여러 메서드가 포함되어 있습니다.
console.log(navigator.geolocation); // geolocation 객체를 출력

geolocation 객체는 사용자의 위치를 다루는 기능을 제공하는 중요한 객체입니다.

💌 getCurrentPosition( ) 메서드

geolocation.getCurrentPosition( )

getCurrentPosition( )는 geolocation 객체 내에 포함된 메서드입니다.

사용자의 현재 위치를 비동기적으로 요청하고, 성공적으로 위치를 가져오면 위치 정보를 담은 객체를 콜백 함수로 반환합니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

successCallback

위치 정보가 성공적으로 전달되면 실행되는 콜백 함수입니다.

errorCallback

위치 정보를 얻는 데 실패했을 경우 실행되는 콜백 함수입니다.

navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log(position);  // 위치 정보가 담긴 객체
  },
  (error) => {
    console.log(error);  // 위치 정보를 얻을 수 없을 때 발생한 에러
  }
);

💌 position 객체

위도(latitude), 경도(longitude), 정확도(accuracy) 등의 정보를 포함하고 있습니다.

예를 들어, position.coords.latitude로 위도를, position.coords.longitude로 경도를 얻을 수 있습니다.

💌 전체 정리

요약하기

navigator는 웹 브라우저의 전역 객체로, 브라우저와 관련된 여러 정보를 제공합니다.

navigator.geolocation은 navigator 객체의 속성으로, 사용자의 위치 정보를 다루는 여러 메서드들을 제공하는 객체입니다.

navigator.geolocation.getCurrentPosition( )은 geolocation 객체 내의 메서드로, 사용자의 현재 위치를 비동기적으로 요청하고, 성공하면 위치 정보를 콜백 함수로 반환합니다.

구조정리

navigator → geolocation (속성) → getCurrentPosition( ) (메서드)

navigator.geolocation.getCurrentPosition( )는 navigator 객체의 geolocation 속성에 포함된 getCurrentPosition( ) 메서드를 호출하는 구조입니다.
// `navigator`는 객체
// `navigator.geolocation`은 navigator 객체의 속성으로, 객체입니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

navigator

웹 브라우저 객체입니다.

navigator.geolocation

navigator 객체의 속성으로 객체입니다.

getCurrentPosition( )

geolocation 객체 내의 메서드로, 사용자의 현재 위치를 가져오는 기능을 수행합니다.

💌 OpenWeatherMap API

OpenWeatherMap API를 사용하여 날씨 정보를 가져오는 실습입니다.

1. API URL 구성

getCurrentPosition( )으로 얻은 위도(latitude)와 경도(longitude) 정보를 사용해 날씨 정보를 가져오기 위해, OpenWeatherMap API를 호출합니다.
let lat = position.coords.latitude;
let lon = position.coords.longitude;
let apiKey = 'YOUR_API_KEY';  // OpenWeatherMap에서 제공하는 API 키
let url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;

URL을 통해 해당 위치에 대한 날씨 정보를 요청할 수 있습니다.

2. 날씨 데이터 가져오기

fetch( )를 사용하여 날씨 API에 요청을 보내고, JSON 응답을 처리합니다.
날씨 데이터에서 필요한 정보를 추출해 웹 페이지에 표시할 수 있습니다.

fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // JSON 형식으로 응답을 파싱
  })
  .then((data) => {
    const temperature = data.main.temp; // 온도 정보
    const description = data.weather[0].description; // 날씨 상태 (맑음, 흐림 등)
   
    document.querySelector("p").innerHTML = `현재 온도: ${temperature}°C, 상태: ${description}`;
  })
  .catch((error) => {
    console.error("날씨 데이터를 가져오는 데 오류 발생:", error);
  });

temperature와 description을 가져와 사용자의 위치에 맞는 날씨 정보를 표시합니다.

3. async/await 사용

fetch( ) 요청을 비동기적으로 처리할 때 async/await 구문을 사용하면, 코드가 더 깔끔하고 이해하기 쉬워집니다.

async function getWeather() {
  try {
    const position = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const apiKey = 'YOUR_API_KEY';
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;

    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    const temperature = data.main.temp;
    const description = data.weather[0].description;

    document.querySelector("p").innerHTML = `현재 온도: ${temperature}°C, 상태: ${description}`;
  } catch (error) {
    console.error("오류 발생:", error);
  }
}

getWeather();

💌 전체 코드

위에서 다룬 모든 부분을 합쳐 놓은 코드입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>날씨 정보</title>
  </head>
  <body>
    <p>날씨 정보를 가져오는 중...</p>
    
    <script>
      async function getWeather() {
        try {
          const position = await new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resolve, reject);
          });
          
          const lat = position.coords.latitude;
          const lon = position.coords.longitude;
          const apiKey = 'YOUR_API_KEY';  // OpenWeatherMap API 키
          const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;

          const response = await fetch(url);
          if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
          }
          
          const data = await response.json();
          const temperature = data.main.temp;
          const description = data.weather[0].description;
          
          document.querySelector("p").innerHTML = `현재 온도: ${temperature}°C, 상태: ${description}`;
        } catch (error) {
          console.error("오류 발생:", error);
          document.querySelector("p").innerHTML = "날씨 정보를 가져오는 데 문제가 발생했습니다.";
        }
      }

      getWeather();
    </script>
  </body>
</html>

33일차 후기

혼자서 사용했을 때는 이해 안가는 부분도 많았고, 어려웠는데 이번에 설명과 함께 실습을 해서 그런지 쉬운건 절대 아니고... 나름.. 저번보다는 괜찮았습니다.

확실히 날씨 api가 다루는 객체와 메소드가 어렵긴 한데 이번에 벨로그를 작성하면서 세부적으로 살펴볼 수 있어서 이해하기도 괜찮았고 좋았습니다.

다양한 api가 많을텐데 날씨 api 하나 사용할 수 있게 되었다고 생각하니까.. 아직 막막하긴 한데 하나하나 배워가면서 익숙해질 수 있도록 노력하겠습니다. ☆٩(｡•ω<｡)و