React, Next.js, Vue, Nuxt 같은 모던 웹 프레임워크는 서로 다른 렌더링 전략 위에 만들어져 있다. 각 전략은 하나의 질문에 다르게 답한다: HTML을 어디서, 언제 생성하는가? 이 문서는 역사적 배경부터 현대의 하이브리드 접근까지 모든 렌더링 전략을 다룬다.배경: 어떻게 여기까지 왔나전통적인 MPA (Multi-Page Application)초기 웹: 모든 페이지 이동 = 서버로부터 받는 완전한 HTML 문서.사용자가 링크 클릭 → 서버가 PHP/JSP/Rails 실행 → 완성된 HTML 반환 → 브라우저 전체 새로고침단순하지만, 페이지 전환마다 화면이 깜빡였고 문서 전체를 다시 받느라 대역폭을 낭비했다.모던 SSR(React/Next.js의 서버 렌더링)은 전통적인 MPA와 다르다...

기존 Virtual DOM 글의 심화 버전입니다. 같은 기초 위에서 Virtual DOM · Fiber · Concurrent Mode 사이의 관계를 확장하고, React 15 → 16 → 18 의 진화 과정을 함께 다룹니다. 기본적으로 모던 React(16~18)를 기준으로 설명하며, 대조가 필요한 곳에서만 React 15를 끌어옵니다. 아래 1번 섹션 도입부의 "이전 VDOM과 비교"는 고전적(React 15) 사고모델이며, 정확한 모던 동작은 2번 Step 2와 7번에서 정정합니다. 1. Virtual DOM이란?실제 DOM과 달리, Virtual DOM은 메모리 상에 존재하는, DOM을 가볍게 표현한 JavaScript 객체입니다. state나 props가 바뀌면 React는 실제 DOM을 직접 ..

Next.js와 React 18+ 환경에서 SSR(Server-Side Rendering) 과 Server Component(RSC) 의 차이를 정확히 이해하는 것은 성능 최적화와 클라이언트 번들 최소화 측면에서 매우 중요하다. 많은 개발자가 혼동하는 영역이므로, 핵심 개념과 예제 코드를 중심으로 깔끔하게 정리한다. 1. SSR (Server-Side Rendering)1. 정의SSR은 클라이언트의 요청 시점마다 서버에서 HTML을 생성해 전달하는 방식이다. Next.js의 App Router 환경에서는 getServerSideProps 대신 fetch의 cache: 'no-store' 옵션을 사용하여 SSR을 구현한다. 2. 작동 방식클라이언트가 페이지(URL)를 요청한다.Next.js 서버는 해당 요..

프론트엔드 개발은 빠르게 진화한다. 과거에는 단순한 HTML, CSS, JavaScript 파일만으로 충분했지만, 이제는 수백 개의 모듈과 프레임워크, 그리고 최신 문법을 사용하는 복잡한 애플리케이션으로 발전했다. 이 변화 속에서 빌드 툴은 “코드를 실행 가능한 형태로 변환하고, 더 빠르게 피드백을 주는 것”을 목표로 발전해왔다. 1. Webpack의 등장 — 모든 리소스를 번들링하다.Webpack(2012)은 자바스크립트 생태계의 게임체인저였다. 당시 브라우저는 import / export(ESM)를 지원하지 않았기 때문에, 수십 개의 JS 모듈을 하나의 파일로 묶는 번들링 과정이 필수였다. Webpack은모듈 간 의존성 분석CSS, 이미지, 폰트까지 JS 안으로 통합Loader / Plugin으로 빌..

프론트엔드 개발을 하다 보면 import와 export, async/await, let, const 같은 문법을 자연스럽게 사용하곤 한다. 그런데 이 기능들이 언제, 왜 생겨났는지 깊이 이해하면 더 나은 코드 설계와 기술 선택을 할 수 있다. 그 중심에 바로 ECMAScript(ES) 가 있다. 1. ECMAScript란?ECMAScript는 JavaScript의 표준 사양이다. JavaScript는 브라우저, Node.js 등 다양한 환경에서 실행되지만, 그 문법과 동작 규칙을 통일하기 위해 만들어진 것이 ECMAScript이다. 이 표준은 ECMA International이라는 기관에서 관리하며, 명세 번호는 ECMA-262이다.1. ECMAScript의 역할초기 자바스크립트는 브라우저마다 동작이 달..

React, Vue, Svelte 같은 프론트엔드 개발 환경이 ESM(ECMAScript Module) 중심으로 진화하면서, 기존 테스트 툴(Jest 등)의 한계가 점점 드러나기 시작했다. 이 흐름 속에서 등장한 것이 Vite 생태계를 기반으로 한 Vitest다. 1. Vitest란?Vitest는 Vite 팀에서 공식적으로 만든 테스트 러너(Test Runner)다. Vite의 고속 번들링 및 HMR(Hot Module Replacement) 아키텍처를 그대로 활용해, 테스트 실행 속도와 개발 경험을 극대화한다.즉, “Vitest는 Vite의 빌드 엔진을 그대로 사용하는 초고속 테스트 러너다.” 2. 다른 테스트 툴과 비교항목VitestJestMocha빌드 기반Vite (ESM native)Babel /..