이제 JSON 모듈 스크립트를 기준으로 새로 사용할 수 있습니다.

사용할 수 있습니다. keywords: docType:Blog,category:Baseline2025,language:JavaScript

Thomas Steiner

게시일: 2025년 6월 18일

JavaScript 모듈에서 JSON 파일을 가져오려면 이전에는 일반 import 문을 사용하거나 fetch()로 파일을 다운로드한 다음 Response.json()를 호출할 수 있도록 JavaScript에 JSON을 삽입하는 등의 작업을 거쳐야 했습니다. 이 문제는 이제 JSON 모듈 스크립트 및 가져오기 속성 덕분에 모든 최신 브라우저에서 해결되었습니다.

다음 샘플은 JavaScript 모듈 스크립트 내부에서 JSON 모듈 스크립트를 가져오는 방법을 보여줍니다.

import astronomyPictureOfTheDay from "./apod.json" with { type: "json" };

const {explanation, title, url} = astronomyPictureOfTheDay;

document.querySelector('h2').textContent = title;
document.querySelector('figcaption').textContent = explanation;
Object.assign(document.querySelector('img'), { src: url, alt: title });

JSON.parse()는 필요하지 않으며 JSON은 import 바로 뒤에서 파싱되어 사용할 준비가 됩니다. 이는 브라우저가 가져오기 속성 with { type: "json" }로 선언한 JSON을 처리하고 있음을 미리 알고 있기 때문에 작동합니다.

이전 목록의 코드를 사용하는 JSON 모듈 가져오기 실시간 데모를 확인하세요.

모듈 스크립트의 MIME 유형 확인은 엄격합니다. JSON 모듈 스크립트 가져오기에 성공하려면 HTTP 응답에 JSON MIME 유형(예: Content-Type: text/json)이 있어야 합니다.

문이 포함된 with { type: "json" } 부분이 생략되면 브라우저는 의도가 JavaScript 모듈 스크립트를 가져오는 것이라고 가정하며, HTTP 응답에 JavaScript MIME 유형이 아닌 MIME 유형이 있으면 가져오기에 실패합니다.

HTML 사양에서 JSON 모듈 스크립트 처리에 관해 자세히 알아보세요.