TypeScript 타입 오류

Kim jisu·2025년 6월 27일

Debugging Note

목록 보기

29/37

🚩 이슈 개요

빌드시 다음과 같은 타입 오류가 발생했습니다.

./src/app/subscription/[id]/page.tsx:119:9
Type error: 'infra.stations.length' is possibly 'undefined'.

이 오류는 TypeScript가 infra.stations 배열이 존재하지 않을 가능성을 감지하여 발생했습니다.

✅ 변경 사항 요약 및 적용 내용

1. Null 체크 방식 개선

기존의 코드:

if (infra?.stations?.length > 0) { ... }

수정된 코드:

if (Array.isArray(infra?.stations) && infra.stations.length > 0) { ... }

➤ 적용 이유:
Array.isArray()를 사용하여 명확한 배열 유효성 검사를 수행합니다. 이를 통해 TypeScript가 stations이 확실히 배열임을 인지하고, 런타임 오류를 방지할 수 있습니다.

2. 타입 안정성 강화를 위한 타입 가드 추가

다음과 같은 재사용 가능한 타입 가드를 추가했습니다:

function isValidInfraArray<T>(data: T[] | undefined | null): data is T[] {
  return Array.isArray(data) && data.length > 0;
}

➤ 적용 이유:
이 타입 가드는 인프라 배열이 undefined, null이 아니며, 최소 하나 이상의 요소가 있는 배열임을 명확하게 타입스크립트에 전달합니다. 이를 통해 컴파일러가 data를 명확히 배열로 추론할 수 있게 됩니다.

3. 일관된 구현을 위한 적용 지점

다음과 같은 인프라 데이터 접근 지점들에 robust null 체크를 적용하였습니다.

getInfraText() 헬퍼 함수
지하철역 메타 설명 생성 로직
학교 메타 설명 생성 로직

예시 구현:

// 메타 설명 생성 예시
if (isValidInfraArray(infra.stations)) {
  const nearestStation = infra.stations.sort((a, b) => a.distance - b.distance)[0];
  descriptionParts.push(
    `인근에 ${nearestStation.name}역(${Math.round(nearestStation.distance)}m)이 위치해 있습니다`
  );
}