Next.js에서 데이터 추출하기 !

Next.js에서 데이터를 다룰 때 어떤 식으로 내가 원하는 데이터를 추출할 수 있는지 정리하려고 한다.
우리 프론트엔드는 console.log가 참 ~ 소중하다.
물론 이것을 이용하지 않고 다른 방법이 있을 수 있으나,
내 지식의 최대한은 눈으로 데이터를 확인하는 것이다.

const jsonData = result 이 부분을 주목해주시면 될 듯 합니다 !

현재 xml2js를 통해서 xml 형식의 데이터를 json의 데이터로 변환해준 코드다.
이때의 데이터를 보면 아래 사진과 같다.

밑에 console.log를 통해서 jsonData를 확인할 수 있다.
=> 어? boxofs의 객체에 둘러싸여 있네 ?

const jsonData = result.boxofs 로 객체 접근을 시도한다.
그럼 아래 사진과 같은 데이터가 된다.

어? 객체로 또 둘러싸여 있네?
const jsonData = result.boxofs.boxof 로 객체 접근을 시도한다.
그럼 아래 사진과 같은 데이터를 얻을 수 있다.

오~ 이제 내가 얻은 데이터는 배열 형태구나 !!
=> map을 통해 각 배열의 요소를 도는 것과 동시에 그것은 또 하나의 객체이다.
그러니, prfplcnm과 seatcnt 등등 각 요소에 접근하는 코드를 작성한다.(item.mt20id) 마지막에 [0]은 배열 속 0번째 요소에 접근하는 것! 그럼 개별적 데이터를 추출할 수 있는 것이다 !!! 😃😃😃

하지만 아래 사진을 볼 수 있다시피, 에러가 난다.

그것도 internal server error!!
Internal server error가 발생하는 이유는 주로 예외가 발생하거나 처리되지 않은 오류가 있는 경우가 있기 때문이다.

그래서 코드를 이런식으로 수정해줬다.
내 전체 코드다.

import axios from "axios";
import { NextApiRequest, NextApiResponse } from "next";
import { parseString } from "xml2js";

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const kopis_key = process.env.KOPIS_KEY;
  try {
    const response = await axios.get(
      `http://kopis.or.kr/openApi/restful/boxoffice?service=${kopis_key}&ststype=week&date=20240121`
    );
    const xmlData = response.data;
    parseString(xmlData, (err, result) => {
      if (err) {
        console.log(err);
        return res.status(500).json({ error: "failed to parse XML" });
      }
      const jsonData = result?.boxofs?.boxof?.map((item) => ({
        id: item.mt20id?.[0],
        name: item.prfnm?.[0],
        img: item.poster?.[0],
        date: item.prfpd?.[0],
        place: item.area?.[0],
        genre: item.cate?.[0],
        count: item.prfdtcnt?.[0],
      }));
      if (!jsonData) {
        return res.status(500).json({ error: "data format error" });
      }
      return res.status(200).json(jsonData);
    });
  } catch (error) {
    console.log("error");
    res.status(500).json({ error: "internal server error" });
  }
}

그렇게 하니, internal server 에러는 없어졌고, 각 데이터가 잘 불러와지는 걸 확인 할 수 있다! 😃

그런데?? 자세히 보니, 사진이 출력이 안됐다.

해당 데이터를 확인해보니(http://localhost:3000/api/performances/best 처럼 내 해당 api 엔드 포인트로 접근하면 데이터 볼 수 있는거 아시죠??😙), 앞 부분에 들어가야 하는 주소가 빠진 상태로 데이터가 들어가있다.

이런식으로 코드를 수정해줬다. 😃

자 마지막 결말 !!! 😃😃😃
사진이 잘 ~ 나온다~!