외부 API와의 통합

// fetch API 기본 사용법
async function fetchData(url: string) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json(); // JSON 응답 파싱
    // const textData = await response.text(); // 텍스트 응답 파싱
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error;
  }
}

# .env.local
OPENWEATHER_API_KEY=YOUR_OPENWEATHER_API_KEY_HERE

import { NextRequest, NextResponse } from 'next/server';

const OPENWEATHER_API_KEY = process.env.OPENWEATHER_API_KEY;
const BASE_URL = 'https://api.openweathermap.org/data/2.5/weather';

export async function GET(request: NextRequest) {
  // 1. 쿼리 파라미터에서 도시 이름 가져오기
  const searchParams = request.nextUrl.searchParams;
  const city = searchParams.get('city')?.trim();

  // 2. 필수 파라미터 검증
  if (!city) {
    return NextResponse.json(
      { message: '도시 이름(city) 쿼리 파라미터가 필요합니다.' },
      { status: 400 } // Bad Request
    );
  }

  // 3. API 키 유효성 검사 (서버 환경 변수 확인)
  if (!OPENWEATHER_API_KEY) {
    console.error('OpenWeatherMap API Key is not set in environment variables.');
    return NextResponse.json(
      { message: '서버 설정 오류: API 키가 누락되었습니다.' },
      { status: 500 } // Internal Server Error
    );
  }

  try {
    // 4. OpenWeatherMap 외부 API 호출 URL 생성 (단위: 섭씨, 언어: 한국어)
    const apiUrl = new URL(BASE_URL);
    apiUrl.search = new URLSearchParams({
      q: city,
      appid: OPENWEATHER_API_KEY,
      units: 'metric',
      lang: 'kr',
    }).toString();

    // 5. 외부 API 호출
    const response = await fetch(apiUrl);

    // 6. 외부 API 응답 처리
    if (!response.ok) {
      const notFound = response.status === 404;
      console.error('OpenWeatherMap API Error:', { status: response.status });
      // 제공자 인증·호출 한도 오류를 애플리케이션 사용자의 오류로 그대로 전달하지 않습니다.
      return NextResponse.json(
        { message: notFound ? '도시를 찾을 수 없습니다.' : '날씨 제공 서비스의 응답을 처리할 수 없습니다.' },
        { status: notFound ? 404 : 502 }
      );
    }

    const weatherData = await response.json();

    // 7. 클라이언트에 필요한 형태로 데이터 가공 (선택 사항)
    const processedData = {
      city: weatherData.name,
      country: weatherData.sys.country,
      temperature: weatherData.main.temp,
      feelsLike: weatherData.main.feels_like,
      humidity: weatherData.main.humidity,
      description: weatherData.weather[0].description,
      icon: `https://openweathermap.org/img/wn/${weatherData.weather[0].icon}.png`,
    };

    // 8. 가공된 데이터 반환
    return NextResponse.json(processedData, { status: 200 });
  } catch (error) {
    console.error('Route Handler에서 오류 발생:', {
      name: error instanceof Error ? error.name : 'UnknownError',
    });
    return NextResponse.json(
      { message: '서버에서 날씨 정보를 가져오는 중 오류가 발생했습니다.' },
      { status: 500 }
    );
  }
}

"use client";

import { useState } from 'react';

interface WeatherData {
  city: string;
  country: string;
  temperature: number;
  feelsLike: number;
  humidity: number;
  description: string;
  icon: string;
}

export default function WeatherPage() {
  const [city, setCity] = useState('');
  const [weather, setWeather] = useState<WeatherData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchWeather = async () => {
    if (!city.trim()) {
      setError('도시 이름을 입력해주세요.');
      return;
    }
    setLoading(true);
    setError(null);
    setWeather(null); // 이전 날씨 정보 초기화

    try {
      // Next.js Route Handler를 호출합니다.
      const query = new URLSearchParams({ city: city.trim() });
      const response = await fetch(`/api/weather?${query}`);

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.message || '날씨 정보를 가져오는 데 실패했습니다.');
      }

      const data: WeatherData = await response.json();
      setWeather(data);
    } catch (err) {
      setError((err as Error).message);
      console.error('클라이언트에서 날씨 API 호출 중 오류:', err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '20px auto', border: '1px solid #007bff', borderRadius: '10px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)', textAlign: 'center' }}>
      <h1 style={{ color: '#007bff', marginBottom: '20px' }}>날씨 정보 가져오기</h1>

      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          aria-label="도시 이름"
          placeholder="도시 이름을 입력하세요 (예: Seoul)"
          value={city}
          onChange={(e) => setCity(e.target.value)}
          style={{ padding: '10px', marginRight: '10px', border: '1px solid #ccc', borderRadius: '5px', width: '70%' }}
        />
        <button
          onClick={fetchWeather}
          disabled={loading}
          style={{ padding: '10px 15px', backgroundColor: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', opacity: loading ? 0.7 : 1 }}
        >
          {loading ? '로딩 중...' : '날씨 가져오기'}
        </button>
      </div>

      {error && (
        <p style={{ color: '#dc3545', fontWeight: 'bold', marginBottom: '15px' }}>오류: {error}</p>
      )}

      {weather && (
        <div style={{ border: '1px solid #eee', borderRadius: '8px', padding: '20px', backgroundColor: '#f9f9f9' }}>
          <h2 style={{ color: '#333', marginBottom: '10px' }}>{weather.city}, {weather.country}</h2>
          <img src={weather.icon} alt={weather.description} style={{ width: '80px', height: '80px' }} />
          <p style={{ fontSize: '1.2em', margin: '10px 0' }}>온도: {weather.temperature}°C (체감: {weather.feelsLike}°C)</p>
          <p>습도: {weather.humidity}%</p>
          <p>날씨: {weather.description}</p>
        </div>
      )}
    </div>
  );
}