GitHub Pages
스트리밍 JSON
스트리밍 JSON(Progressive JSON)은 대용량 JSON 데이터를 한 번에 파싱하지 않고 청크 단위로 점진적으로 처리하는 기술로, 서버에서 클라이언트로 데이터를 스트리밍할 때 첫 바이트 도달 시간(TTFB)을 줄이고 사용자 경험을 향상시킵니다. React의 Suspense 스트리밍과 Next.js의 서버 컴포넌트 스트리밍이 이 기술을 기반으로 동작합니다.
핵심 요약
이 아티클은 JavaScript 런타임과 언어 설계를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 스트리밍 JSON(Progressive JSON)은 대용량 JSON 데이터를 한 번에 파싱하지 않고 청크 단위로 점진적으로 처리하는 기술로, 서버에서 클라이언트로 데이터를 스트리밍할 때 첫 바이트 도달 시간(TTFB)을 줄이고 사용자 경험을 향상시킵니다. React의 Suspense 스트리밍과 Next.js의 서버 컴포넌트 스트리밍이 이 기술을 기반으로 동작합니다.
이 아티클은 JavaScript 런타임과 언어 설계를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
JavaScript 런타임과 언어 설계를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 스트리밍 JSON은 전체 응답을 기다리지 않고 부분 데이터가 도착하는 즉시 렌더링을 시작할 수 있다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
스트리밍 JSON은 전체 응답을 기다리지 않고 부분
스트리밍 JSON은 전체 응답을 기다리지 않고 부분 데이터가 도착하는 즉시 렌더링을 시작할 수 있다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
스트리밍 JSON은 전체 응답을 기다리지 않고 부분를 개념으로만 기억하고 맥락 없이 적용하면 스트리밍 JSON은 전체 응답을 기다리지 않고 부분 데이터가 도착하는 즉시 렌더링을 시작할 수 있다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
JSON
JSON.parse()는 전체 문자열이 필요하지만, 스트리밍 파서는 ReadableStream으로 청크 단위 처리가 가능하다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
JSON를 개념으로만 기억하고 맥락 없이 적용하면 JSON.parse()는 전체 문자열이 필요하지만, 스트리밍 파서는 ReadableStream으로 청크 단위 처리가 가능하다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
React의 Suspense + 서버 컴포넌트 스트
React의 Suspense + 서버 컴포넌트 스트리밍은 내부적으로 프로그레시브 JSON 직렬화 방식을 사용한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
React의 Suspense + 서버 컴포넌트 스트를 개념으로만 기억하고 맥락 없이 적용하면 React의 Suspense + 서버 컴포넌트 스트리밍은 내부적으로 프로그레시브 JSON 직렬화 방식을 사용한다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
읽는 순서
- 1이론
"스트리밍 JSON"의 멘탈 모델과 요약을 먼저 읽고, JavaScript 런타임과 언어 설계와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
스트리밍 JSON에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 JavaScript 런타임과 언어 설계와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "React Suspense와 서버 컴포넌트를 함께 사용할 때 데이터 스트리밍이 어떻게 동작하는지 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "스트리밍 JSON에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] HTML 스트리밍, Suspense 경계, 플레이스홀더 → 실제 콘텐츠 교체 메커니즘, TTFB 개선을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "스트리밍 JSON에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 메모리 사용량, TTFB, LCP 등 Core Web Vitals 관점에서 비교하고 ReadableStream 활용을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "스트리밍 JSON에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 데이터 페칭이 느린 페이지, 독립적인 데이터 소스를 가진 섹션들, 중요도별 콘텐츠 우선순위를 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"스트리밍 JSON은 전체 응답을 기다리지 않고 부분"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.