<div id="readability-page-1" class="page"><div><div tabindex="-1" role="tooltip"><a rel="noopener follow" href="/?source=post_page---byline--41f7672647db---------------------------------------" data-discover="true"><div><img alt="한정(Han Jung)" src="https://miro.medium.com/v2/resize:fill:64:64/1*tQfG8hfW5vM4hbRVZucMrg.png" width="32" height="32" loading="lazy" data-testid="authorPhoto"></div></a></div><blockquote>원문: <a href="https://jakearchibald.com/2025/importing-vs-fetching-json/" rel="noopener ugc nofollow" target="_blank">https://jakearchibald.com/2025/importing-vs-fetching-json/</a></blockquote>올해 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with" rel="noopener ugc nofollow" target="_blank">JSON 모듈 가져오기가 새롭게 공식 기능으로 채택</a> 되었습니다. 이는 모든 브라우저 엔진에 구현되었다는 것을 의미합니다.<pre>import data from './data.json' with { type: 'json' };// 그리고… const { default: data } = await import('./data.json', { with: { type: 'json' }, });</pre>자바스크립트에 이 기능이 생긴 것은 반갑지만, 작은 규모의 데모를 제외하고는 브라우저 환경에서 이를 사용하지 않을 것 같습니다. 프런트엔드 소스 코드에서는 여전히 사용할 수 있지만, 일반적으로 브라우저에 도달하기 전에 번들링되는 경우에만 사용할 것입니다.이유는 아래와 같은 동작 차이 때문입니다.<pre>const response = await fetch('./data.json'); const data = await response.json();</pre>이런 동작 차이가 발생하는 이유는 다음과 같습니다.<h2 id="1016">에러 핸들링</h2>정적 가져오기의 경우<pre>import data from './data.json' with { type: 'json' };</pre>위 코드가 실패하면 전체 모듈 그래프를 함께 중단시킵니다. 이 때문에 서드파티 JSON과 함께 이 패턴을 사용하지 않을 것입니다. 서드파티 서비스가 실패할 경우 대체 방안(fallback)을 제공하고 싶기 때문입니다.하지만 <code>import()</code>는 정확히 이를 가능하게 합니다.<pre>try { const { default: data } = await import(url, { with: { type: 'json' }, }); } catch (error) { // 폴백 로직 }</pre>이는 꽤 좋습니다. 하지만 <code>fetch()</code> 대안은<pre>try { const response = await fetch('./data.json'); const data = await response.json(); } catch (error) { // 폴백 로직 }</pre>실패 시 훨씬 더 많은 내부 검사를 허용합니다. <code>response.status</code>가 있거나 <code>response.text()</code>를 사용할 수 있어서, JSON 파싱이 실패해도 여전히 소스를 가지고 있습니다. 이 내용이 모두에게 항상 중요하지 않을 수도 있습니다.더 큰 문제는 다음이라고 생각합니다.<h2 id="e104">캐싱과 가비지 컬렉션</h2>모듈(JS, WASM, CSS 또는 JSON)을 가져올 때, 가져온 내용은 환경(예: 페이지 또는 워커)의 생명 주기 동안 캐시됩니다. 결과가 네트워크 또는 파싱 실패인 경우에도 마찬가지입니다. 주어진 지정자(specifier)와 타입에 대한 모든 가져오기는 동일한 모듈을 반환합니다.이는 일반적으로 좋습니다. JS 모듈이 매번 동일한 객체를 반환하고, 모든 임포터(importer) 간에 상태를 공유할 수 있기 때문입니다. 하지만 다음과 같은 작업을 하는 경우<pre>const { default: results } = await import('/api/search?q=whatever', { with: { type: 'json' }, });</pre>메모리 누수가 발생합니다. 각 검색 결과 세트가 페이지의 생명 주기 동안 모듈 그래프에 남아있기 때문입니다. 이는 <code>fetch()</code>의 경우와 다릅니다. <code>fetch()</code>에서는 반환된 객체가 참조에서 벗어나면 가비지 컬렉션될 수 있습니다.다음과 같은 경우에도 동일하게 적용됩니다.<pre>let { default: largeData } = await import('/large-data.json', { with: { type: 'json' }, });const someSmallPart = largeData.slice(0, 10); largeData = null;</pre>위 코드가 <code>fetch()</code>를 사용했다면, <code>someSmallPart</code>를 제외한 데이터는 가비지 컬렉션될 수 있습니다. 하지만 <code>import()</code>를 사용하면 전체 <code>largeData</code> 객체가 페이지의 생명 주기 동안 메모리에 남아있습니다.<h2 id="01fb">JSON 모듈은 언제 사용해야 할까요?</h2>데이터의 전부 또는 대부분이 필요한 로컬 정적 JSON 리소스에 대해 JSON 모듈 가져오기를 사용하는 것이 합리적입니다. 특히 번들러가 JSON 가져오기를 이해하고 객체를 다른 모듈과 함께 번들링할 수 있기 때문입니다. 이는 상당히 편법적인 플러그인을 사용하지 않는 한 <code>fetch()</code>로는 불가능합니다.서버 코드에서는 버전 번호를 얻기 위해 <code>package.json</code>을 가져올 수 있습니다. 하지만 프런트엔드 코드에서는 이렇게 하지 않는 것이 좋습니다. 단일 값을 얻기 위해 <code>package.json</code> 전체를 번들링하는 것은 낭비이기 때문입니다. 번들러는 개별 객체 키에 대한 트리 셰이킹을 수행하지 않습니다.업데이트: Jed와 leah가 지적했듯이, 많은 번들러(최소한 esbuild, Vite, Rollup)는 비표준 JSON 가져오기 구문을 사용하면 최상위 키를 개별 내보내기로 노출합니다.<pre>// 트리 셰이킹 안 됨 import data from './package.json' assert { type: 'json' }; console.log(data.version);// 트리 셰이킹 안 됨 import data from './package.json'; console.log(data.version); // 트리 셰이킹 작동! import { version } from './package.json'; console.log(version);</pre>이는 최상위 키만 트리 셰이킹하므로, 데이터가 깊게 중첩되어 있다면 여전히 필요 이상으로 번들링하게 됩니다. 일반적으로 “페치 후 처리(fetch-and-process)” 로직을 Vite/Rollup 플러그인으로 전환하여, 런타임이 아닌 빌드 시간에 처리되도록 합니다.네이티브 JSON 가져오기 기능이 존재하는 것은 반갑지만, 이는 신중하게 사용되어야 하며 <code>fetch()</code>로 JSON을 페치하는 것을 전면적으로 대체하는 것으로 사용되어서는 안 됩니다.</div></div>

Stories by Jung Han on Medium

한정

원문: https://jakearchibald.com/2025/importing-vs-fetching-json/
올해 JSON 모듈 가져오기가 새롭게 공식 기능으로 채택 되었습니다. 이는 모든 브라우저 엔진에 구현되었다는 것을 의미합니다.
import data from './data.json' with { type: 'json' };
// 그리고…
const { default: data } = await import('./data.json', {
  with: { type: 'json' },
});
자바스크립트에 이 기능이 생긴 것은 반갑지만, 작은 규모의 데모를 제외하고는 브라우저 환경에서 이를 사용하지 않을 것 같습니다. 프런트엔드 소스 코드에서는 여전히 사용할 수 있지만, 일반적으로 브라우저에 도달하기 전에 번들링되는 경우에만 사용할 것입니다.
이유는 아래와 같은 동작 차이 때문입니다.
const response = await fetch('./data.json');
const data = await response.json();
이런 동작 차이가 발생하는 이유는 다음과 같습니다.
에러 핸들링
정적 가져오기의 경우
import data from './data.json' with { type: 'json' };
위 코드가 실패하면 전체 모듈 그래프를 함께 중단시킵니다. 이 때문에 서드파티 JSON과 함께 이 패턴을 사용하지 않을 것입니다. 서드파티 서비스가 실패할 경우 대체 방안(fallback)을 제공하고 싶기 때문입니다.
하지만 import()는 정확히 이를 가능하게 합니다.
try {
  const { default: data } = await import(url, {
    with: { type: 'json' },
  });
} catch (error) {
  // 폴백 로직
}
이는 꽤 좋습니다. 하지만 fetch() 대안은
try {
  const response = await fetch('./data.json');
  const data = await response.json();
} catch (error) {
  // 폴백 로직
}
실패 시 훨씬 더 많은 내부 검사를 허용합니다. response.status가 있거나 response.text()를 사용할 수 있어서, JSON 파싱이 실패해도 여전히 소스를 가지고 있습니다. 이 내용이 모두에게 항상 중요하지 않을 수도 있습니다.
더 큰 문제는 다음이라고 생각합니다.
캐싱과 가비지 컬렉션
모듈(JS, WASM, CSS 또는 JSON)을 가져올 때, 가져온 내용은 환경(예: 페이지 또는 워커)의 생명 주기 동안 캐시됩니다. 결과가 네트워크 또는 파싱 실패인 경우에도 마찬가지입니다. 주어진 지정자(specifier)와 타입에 대한 모든 가져오기는 동일한 모듈을 반환합니다.
이는 일반적으로 좋습니다. JS 모듈이 매번 동일한 객체를 반환하고, 모든 임포터(importer) 간에 상태를 공유할 수 있기 때문입니다. 하지만 다음과 같은 작업을 하는 경우
const { default: results } = await import('/api/search?q=whatever', {
  with: { type: 'json' },
});
메모리 누수가 발생합니다. 각 검색 결과 세트가 페이지의 생명 주기 동안 모듈 그래프에 남아있기 때문입니다. 이는 fetch()의 경우와 다릅니다. fetch()에서는 반환된 객체가 참조에서 벗어나면 가비지 컬렉션될 수 있습니다.
다음과 같은 경우에도 동일하게 적용됩니다.
let { default: largeData } = await import('/large-data.json', {
  with: { type: 'json' },
});
const someSmallPart = largeData.slice(0, 10);
largeData = null;
위 코드가 fetch()를 사용했다면, someSmallPart를 제외한 데이터는 가비지 컬렉션될 수 있습니다. 하지만 import()를 사용하면 전체 largeData 객체가 페이지의 생명 주기 동안 메모리에 남아있습니다.
JSON 모듈은 언제 사용해야 할까요?
데이터의 전부 또는 대부분이 필요한 로컬 정적 JSON 리소스에 대해 JSON 모듈 가져오기를 사용하는 것이 합리적입니다. 특히 번들러가 JSON 가져오기를 이해하고 객체를 다른 모듈과 함께 번들링할 수 있기 때문입니다. 이는 상당히 편법적인 플러그인을 사용하지 않는 한 fetch()로는 불가능합니다.
서버 코드에서는 버전 번호를 얻기 위해 package.json을 가져올 수 있습니다. 하지만 프런트엔드 코드에서는 이렇게 하지 않는 것이 좋습니다. 단일 값을 얻기 위해 package.json 전체를 번들링하는 것은 낭비이기 때문입니다. 번들러는 개별 객체 키에 대한 트리 셰이킹을 수행하지 않습니다.
업데이트: Jed와 leah가 지적했듯이, 많은 번들러(최소한 esbuild, Vite, Rollup)는 비표준 JSON 가져오기 구문을 사용하면 최상위 키를 개별 내보내기로 노출합니다.
// 트리 셰이킹 안 됨
import data from './package.json' assert { type: 'json' };
console.log(data.version);
// 트리 셰이킹 안 됨
import data from './package.json';
console.log(data.version);
// 트리 셰이킹 작동!
import { version } from './package.json';
console.log(version);
이는 최상위 키만 트리 셰이킹하므로, 데이터가 깊게 중첩되어 있다면 여전히 필요 이상으로 번들링하게 됩니다. 일반적으로 “페치 후 처리(fetch-and-process)” 로직을 Vite/Rollup 플러그인으로 전환하여, 런타임이 아닌 빌드 시간에 처리되도록 합니다.
네이티브 JSON 가져오기 기능이 존재하는 것은 반갑지만, 이는 신중하게 사용되어야 하며 fetch()로 JSON을 페치하는 것을 전면적으로 대체하는 것으로 사용되어서는 안 됩니다.

(번역) JSON 가져오기(import) vs 페치(fetch)

댓글