이전에 올렸던 글에서 배포를 하려고 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가 완료되었다!