03. 공공API를 활용한 웹 앱 만들어보기

기능 순서

1. 사용자가 사용자등록번호 입력(클라이언트)
2. 조회 버튼 누르기(클라이언트)
3. 유효한 번호인지 체크해서 서버 응답(유효한 번호인지 체크:서버/서버요청&응답: api호출)

mock API 활용해보기

apps/web/app/api/check-biz/route.ts의 경로에
Mock API를 작성해보려고 한다.

WHY

• 실무에서 API가 완성되지 않는 경우도 있으므로

위 경로에 파일을 만들면
http://localhost:3000/api/check-biz 으로 요청을 보낼 수 있는 구조가 됨

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

export async function POST(req: NextRequest) {
    const { bizNumber } = await req.json();

    const isValid = typeof bizNumber === 'string' && bizNumber.length === 10 && bizNumber.startsWith('1');

    return NextResponse.json({
        valid: isValid,
        name: isValid ? 'test company' : '등록되지 않은 사업자',
        status: isValid ? 'active' : '폐업 또는 미등록',
    });
}

• POST(req: NextRequest) 함수
  Next.js App Router에서 사용하는 API Route 함수
  해당 파일 경로로 클라이언트에서 POST 요청을 보낼 수 있게 됨
  => 즉, 클라이언트가 보내는 요청을 처리하는 서버 코드!

• await req.json()
  클라이언트가 POST 요청으로 bizNumber 데이터를 보내면
  서버에서는 데이터 body에서 꺼내서 사용할 수 있어야하는데
  await req.json()은 body를 JSON 객체로 변환해주는 함수이고 이걸 통해서 객체 변환을 통해 bizNumber 값을 꺼냄