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

정적 import 가 실패하면 모듈 그래프 전체가 중단 된다 — 그 모듈에 의존하는 모든 코드가 함께 죽는다. 서드파티 데이터처럼 때때로 실패하는 리소스에는 치명적이다.

// 정적 — 실패 시 전체 모듈 중단
import data from './third-party.json' with { type: 'json' };

// 동적 — 격리 가능
try {
  const { default: data } = await import(url, { with: { type: 'json' }});
} catch (e) { /* fallback */ }

// fetch — 더 풍부한 진단
try {
  const r = await fetch(url);
  if (!r.ok) handleHttp(r.status);
  const text = await r.text();        // 파싱 실패해도 raw 보존
  const data = JSON.parse(text);
} catch (e) { /* fallback */ }

fetch 는 HTTP 상태와 raw 텍스트 를 동시에 보존한다는 점에서 디버깅 가치가 높다.

import 된 모듈은 환경(페이지/워커) 수명 동안 모듈 캐시에 보관된다. 같은 specifier 의 import 는 같은 모듈을 반환한다 — 이건 보통 장점이지만, 동적 쿼리 URL 에 쓰면 함정이 된다.

// 검색마다 새 specifier — 모듈 그래프에 쌓임
const { default: results } = await import(
  `/api/search?q=${q}`,
  { with: { type: 'json' }}
);

각 검색 결과가 페이지 수명 끝까지 살아남는다. fetch 였다면 변수 참조가 끊기는 즉시 GC 된다. 동적 데이터 = fetch 가 안전한 디폴트다.

큰 JSON에서 작은 부분만 쓰고 나머지를 버리는 패턴은 fetch 만 안전하다.

// fetch — 원본 GC 가능
let data = await (await fetch('/large.json')).json();
const small = data.items.slice(0, 10);
data = null;            // 나머지 GC 가능

// import — 통째로 메모리
let { default: data } = await import('/large.json', { with: { type: 'json' }});
const small = data.items.slice(0, 10);
data = null;            // 모듈 캐시에 그대로 — GC 안 됨

특히 package.json 같은 큰 파일에서 version 한 줄만 필요한 경우 — 번들러의 최상위 키 트리쉐이킹이 받쳐주지 않으면 import 는 그대로 낭비다.

[감점 답변] '취향 차이'. [좋은 답변] 세 축으로 답한다.

1. 정적인가 동적인가 — 빌드 시점에 알 수 있는 로컬 리소스면 import, 런타임 URL/쿼리면 fetch
2. 실패 격리 — 실패가 모듈 그래프 전체를 죽여도 되면 import, 부분 fallback 이 필요하면 fetch
3. 메모리 수명 — 페이지 끝까지 메모리에 남아도 되면 import, 일회성이면 fetch

번들러의 최상위 키 트리쉐이킹이 동작하는 작은 정적 리소스 가 import 의 진짜 sweet spot 이다.

[감점 답변] 'JSON 동적이라 안 됨'. [좋은 답변] 두 축. (1) 에러: 네트워크 실패가 현재 모듈 그래프 를 죽여 fallback 이 불가능. (2) 메모리: import 된 모듈은 환경 수명 동안 캐시되므로 검색 쿼리마다 결과가 쌓여 누수. fetch 는 응답 객체가 GC 대상이라 자연스럽게 처리된다.

[감점 답변] '트리쉐이킹은 자동임'. [좋은 답변] esbuild/Vite/Rollup 은 최상위 키 만 export 로 노출해 트리쉐이킹한다 — import { version } from './package.json'. 깊게 중첩된 데이터는 여전히 통째로 번들된다. 깊은 데이터 일부만 필요하면 빌드 타임 플러그인 으로 변환하는 게 가장 깔끔하다.