비동기 처리와 fetch API: 실시간 날씨 정보 불러오기 실습

비동기 처리 개념은 익혔는데, 막상 써먹으려니 막막하셨나요? 오늘은 진짜로 API를 호출해서 날씨 데이터를 불러오는 실전 예제를 만들어봅니다!

안녕하세요, 여러분! 이번 시간에는 자바스크립트의 핵심인 비동기 처리(async/await)와 fetch API를 활용해 실제 날씨 정보를 받아오는 웹 애플리케이션을 만들어볼 거예요. 단순한 이론 설명이 아니라, 실시간으로 데이터를 요청하고 화면에 보여주는 실무형 예제이니 끝까지 따라와 주세요!

바로가는 목차

1. 비동기 처리와 fetch API 개념 정리 2. OpenWeather API로 날씨 데이터 받아오기 3. 받아온 날씨 데이터를 UI에 출력하기 4. 에러 처리와 사용자 메시지 만들기 5. 코드 리팩토링: async 함수 분리 및 구조 개선 6. 최종 데모: 검색 기반 날씨 앱 완성!

비동기 처리와 fetch API 개념 정리

비동기(async)는 말 그대로 "동시에 일어나지 않는" 작업을 뜻합니다. 자바스크립트는 싱글 스레드 언어이기 때문에, 오래 걸리는 작업(예: 서버 요청)을 수행할 때 **작업이 끝날 때까지 기다리지 않고** 다음 코드로 넘어가도록 설계되어 있어요.

이런 비동기 작업을 다룰 때 사용하는 것이 바로 fetch()와 async/await입니다.

async function getData() {
  const response = await fetch("https://api.example.com/data");
  const result = await response.json();
  console.log(result);
}

위 코드는 외부 데이터를 요청하고, 응답이 오면 처리하는 간단한 비동기 예제입니다. 이번 글에서는 이 구조를 활용해 실시간 날씨를 가져와 보여주는 웹 앱을 만들게 될 거예요!

OpenWeather API로 날씨 데이터 받아오기

OpenWeatherMap은 가장 널리 사용되는 무료 날씨 API입니다. 먼저 무료 API 키를 발급받은 후, 아래와 같이 도시 이름으로 현재 날씨를 요청할 수 있어요.

const API_KEY = "여기에_발급받은_API키";
const city = "Seoul";
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

async function fetchWeather() {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

이 함수는 `Seoul`의 현재 날씨 정보를 받아서 JSON 형태로 출력해줍니다. 응답 데이터는 날씨 설명, 온도, 습도, 아이콘 등 다양한 정보가 포함돼요.

받아온 날씨 데이터를 UI에 출력하기

이제 데이터를 화면에 보여주는 작업을 해봅시다. 아래는 날씨 정보를 DOM에 렌더링하는 예시입니다.

function renderWeather(data) {
  const container = document.getElementById("weather");
  container.innerHTML = `
    <h3>${data.name}의 날씨</h3>
    <p>현재 온도: ${data.main.temp}°C</p>
    <p>날씨 상태: ${data.weather[0].description}</p>
  `;
}

이렇게 하면 사용자 입력에 따라 원하는 도시의 실시간 날씨 정보를 화면에 출력할 수 있어요! 이제 다음 섹션에서는 에러 상황과 사용자 메시지를 처리해보겠습니다.

에러 처리와 사용자 메시지 만들기

API 호출은 항상 실패할 가능성이 있어요. 예를 들어 존재하지 않는 도시를 입력하거나, 네트워크 오류가 발생할 수도 있죠. 이런 상황을 대비해서 try...catch 블록으로 에러를 처리해야 합니다.

async function fetchWeather(city) {
  try {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error("도시를 찾을 수 없습니다.");
    }
    const data = await response.json();
    renderWeather(data);
  } catch (error) {
    const container = document.getElementById("weather");
    container.innerHTML = `<p style="color:red;">${error.message}</p>`;
  }
}

에러가 발생해도 사용자에게 친절한 메시지를 보여줄 수 있도록 UI 처리까지 함께 해주는 게 실무에서 중요해요.

코드 리팩토링: async 함수 분리 및 구조 개선

실전에서는 코드의 재사용성과 유지보수성을 위해 함수를 분리하는 것이 좋습니다. 아래는 fetch, render, handle 함수로 나눈 구조입니다.

async function getWeatherData(city) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
  const response = await fetch(url);
  if (!response.ok) throw new Error("날씨 정보를 가져올 수 없습니다.");
  return await response.json();
}

function updateUI(data) {
  const el = document.getElementById("weather");
  el.innerHTML = `
    <h3>${data.name}</h3>
    <p>${data.main.temp}°C, ${data.weather[0].description}</p>
  `;
}

async function handleWeather(city) {
  try {
    const data = await getWeatherData(city);
    updateUI(data);
  } catch (e) {
    document.getElementById("weather").innerHTML = `<p style="color:red;">${e.message}</p>`;
  }
}

이렇게 역할별로 함수 분리를 해두면 재사용하기도 좋고, 유지보수도 쉬워집니다. 팀 프로젝트에서도 이런 구조가 훨씬 환영받아요!

최종 데모: 검색 기반 날씨 앱 완성!

이제 간단한 입력창과 버튼을 통해 도시명을 입력받고 날씨를 불러오는 전체 동작을 구현해볼게요.

// HTML
<input id="cityInput" placeholder="도시 입력">
<button onclick="handleSearch()">검색</button>
<div id="weather"></div>

// JS
function handleSearch() {
  const city = document.getElementById("cityInput").value;
  handleWeather(city);
}

이제 사용자가 도시를 입력하고 버튼을 클릭하면, 해당 지역의 실시간 날씨를 받아볼 수 있는 작은 날씨 앱이 완성됩니다!

자주 묻는 질문 (FAQ)

Q fetch 대신 axios를 써도 되나요?

네, axios는 추가 기능이 많은 편리한 라이브러리이며 fetch보다 간결하게 코드를 쓸 수 있습니다. 선택은 취향과 상황에 따라 결정하세요!

Q API 키는 어디서 구하나요?

OpenWeather 공식 웹사이트(openweathermap.org)에서 회원가입 후 무료 API 키를 발급받을 수 있습니다. 요금제도 무료부터 유료까지 다양하게 제공됩니다.

Q 날씨 정보는 어느 정도 정확한가요?

OpenWeather는 전 세계에서 데이터를 수집하며 예보 정확도는 높은 편입니다. 다만 단기 예보와 지역 세부 정보는 일부 차이가 있을 수 있습니다.

Q CORS 에러가 뜨는 경우는 어떻게 하나요?

CORS 오류는 서버가 브라우저 요청을 허용하지 않는 경우 발생합니다. 이때는 프록시 서버 사용, 서버 설정 변경, 백엔드 통신 구조 적용 등이 필요할 수 있어요.

지금까지 자바스크립트의 비동기 처리 개념과 fetch API를 이용한 실전 날씨 앱 예제를 함께 만들어보았습니다. 이제 단순히 데이터를 요청하는 수준을 넘어서, 에러 처리, UI 렌더링, 코드 분리까지 실무에 바로 적용 가능한 패턴들을 자연스럽게 익히셨을 거예요. 다음에는 API 데이터를 로컬 저장하거나, 날씨 외 다른 외부 정보와 연동하는 고급 주제도 준비해볼게요. 지금까지 따라오시느라 고생 많으셨습니다 ☀️