build 과정에서 발생한 TypeError

Byeonghyeon·2024년 2월 16일
0

어디갈래?

목록 보기
5/6

어디갈래? 1차 완성 그리고 배포....

이전에 올렸던 글에서 배포를 하려고 build를 하는 과정에서 TypeError가 발생했다고 썼었다.

TypeError: Cannot read properties of undefined (reading 'keywordCounts')

오류 메시지를 읽어보니 'keywordCounts'라는 속성을 가진 객체의 값을 읽으려고 했으나 해당 객체가 정의되지 않은 경우 발생하는 오류이다.

import React from "react";
import { AreaJsonType, Place } from "../Type";
import areaJson from "../../area.json";

type Props = {
    place: Place
}

const PlaceComponent: React.FC<Props> = (props: Props) => {
    const { place } = props;
    
    const keywordCountEntries = place && place.keywordCounts ? Object.entries(place.keywordCounts) : [];
    const areaJsonTyped = areaJson as AreaJsonType;

    

    return(
        <div className="bg-gray-100 p-4 rounded-md shadow-md bg-white">
            <p className="text-lg text-gray-700">{areaJsonTyped[place.areacode]?.name}</p>
            <p className="text-lg font-bold">{areaJsonTyped[place.areacode]?.sigungucode[place.sigungucode]}</p>
            <div className="mt-4">
                <p className="font-semibold">키워드 검색 결과</p>
                <ul>
                    {keywordCountEntries.map(([keyword, count]) => (
                        <li key={keyword} className="text-base">
                            {keyword}: {count}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

export default PlaceComponent;

keywordCounts를 사용하는 곳은 바로 여기.

그 중에서도 keywordCounts의 값을 읽는 부분은

const keywordCountEntries = Object.entries(place.keywordCounts);

이 부분이므로 아마 여기서 문제가 발생한 것 같다.

값을 읽을 때 undefined여서 문제가 발생한다면, keywordCounts가 undefined일 경우를 가정하고 코드를 작성하면 될 것 같았다.

그래서 해당 값을 읽어오기 전에

// place 객체가 없거나 keywordCounts가 없는 경우 처리
    if (!place || !place.keywordCounts) {
        return <div>Keyword counts not available</div>;
    }
    

이 부분을 추가해줬더니

PS C:\Users\Byeonghyeon Woo\Documents\GitHub\whereyouwant> npm run build

> whereyouwant@0.1.0 build
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (7/7)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization

Route (app)                              Size     First Load JS
┌ ○ /                                    19.7 kB         133 kB
├ ○ /_not-found                          882 B          85.1 kB
├ ○ /loading                             587 B          84.8 kB
└ ○ /result                              3.42 kB         111 kB
+ First Load JS shared by all            84.2 kB
  ├ chunks/69-1c1b36f52acf3924.js        28.9 kB
  ├ chunks/fd9d1056-85aab0186376662d.js  53.4 kB
  └ other shared chunks (total)          1.96 kB


○  (Static)  prerendered as static content

문제 없이 build가 완료되었다!

0개의 댓글