import "./foo.json" with { type: "json" }에서 type: "json"처럼 type을 명시하는 건, 단순히 JSON이라는 정보를 붙이는 것이 아니라 해당 모듈이 어떤 포맷인지 명확히 선언하여 런타임이 "이건 코드가 아니라 데이터야"라는 식으로 해석하게 만드는 중요한 의미를 지님.
✅ with { type: "json" }이 가지는 의미
1. 모듈의 타입 명시로 안전성 확보
- JavaScript는 원래
.js,.mjs등 코드 실행 가능한 파일만 import할 수 있었음. - JSON을 import하는 건 실행 불가능한 정적 데이터인데,
만약 서버가.json요청에Content-Type: application/javascript로 응답해버리면 악성 코드가 실행될 수도 있음. type: "json"을 명시하면 "이건 코드로 실행될 수 없는 정적 데이터임"이라고 선언하게 되고, JavaScript 엔진은 이를 엄격하게 검사함.
import data from "./config.json" with { type: "json" };→ type: "json"이 없으면 JSON이 아닌 다른 형식이 응답되더라도 브라우저가 실행해버릴 수 있음 → 보안 취약점
2. 파일 확장자에 의존하지 않는 웹 아키텍처 준수
.json이라고 해서 반드시 JSON 형식이라는 보장은 없음.- 웹에서는 MIME 타입(
Content-Type)이 중요하지만, 종종 서버에서 잘못 설정되기도 함. - 따라서 파일 확장자 대신 명시적으로
type으로 의도한 형식을 선언해야 신뢰성이 높아짐.
3. 정적 분석과 캐싱에도 영향을 줌
type은 모듈 캐시의 키에 포함됨. 즉, 동일한 URL이라도type이 다르면 서로 다른 모듈로 취급됨.
import config1 from './config.json' with { type: 'json' };
import config2 from './config.json' with { type: 'javascript' }; // 완전히 다른 모듈로 인식4. 앞으로 다양한 포맷을 지원하기 위한 확장성
- 현재는 JSON이 대표적이지만, 향후 CSS, HTML, WebAssembly 등의 모듈도 import 가능해질 예정이야.
- 이때도
type: "css",type: "html"등으로 명시하는 방식이 사용될 것.
import styles from './style.css' with { type: 'css' };
import doc from './template.html' with { type: 'html' };→ 모듈 시스템이 이 파일들을 "코드"가 아닌 "특정 포맷 데이터"로 처리할 수 있게 함
🔒 왜 중요한가?
- 보안 강화: 악성 스크립트 삽입 방지
- 명확성 향상: 개발자와 브라우저가 정확히 동일한 기대를 공유
- 호환성 확보: 다양한 런타임(Node.js, 브라우저, Deno 등)에서 일관된 처리
- 표준화 기반: 향후 더 많은 모듈 유형으로 확장 가능
okorion's Tech Study Blog.