[맛길] API Routes를 이용한 API 구축

지난번에 Youtube Data API를 사용해 열심히 JSON 데이터를 만들었습니다.

처음 사용해 보는 API다 보니 공식문서를 여러 번 읽는 것도 힘들었지만, 이제 빛을 볼 시간입니다🙌🙌🙌

 

프로젝트에 JSON 데이터를 추가하고 사용해볼게요.

youtube 영상 데이터 추가

 

맛길 프로젝트의 기획 포스팅을 보지 않으셨다면, 왜 프로젝트에 JSON 데이터를 일일이 추가하는지 의문이 드실 수 있겠네요😅😅

 

이번 프로젝트는 CRUD나 로그인 기능을 제외했기 때문에 firebase나 supabase  같은 실시간 DB 서버를 사용하는 것은 조금 과한 것 같아요.

 

그래서 저는 Next.js에서 지원하는 API Routes를 사용해 볼 겁니다.

API Routes는 Next.js에서 Serverless API Endpoint를 만들 수 있게 해주는 기능이라고 하는데요.

 

글로만 보면 무슨 말인지 잘 모르겠으니 직접 확인해 보겠습니다‼️ 

 

💻 API Routes를 활용한 공용 API 구축

api routes 폴더 구조

 

폴더 구조는 위에 보시는 사진처럼 작업했어요.

Serverless API Endpoint를 만들 수 있게 해주는 기능이라고 하는데 코드를 통해 알아봐야겠죠🤔🤔

import path from 'path';
import { promises as fs } from 'fs';
import { RawYoutubeData, YoutubeData } from '@/app/types/youtube';

export async function GET(request: Request): Promise<Response> {
  try {
    // JSON 파일 경로 설정
    // 'data/seongsigyeong.json' 파일의 경로를 생성
    const filePath = path.join(process.cwd(), 'data', 'seongsigyeong.json');

    // 파일 읽기
    const fileContents = await fs.readFile(filePath, 'utf-8');

    // JSON 파싱
    // JSON 데이터를 RawYoutubeData[] 타입의 JavaScript 객체로 변환
    const rawData: RawYoutubeData[] = JSON.parse(fileContents);

    // rawData를 순회하며 필요한 속성만 추출하여 새로운 배열 반환
    const data: YoutubeData[] = rawData.map((item) => ({
      id: item.id,
      position: item.snippet.position,
      title: item.snippet.title,
      thumbnailUrl: item.snippet.thumbnails.high.url,
    }));

    // 클라이언트에서 'limit' 파라미터를 전달받아 데이터 개수 제한 설정
    const url = new URL(request.url);
    const limitParam = url.searchParams.get('limit');
    const limit = limitParam ? parseInt(limitParam, 10) : data.length;

    const limitedData = data.slice(0, limit);
	
    // 성공 응답 반환
    // 제한된 데이터를 JSON 형태로 응답하며, HTTP 상태 코드는 200으로 설정합니다.
    return new Response(JSON.stringify({ success: true, lists: limitedData }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (error) {
    // 에러 처리
    // 에러 메시지 출력하며, HTTP 상태 코드를 500 (서버 오류)로 설정
    console.error('데이터를 받아오는 중 에러가 발생했습니다:', error);
    return new Response(
      JSON.stringify({ success: false, message: '데이터 요청 실패' }),
      {
        status: 500,
        headers: { 'Content-Type': 'application/json' },
      },
    );
  }
}

 

Next.js 공식 문서나 다른 글들을 찾아보니 함수 이름을 handler를 많이 사용하는데, 저는 역할을 명확하게 나타내기 위해 HTTP Method를 이름으로 사용했어요😊

 

limit 파라미터는 서버 사이드에서 화면에 보여줄 데이터의 개수를 제한하기 위해서 설정했어요.
API 설계❓를 처음해보다 보니 일단 개수를 제한하는 파라미터만 추가했지만 추후 작업을 통해 더 많은 기능을 추가해 보겠습니다😊😊

✨ 데이터 요청

API도 완성했으니 위에서 정의한 Endpoint에 데이터를 요청해 봐야겠죠👀

import axios from '@/app/lib/instance';
import ListContainer from '@/app/components/lists/ListContainer';

async function page() {
  const {
    data: { lists },
  } = await axios.get('ssg');

  return <ListContainer lists={lists} />;
}

export default page;

데이터 요청 화면

SSR (Server Side Rendering)

 

데이터 요청에 성공했어요!!!

SSR(Server Side Rendering)도 잘 동작하네요👍

 

 

프로젝트를 시작하려고 기획할 때마다 db가 없어서 고민이었는데 이제 API Routes를 이용해 간단한 서버 정도는 직접 만들어서 사용하면 되겠네요.

 

API Routes가 serverless function이라 실시간 통신 같은 live connection에는 적절하지 않다는 점은 조금 아쉬워요😂

 

 

[맛길] 데이터 채우기 - Youtube Data API

 

[맛길] 프로젝트 주제 및 기술 스택 선정