2024. 10. 28. (최종 팀프로젝트(6))

1. 문제점

SyntaxError: Unexpected token '<' 

 

Next.js 프로젝트에서 공공 API로부터 JSON 데이터를 요청하는 중에 발생했는데, 찾아보니 API 요청이 성공하지 않았을 때 HTML 형식의 오류 페이지(예: "404 Not Found" 또는 "500 Internal Server Error")가 반환되면서 발생한다.

fetch 요청이 실패하여 JSON 대신 HTML 형식의 응답을 받는 경우, response.json() 메서드는 HTML 응답을 JSON으로 파싱하려고 시도하면서 SyntaxError를 발생시킨다한다.

 

2. 해결방안

 

• 응답 상태 확인: fetch 요청 후 response.ok를 사용하여 요청이 성공했는지 확인하고, 성공한 경우에만 response.json()을 호출한다.
• 에러 처리 추가: 요청 실패 시 오류 메시지를 콘솔에 출력하여 문제의 원인을 추적할 수 있도록 한다.(try-catch 블록을 사용)
• 유효한 데이터 필터링: Promise.all로 받은 모든 응답 중 null 값은 제외하고 유효한 Place 객체만 필터링하여 사용한다.

3. 적용 코드

 const allPlaces: Place[] = await Promise.all(
    contentIds.map(async (contentid) => {
      try {
        const response = await fetch(
          `https://apis.data.go.kr/B551011/KorService1/detailCommon1?MobileOS=ETC&MobileApp=AppTest&_type=json&contentId=${contentid}&contentTypeId=12&defaultYN=Y&firstImageYN=Y&areacodeYN=Y&catcodeYN=Y&addrinfoYN=Y&mapinfoYN=Y&overviewYN=Y&numOfRows=50&pageNo=1&serviceKey=${OPEN_KEY}`
        );

        //응답이 성공한건지 확인
        if (!response.ok) {
          console.error(`API 요청 실패: ${response.status} ${response.statusText}`);
          return null;
        }

        // JSON 파싱을 시도
        const json = await response.json();

        const placeData = supabaseData.find((item) => item.contentid === contentid);
        return {
          firstimage: json.response.body.items.item[0]?.firstimage ?? null,
          city: placeData?.city ?? null,
          supabaseText: placeData?.text ?? null
        };
      } catch (error) {
        console.error("JSON 파싱 또는 API 요청 중 오류 발생:", error);
        return null;
      }
    })
  );

  // null 값을 제거하여 유효한 데이터만 사용
  const validPlaces = allPlaces.filter((place): place is Place => place !== null);