TypeScript 5.3의 Import Attributes로 JSON 모듈 안전하게 다루기

문제 상황

다국어 지원을 위해 JSON 파일로 번역 데이터를 관리하던 중, TypeScript 5.3 업데이트 후 import assertion 문법에서 deprecated 경고가 발생했다.

// 기존 코드 - deprecated 경고 발생
import translations from './locales/ko.json' assert { type: 'json' };

Import Attributes 문법

TypeScript 5.3부터 assert 대신 with 키워드를 사용하는 Import Attributes가 표준이 되었다.

// 변경된 코드
import translations from './locales/ko.json' with { type: 'json' };
import config from './config.json' with { type: 'json' };

tsconfig 설정

resolveJsonModule 옵션과 함께 사용하면 JSON 파일에 대한 타입 추론도 정상 작동한다.

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

적용 결과

프로젝트 내 20여 개의 JSON import를 일괄 수정했다. Vite 번들러와도 호환성 문제 없이 작동했고, 타입 체크도 정상적으로 이루어졌다.

번들 크기나 빌드 시간에는 변화가 없었지만, 표준 문법을 사용하게 되어 향후 유지보수 부담이 줄어들 것으로 예상된다.

참고사항

Next.js 14와 Vite 5 모두 Import Attributes를 지원한다. 다만 Node.js 환경에서는 20.10 이상 버전이 필요하다는 점을 확인했다.