API 종류

1. 네이버 서치 API

네이버 개발자센터
애플리케이션 등록 -> API Key를 줌.(참고 블로그)
호출한 데이터를 보니 내용이 우리 프로젝트에서 필요한 내용이 아닌 것을 확인함.

2. 한국어기초사전

한국어기초사전 오픈 API
json 형식은 없고 xml형식으로만 데이터를 줌.
xml로 호출받아 json으로 바꿔볼까도 했지만(xml2js), 팀에 내용 공유했더니 json으로 받을 수 있는 다른 API를 먼저 찾아보라고 하셨다.

3. 표준국어대사전

표준국어대사전 오픈 API
json 형식으로도 주지만,
API 문서에 multimedia - 5 가 발음 소리라고 되어있는데 아무리 호출해도 mp3 오디오파일을 주지 않았다...

웹 크롤링(selenium)을 통해 각 검색어에 대한 내용 페이지에서 mp3링크를 가져와 뿌려주는 방법도 있었지만, 또 새로운 기술을 공부해서 랜덤 문제를 만든다? 주어진 기간안에 MVP 기능구현을 마칠 수 있을까란 걱정이 들었다.
더 다양한 방법을 생각해보고 다른 방법으로 결정했다.

API 호출

Next.js 14버전 - route handlers 공식문서 참고

// app/api/stdict/route.ts
import { NextRequest, NextResponse } from "next/server";

// 표준국어대사전 데이터 요청(json)
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const query = searchParams.get("query");
  console.log("query", query);

  const params = new URLSearchParams({
    key: process.env.NEXT_PUBLIC_STDICT_API_KEY!, // 환경변수에 타입 단언 추가
    q: query ?? "", // null 병합 연산자로 기본값 처리
    req_type: "json"
  });
  console.log("params", params);

  const url = `https://stdict.korean.go.kr/api/search.do?${params}`;
  console.log(url);

  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log("data", data);

    return NextResponse.json(data);
  } catch (error) {
    return console.error("실패:", error);
  }
}

// app/(mobile)/challenge/page.tsx
"use client";

import { useEffect } from "react";

const ChallengePage = () => {
  const getWordData = async () => {
    const data = await fetch(`/api/stdict?query=바보`);
    const result = await data?.json();
    console.log("result", result);
    return result;
  };

  useEffect(() => {
    getWordData();
  }, []);

  return <div>page</div>;
};

export default ChallengePage;

필요로 하는 발음 오디오를 주지 않아, 사전 API를 불러오지 않고 OpenAI API를 호출해서 랜덤 문제를 만들고 발음은 Speech Synthesis API를 사용해서 들려주기로 했다..🥲