ECMAScript 2025에 포함될 Import Attributes, 무엇이 달라질까?

ECMAScript 2025에 포함될 Import Attributes, 무엇이 달라질까?

ECMAScript Import Attributes는 JavaScript에서 JSON, CSS, WebAssembly 같은 비(非) JavaScript 리소스를 더 쉽게 가져올 수 있도록 도와주는 기능인데요.

 

이 기능은 2024년 10월에 ECMAScript Stage 4에 도달했고, ECMAScript 2025 표준에 포함될 가능성이 높습니다.

이번 글에서는 Import Attributes가 무엇인지, 어떻게 활용할 수 있는지, 그리고 앞으로 기대되는 기능들을 정리해 보겠습니다.

---

JavaScript 모듈(ESM) 외의 리소스 가져오기

JavaScript에서는 오래전부터 JavaScript 코드가 아닌 데이터나 리소스를 모듈처럼 가져오는 방식이 존재했는데요.

대표적인 사례로는 RequireJS(2009년 출시)의 플러그인 시스템이 있습니다.

 

RequireJS에서는 JSON 데이터를 다음과 같이 가져올 수 있었습니다.

'json!./data/config.json'

 

이러한 방식은 이후 webpack의 로더(loader) 시스템에도 영향을 주었고,

CSS, WebAssembly 같은 다양한 파일을 JavaScript에서 직접 가져올 수 있도록 발전해 왔습니다.

---

비 JavaScript 리소스를 가져오는 주요 사례

Import Attributes가 필요한 대표적인 활용 사례는 다음과 같습니다.

 

✅ JSON 파일을 모듈처럼 가져오기
✅ WebAssembly 파일을 JavaScript 모듈처럼 가져오기
✅ CSS를 JavaScript에서 직접 import하여 스타일 적용하기

 

webpack의 로더(loader) 기능을 참고하면 더 다양한 활용 사례를 확인할 수 있습니다.

---

 Import Attributes란?

Import Attributes는 JSON 같은 데이터를 명확하게 가져오기 위해 도입된 새로운 문법입니다.

import configData from './config-data.json' with { type: 'json' };

그냥 .json 확장자로 구분하면 안 되나?

웹의 기본 원칙 중 하나는 파일 확장자만 보고 내용(content type)을 판단하지 않는 것입니다.

대신, 서버가 올바르게 설정되어 있다면 MIME 타입을 기반으로 데이터를 구분해야 합니다.

 

하지만 현실적으로 서버 설정이 잘못될 가능성이 있는데요.

• 외부 서버에서 JSON을 가져오는데, 악의적으로 JavaScript 코드로 바뀌는 경우
• 실수로 잘못된 MIME 타입이 설정된 경우
• 프로그래머가 예상하는 데이터 타입을 명확히 문서화할 필요가 있는 경우

이런 문제를 방지하기 위해 Import Attributes를 사용해 명확하게 JSON을 가져오도록 강제하는 것입니다.

---

Import Attributes 문법 살펴보기

 1️⃣ 기본적인 사용법 (Static Import)

import configData from './config-data.json' with { type: 'json' };

• with 키워드 뒤에 객체(Object Literal) 형태로 속성을 지정합니다.
• 현재는 속성 키(key)는 문자열일 필요 없지만, 값(value)은 반드시 문자열이어야 합니다.

잘못된 속성이나 값을 사용하면 예외(Exception)가 발생합니다.

→ 속성을 무시하면 코드 실행 방식이 바뀔 수 있기 때문입니다.

---

2️⃣ 동적 import (Dynamic Import)

동적으로 모듈을 가져올 때는 두 번째 인자로 Import Attributes를 전달하면 됩니다.

import('./data/config.json', { with: { type: 'json' } })

→ with 속성을 객체 내부에 포함하면, 향후 추가적인 옵션을 더 쉽게 확장할 수 있습니다.

---

3️⃣ Re-export (재내보내기)

다른 모듈에서 가져온 데이터를 한 번에 import & export할 때도 Import Attributes를 사용할 수 있습니다.

export { default as config } from './data/config.json' with { type: 'json' };

 

 

 Import Attributes를 활용한 새로운 기능들

1️⃣ JSON 모듈

가장 먼저 적용될 기능은 JSON을 JavaScript 모듈처럼 가져오는 것입니다.

import configData from './config-data.json' with { type: 'json' };

 

 

 2️⃣ CSS 모듈

WHATWG에서 제안한 기능으로, CSS도 JavaScript에서 모듈처럼 가져올 수 있습니다.

import styles from './styles.css' with { type: 'css' };
document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];

---

3️⃣ WebAssembly 모듈

WebAssembly 파일을 직접 import하는 기능도 논의 중인데요.

아래와 같이 웹 워커(Web Worker)를 만들 때 사용할 수도 있습니다.

new Worker('my-app.wasm', { type: 'module', with: { type: 'webassembly' } })

 

HTML에서도 다음과 같이 Import Attributes를 적용할 가능성이 있습니다.

<script src="my-app.wasm" type="module" withtype="webassembly"></script>

---

향후 추가될 가능성이 있는 기능들

1️⃣ 무시할 수 있는 속성 (Ignorable Attributes)

현재는 지원하지 않는 속성을 사용하면 예외가 발생하는데요.

향후에는 특정 속성을 무시할 수 있는 기능이 추가될 수도 있습니다.

import logo from './logo.png' with { type: 'image', 'as?': 'canvas' };

 

위 코드에서:

• as? 속성은 지원되지 않는 경우 무시됩니다.
• 지원하는 환경에서는 as: 'canvas'와 동일하게 동작합니다.

---

2️⃣ 더 다양한 타입 지원

Kris Kowal이 제안한 속성들입니다.

// `text`는 문자열(string)
import text from 'text.txt' with { type: 'text' };

// `bytes`는 Uint8Array 객체
import bytes from 'bytes.oct' with { type: 'bytes' };

// `imageUrl`은 URL 문자열(string)
import imageUrl from 'image.jpg' with { type: 'url' };

---

Import Attributes 제안의 역사

• 2019-12: 첫 제안 → 여러 속성을 지원하는 with 문법 사용
• 2020-02: 단일 속성만 지원하는 as 문법으로 변경
• 2020-07: if → assert로 변경
• 2023-01: assert → with로 변경
• 2023-10: ECMAScript Stage 4 승인

---

마무리하며

Import Attributes는 JSON뿐만 아니라 CSS, WebAssembly, 이미지, 텍스트 등 다양한 리소스를 JavaScript에서 쉽게 가져올 수 있도록 도와주는 기능입니다.

앞으로 ECMAScript 2025에서 정식으로 포함될 가능성이 높고, 이 기능이 어떤 방식으로 발전할지 기대가 됩니다!

 

---