외부 원문 링크
JSON 가져오기(import) vs 페치(fetch)
JSON 데이터를 로드하는 방법으로 정적 import 구문(import data from './data.json')과 동적 fetch API를 사용하는 방법이 있으며, 두 방식은 번들링, 캐싱, 로딩 시점 등 여러 측면에서 근본적으로 다르다. import는 빌드 시 번들에 포함되어 빠르지만 번들 크기를 키우고, fetch는 런타임에 비동기로 로드하여 초기 번들을 줄이지만 네트워크 비용이 발생한다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. JSON 데이터를 로드하는 방법으로 정적 import 구문(import data from './data.json')과 동적 fetch API를 사용하는 방법이 있으며, 두 방식은 번들링, 캐싱, 로딩 시점 등 여러 측면에서 근본적으로 다르다. import는 빌드 시 번들에 포함되어 빠르지만 번들 크기를 키우고, fetch는 런타임에 비동기로 로드하여 초기 번들을 줄이지만 네트워크 비용이 발생한다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. import 구문으로 JSON을 가져오면 빌드 타임에 번들에 인라인되어 추가 네트워크 요청 없이 즉시 사용 가능하다 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
import 구문으로 JSON을 가져오면 빌드 타임
import 구문으로 JSON을 가져오면 빌드 타임에 번들에 인라인되어 추가 네트워크 요청 없이 즉시 사용 가능하다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
import 구문으로 JSON을 가져오면 빌드 타임를 개념으로만 기억하고 맥락 없이 적용하면 import 구문으로 JSON을 가져오면 빌드 타임에 번들에 인라인되어 추가 네트워크 요청 없이 즉시 사용 가능하다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
fetch API는 런타임에 비동기로 데이터를 로드
fetch API는 런타임에 비동기로 데이터를 로드하므로 초기 번들 크기를 줄이지만 로딩 상태를 처리해야 한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
fetch API는 런타임에 비동기로 데이터를 로드를 개념으로만 기억하고 맥락 없이 적용하면 fetch API는 런타임에 비동기로 데이터를 로드하므로 초기 번들 크기를 줄이지만 로딩 상태를 처리해야 한다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
큰 JSON 파일은 import 시 번들 크기를 크
큰 JSON 파일은 import 시 번들 크기를 크게 늘리므로 fetch나 동적 import()를 사용하는 것이 성능에 유리하다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
큰 JSON 파일은 import 시 번들 크기를 크를 개념으로만 기억하고 맥락 없이 적용하면 큰 JSON 파일은 import 시 번들 크기를 크게 늘리므로 fetch나 동적 import()를 사용하는 것이 성능에 유리하다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
읽는 순서
- 1이론
"JSON 가져오기(import) vs 페치(fetch)"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
JSON 가져오기(import) vs 페치(fetch)에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "대용량 JSON 데이터를 웹 애플리케이션에서 효율적으로 처리하는 방법은 무엇인가요?"에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "JSON 가져오기(import) vs 페치(fetch)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 동적 import(), fetch + 캐싱, 페이지네이션, 데이터 분할 등을 생각해 보세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "JSON 가져오기(import) vs 페치(fetch)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 정적 import는 항상 로드되어 초기 번들에 포함되고, 동적 import()는 필요한 시점에 코드 스플리팅을 통해 로드됩니다. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "JSON 가져오기(import) vs 페치(fetch)에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 코드 스플리팅, 트리 쉐이킹, lazy loading, 외부 CDN 활용, 번들 분석 도구 사용 등을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"import 구문으로 JSON을 가져오면 빌드 타임"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.