[Next.js14 강의] 14강 - 외부 API와의 연동

안녕하세요! 그레이해커 월횽입니다. 이번 강의에서는 Next.js를 사용하여 외부 API와 연동하는 방법을 배웁니다. 외부 API로부터 데이터를 가져오거나 데이터를 전송하는 방법, 그리고 Next.js의 API Routes를 활용하여 서버와 클라이언트 간의 데이터 통신을 최적화하는 방법을 다룹니다.

 

 

1. 외부 API와의 연동 개요

 

외부 API란?

외부 API(Application Programming Interface)는 외부 서비스 또는 애플리케이션과 데이터를 주고받기 위해 사용되는 인터페이스입니다. REST API, GraphQL API 등 다양한 형태가 있으며, 이를 활용하면 외부 서비스에서 데이터를 가져오거나 데이터를 전송할 수 있습니다.

 

Next.js에서의 외부 API 연동

Next.js는 클라이언트와 서버 모두에서 데이터를 가져올 수 있습니다. 클라이언트 측에서 직접 API를 호출하거나, 서버 측에서 API Routes를 통해 API를 호출하여 데이터 처리를 할 수 있습니다.

 

 

2. 클라이언트 측에서 외부 API 호출하기

 

기본 사용법

클라이언트 측에서 외부 API를 호출할 때는 fetch 또는 axios와 같은 HTTP 클라이언트 라이브러리를 사용할 수 있습니다.

// 클라이언트에서 외부 API 호출 예제 (React 컴포넌트)
import { useEffect, useState } from 'react';

export default function Weather() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY');
      const data = await response.json();
      setWeather(data);
    };

    fetchWeather();
  }, []);

  if (!weather) return <div>Loading...</div>;

  return (
    <div>
      <h1>Weather in {weather.name}</h1>
      <p>{weather.weather[0].description}</p>
      <p>Temperature: {weather.main.temp}°C</p>
    </div>
  );
}

 

위 예제에서는 OpenWeatherMap API를 호출하여 서울의 날씨 정보를 가져옵니다. API 호출 후 받은 데이터를 컴포넌트 상태에 저장하고 화면에 출력합니다.

반응형

주의점

· API Key 보안: 클라이언트 측에서 직접 API를 호출할 경우 API 키가 노출될 수 있습니다. 따라서 중요한 API 키는 서버 측에서 안전하게 관리해야 합니다.
· CORS 문제: 외부 API 호출 시 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있습니다. 이 경우 서버 측에서 API를 호출하거나, CORS 설정을 확인해야 합니다.

 

 

3. 서버 측에서 외부 API 호출하기 (API Routes 사용)

 

API Routes를 통한 외부 API 호출

API Routes를 사용하여 외부 API를 호출하면, 클라이언트 측에서 직접 API 키를 노출하지 않고 서버를 통해 안전하게 데이터를 가져올 수 있습니다.

// pages/api/weather.js
export default async function handler(req, res) {
  const { city } = req.query;
  const apiKey = process.env.OPENWEATHER_API_KEY;  // 환경 변수로 API 키 관리

  try {
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`);
    const data = await response.json();

    if (response.ok) {
      res.status(200).json(data);
    } else {
      res.status(response.status).json({ message: data.message });
    }
  } catch (error) {
    res.status(500).json({ message: 'Internal Server Error', error: error.message });
  }
}

 

위 API Route는 /api/weather?city=Seoul과 같은 형식으로 호출할 수 있으며, 서버가 외부 API와 통신하여 데이터를 반환합니다.

728x90

클라이언트에서 API Route 호출하기

클라이언트에서는 위 API Route를 호출하여 데이터를 가져올 수 있습니다.

// 클라이언트 예제
import { useEffect, useState } from 'react';

export default function WeatherComponent() {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      const response = await fetch('/api/weather?city=Seoul');
      const data = await response.json();
      setWeather(data);
    };

    fetchWeather();
  }, []);

  if (!weather) return <div>Loading...</div>;

  return (
    <div>
      <h1>Weather in {weather.name}</h1>
      <p>{weather.weather[0].description}</p>
      <p>Temperature: {weather.main.temp}°C</p>
    </div>
  );
}

 

장점

· 보안 강화: API 키를 서버에 보관하여 보안성을 높일 수 있습니다.
· CORS 문제 해결: 서버 측에서 API를 호출하기 때문에 클라이언트와 API 서버 간의 CORS 문제를 방지할 수 있습니다.
· 데이터 가공: 서버에서 받은 데이터를 필요에 따라 가공하거나 필터링할 수 있습니다.

 

 

4. 외부 API와 Next.js의 데이터 Fetching 메서드 사용하기

 

getStaticProps에서 외부 API 호출

getStaticProps를 사용하여 빌드 시점에 외부 API로부터 데이터를 가져와 정적 페이지를 생성할 수 있습니다. 이 방법은 데이터가 자주 변경되지 않는 경우에 적합합니다.

// pages/weather.js
export async function getStaticProps() {
  const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY');
  const data = await response.json();

  return {
    props: {
      weather: data,
    },
    revalidate: 3600, // 1시간마다 데이터 갱신
  };
}

export default function WeatherPage({ weather }) {
  return (
    <div>
      <h1>Weather in {weather.name}</h1>
      <p>{weather.weather[0].description}</p>
      <p>Temperature: {weather.main.temp}°C</p>
    </div>
  );
}

 

SMALL

getServerSideProps에서 외부 API 호출

getServerSideProps를 사용하여 요청 시마다 외부 API로부터 데이터를 가져옵니다. 이 방법은 항상 최신 데이터를 필요로 하는 경우에 적합합니다.

// pages/weather-ssr.js
export async function getServerSideProps() {
  const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY');
  const data = await response.json();

  return {
    props: {
      weather: data,
    },
  };
}

export default function WeatherPageSSR({ weather }) {
  return (
    <div>
      <h1>Weather in {weather.name}</h1>
      <p>{weather.weather[0].description}</p>
      <p>Temperature: {weather.main.temp}°C</p>
    </div>
  );
}

 

 

 

5. 외부 API 호출 시 고려해야 할 사항

 

· 에러 처리

외부 API를 호출할 때 발생할 수 있는 다양한 에러(네트워크 오류, 잘못된 응답 등)에 대해 적절히 처리해야 합니다.

 

· 응답 시간

외부 API의 응답 시간이 길어지면 사용자 경험이 저하될 수 있으므로, 로딩 상태 표시와 타임아웃 설정 등을 통해 UX를 개선해야 합니다.

· API Rate Limit

외부 API 사용 시 요금제에 따른 요청 제한(Rate Limit)을 확인하고, 이를 고려하여 캐싱 전략이나 요청 빈도를 조절해야 합니다.

 

이번 강의에서는 Next.js에서 외부 API와 연동하는 방법을 살펴보았습니다. 클라이언트와 서버 측에서 API를 호출하는 다양한 방법을 배우고, 보안과 성능 최적화를 위한 고려 사항들을 다루었습니다.

 

 

 

 

 

- 이전 수업 목록