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 /..

React 프로젝트를 진행하다 보면 “전역 상태 관리” 문제가 등장한다. 이때 자주 쓰이는 도구가 React Context API와 Redux이다. 이번 글에서는 두 가지를 비교하고, 사용 목적과 실무 적용 방법까지 구체적으로 다루어본다. 1. React Context APIContext API는 단순 전역 상태를 공유할 때 사용한다. 예를 들어 테마(theme), 로그인 정보, 언어 설정 등, 앱 전반에서 소규모 상태를 공유할 때 적합하다. 특징React 내장 기능이므로 별도 라이브러리 설치가 필요 없다.Provider + useContext 구조로 쉽게 구현 가능하다.상태가 변경되면, 해당 Provider 하위의 모든 컴포넌트가 리렌더링될 수 있어 성능 최적화가 필요하다. (React.memo, us..

리액트에서 사이드 이펙트를 다루기 위해 자주 사용하는 훅이 useEffect와 useLayoutEffect이다. 둘 다 컴포넌트가 마운트된 후 동작하지만, 실행 시점과 사용 목적이 다르다. 1. 기본 개념훅실행 시점특징주로 사용하는 상황useEffect화면 렌더링 후비동기적으로 실행데이터 요청, 구독, 이벤트 등록 등, 화면 깜빡임이 크게 문제되지 않는 작업useLayoutEffect화면 렌더링 직전동기적으로 실행DOM 측정, 레이아웃 조정 등, 화면이 그려지기 전에 처리해야 하는 작업 핵심 포인트둘 다 마운트 후 동작하지만, useLayoutEffect는 화면 그리기 전에 실행되어 레이아웃을 수정해도 깜빡임이 발생하지 않음.useEffect는 화면 렌더링 이후 실행되므로, 화면이 먼저 그려지고 나서 사..