55. Open API 사용하며 발생한 문제

Mission: Open API 사용하며 발생한 문제 정리

📌 문제

1. useParams를 사용하여 URL 파라미터 값 가져오기

• 오류 코드:
  RouteParams' 형식이 'string | Record<string, string | undefined>' 제약 조건을 만족하지 않습니다.
  
  
• 원인:
  useParams로부터 반환되는 값의 타입이 정확하지 않아서 발생하는 오류
  
  
• 해결 방안:
  useParams의 반환 타입을 명시해주거나 타입 단언을 사용하여 타입을 명시해야 한다.
  
  

import { useParams } from 'react-router-dom';
const { id } = useParams<{ id: string }>();

2. 데이터 필터링 및 사용

• 오류 코드:
  This comparison appears to be unintentional because the types 'number' and 'string | undefined' have no overlap.
  
  
• 원인:
  숫자 타입과 'string | undefined' 타입이 겹치지 않기 때문에 발생하는 오류
  
  
• 해결 방안:
  URL 파라미터 값을 숫자로 변환하여 비교하거나, 값이 정의되지 않은 경우에 대한 처리를 추가해야 한다.
  
  

const filteredPost = data?.filter((post: AnimalShelter) => post.PBLANC_IDNTFY_NO === Number(id));

3. Kakao 지도 API
오류:
'kakao' 속성이 'Window & typeof globalThis' 형식에 없다는 오류가 발생

원인:
kakao 지도 API가 전역(window) 객체에 등록되어야 사용할 수 있기 때문이다.

해결 방안:
declare global 구문을 사용하여 Window 인터페이스에 kakao 속성을 추가해야 한다.

declare global {
  interface Window {
    kakao: any;
  }
}