Frontend 카테고리

01

React의 탄생 3편 — 치른 대가와 그 이후의 진화

JSX를 향한 초기 반발과 Pete Hunt의 반론, 그리고 다시 그리는 비용·로직 재사용·동기 렌더링·상태 관리·SSR·세밀한 갱신이라는 여섯 가지 대가와 그에 대한 대응의 연표.

2026-09-17

[frontend]

why-react-was-born-03-cost-and-after.md

02

React의 탄생 2편 — "전부 다시 그린다"는 발상과 Virtual DOM

Facebook의 읽지 않은 메시지 버그와 XHP, Jordan Walke의 질문에서 출발해 UI = f(state), 미니 Virtual DOM 구현, Reconciliation의 두 가정, 그리고 JSX·단방향 흐름 같은 함께 온 설계 결정까지.

2026-09-17

[frontend]

why-react-was-born-02-the-idea.md

03

React의 탄생 1편 — 서버 렌더링부터 MV* 프레임워크까지

서버가 HTML 전체를 다시 그리던 시대, 명령형 DOM API, AJAX와 jQuery가 남긴 네 가지 대가, 그리고 Backbone·Knockout·AngularJS가 갈라진 지점까지.

2026-09-17

[frontend]

why-react-was-born-01-before-react.md

04

Next.js는 무엇이 불편해서 만들어졌나

CSR의 구조적 한계와 수제 SSR의 고통, 그리고 Next.js가 그 문제를 규칙(convention)으로 해결한 과정

2026-09-16

[frontend]

why-nextjs-was-born.md

05

효율적인 React 8편 — 측정하고 유지하기: 판단을 기계에 맡기고, 시리즈를 정리한다

한 번 빠르게 만든 코드는 다음 PR에서 다시 느려진다. 실제 사용자 환경의 측정, 성능 예산을 CI에 거는 법, lint로 판단을 기계화하는 법, 리뷰 질문, 기존 코드베이스에 적용하는 순서, 그리고 시리즈 총정리.

2026-09-15

[frontend]

efficient-react-8-measure-and-sustain.md

06

효율적인 React 7편 — 경계와 번들: JS가 도착하기까지

JS는 받고, 해석하고, 실행하고, hydration해야 쓸모가 생긴다. 'use client' 경계가 번들을 결정하는 방식, 코드 분할 단위, import 습관, 서드파티 스크립트, 이미지·폰트, hydration 불일치.

2026-09-15

[frontend]

efficient-react-7-boundaries-and-bundle.md

07

효율적인 React 6편 — 반응성과 우선순위: 빠르게 만들 수 없으면 먼저 반응한다

계산을 더 줄일 수 없을 때 남는 방법은 우선순위다. INP의 세 구간, useTransition과 useDeferredValue의 선택 기준, 디바운스와의 차이, 긴 작업 쪼개기, 가상화의 대가, Activity로 화면 상태 보존하기.

2026-09-15

[frontend]

efficient-react-6-responsiveness.md

08

효율적인 React 5편 — 데이터 흐름 설계: 도착 순서를 트리와 함께 설계한다

사용자가 느끼는 지연의 대부분은 렌더가 아니라 데이터 도착 순서에서 생긴다. Waterfall이 생기는 세 경로, 요청을 위에서 병렬로 시작하는 법, Suspense 경계 배치 기준, 서버 컴포넌트와 클라이언트 캐시의 역할 분담, Actions와 useOptimistic.

2026-09-15

[frontend]

efficient-react-5-data-flow.md

09

효율적인 React 4편 — Effect 없이 생각하기: 동기화와 이벤트를 구분하는 법

useEffect는 '무언가 바뀌면 실행'하는 도구가 아니라 '화면이 존재하는 동안 외부 시스템과 맞추는' 도구다. Effect가 필요 없는 일곱 가지 경우, 필요한 다섯 가지 경우, 의존성 배열을 줄이는 법, useEffectEvent.

2026-09-15

[frontend]

efficient-react-4-effects.md

10

효율적인 React 3편 — 구조로 렌더 범위 줄이기: memo보다 먼저 할 일

렌더 반경을 사후에 막는 memo 대신, 반경이 처음부터 넓어지지 않게 하는 네 가지 구조 기법. 컴포넌트 정체성 규칙과 React Compiler가 바꾼 것, 바꾸지 못한 것.

2026-09-15

[frontend]

efficient-react-3-render-scope.md

11

효율적인 React 2편 — 상태 설계: 적게, 올바른 자리에, 불가능한 조합 없이

state는 렌더의 원인이자 버그의 출처다. 최소 상태를 가려내는 세 질문, 파생값 계산, 상태 5분류와 각자의 자리, Colocation, 불가능한 상태를 타입으로 막는 법.

2026-09-15

[frontend]

efficient-react-2-state-design.md

12

효율적인 React 1편 — 비용 모델: React는 무엇에 비용을 쓰는가

렌더를 일으키는 원인 세 가지, 렌더가 전파되는 규칙, 전파가 멈추는 두 조건. 최적화 API를 꺼내기 전에 알아야 할 React의 비용 구조를 정리한다.

2026-09-15

[frontend]

efficient-react-1-cost-model.md

13

프론트엔드 디자인 패턴 (7) — GoF 23개의 운명: 생존, 변형, 소멸

GoF 패턴 23개가 실제 프론트엔드 라이브러리 코드에서 어떤 모습으로 살아있는지 추적하고, 사라진 것들은 왜 사라졌는지 밝힌다. 시리즈 완결.

2026-09-14

[frontend]

frontend-design-patterns-7-gof-in-frontend.md

14

프론트엔드 디자인 패턴 (6) — 폴더 구조는 의존성 규칙이다: FSD와 기계적 강제

폴더 구조 논쟁을 의존성 규칙 논쟁으로 환원한다. FSD 레이어 설계, 공개 API, 그리고 ESLint와 dependency-cruiser로 그 규칙을 CI에서 강제하는 법.

2026-09-14

[frontend]

frontend-design-patterns-6-architecture-fsd.md

15

프론트엔드 디자인 패턴 (5) — 상태의 4분류와 반응성 엔진 3종

서버/클라이언트/폼/URL 네 가지 상태를 가르는 실전 판단 기준과, VDOM diff·Proxy 추적·Signal 그래프 세 반응성 엔진의 내부 동작 비교.

2026-09-14

[frontend]

frontend-design-patterns-5-state-and-reactivity.md

16

프론트엔드 디자인 패턴 (4) — Redux를 밑바닥부터: 타임트래블은 왜 공짜인가

40줄짜리 createStore를 직접 구현하며 구독 메커니즘, 미들웨어 체인(compose), Command 패턴, 타임트래블이 설계의 필연적 결과인 이유를 확인한다.

2026-09-14

[frontend]

frontend-design-patterns-4-redux-internals.md

17

프론트엔드 디자인 패턴 (3) — Headless 컴포넌트: 제어권을 설계한다

prop 15개짜리 드롭다운을 Compound Component → Control Props → State Reducer → Headless로 단계적으로 리팩터링하며 제어권 스펙트럼을 직접 만들어 본다.

2026-09-14

[frontend]

frontend-design-patterns-3-headless-design.md

18

프론트엔드 디자인 패턴 (2) — 로직 재사용의 진화: Mixin에서 Hooks까지

하나의 요구사항을 Mixin, HOC, Render Props, Hooks 네 가지로 직접 리팩터링하며 각 전환의 이유를 체감한다. Hooks 내부의 연결 리스트와 의존성 배열의 정체까지.

2026-09-14

[frontend]

frontend-design-patterns-2-logic-reuse.md

19

프론트엔드 디자인 패턴 (1) — 전체 지도: 상태는 어디에 사는가

jQuery부터 RSC까지, 프론트엔드 패턴의 역사를 하나의 질문으로 관통한다 — 상태는 어디에 살고, 변경은 어떻게 전파되며, 누가 그것을 소유하는가.

2026-09-14

[frontend]

frontend-design-patterns-1-overview.md

20

프론트엔드 안티패턴 (9) — 조직과 프로세스: 안티패턴을 생산하는 공장

Cargo Cult, 이력서 주도 개발, 임시 코드의 영속성, 리팩터링 예산 부재. 코드 안에 없지만 코드를 만드는 안티패턴들과 시리즈 전체 정리.

2026-09-14

[frontend]

frontend-antipatterns-9-organization.md