01
React의 탄생 3편 — 치른 대가와 그 이후의 진화
JSX를 향한 초기 반발과 Pete Hunt의 반론, 그리고 다시 그리는 비용·로직 재사용·동기 렌더링·상태 관리·SSR·세밀한 갱신이라는 여섯 가지 대가와 그에 대한 대응의 연표.
2026-09-17
[frontend]
why-react-was-born-03-cost-and-after.md
blog92@web:~$ grep -rl "#React" posts/
#React
이 태그가 달린 글
29 ENTRIES
tags/react/
ALL TAGS · 372
29 ENTRIES · PAGE 01/02SORTED BY DATE 내림차순DATE 내림차순 누르면 오래된순으로 정렬
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
프론트엔드 디자인 패턴 (5) — 상태의 4분류와 반응성 엔진 3종
서버/클라이언트/폼/URL 네 가지 상태를 가르는 실전 판단 기준과, VDOM diff·Proxy 추적·Signal 그래프 세 반응성 엔진의 내부 동작 비교.
2026-09-14
[frontend]
frontend-design-patterns-5-state-and-reactivity.md
15
프론트엔드 디자인 패턴 (3) — Headless 컴포넌트: 제어권을 설계한다
prop 15개짜리 드롭다운을 Compound Component → Control Props → State Reducer → Headless로 단계적으로 리팩터링하며 제어권 스펙트럼을 직접 만들어 본다.
2026-09-14
[frontend]
frontend-design-patterns-3-headless-design.md
16
프론트엔드 디자인 패턴 (2) — 로직 재사용의 진화: Mixin에서 Hooks까지
하나의 요구사항을 Mixin, HOC, Render Props, Hooks 네 가지로 직접 리팩터링하며 각 전환의 이유를 체감한다. Hooks 내부의 연결 리스트와 의존성 배열의 정체까지.
2026-09-14
[frontend]
frontend-design-patterns-2-logic-reuse.md
17
프론트엔드 디자인 패턴 (1) — 전체 지도: 상태는 어디에 사는가
jQuery부터 RSC까지, 프론트엔드 패턴의 역사를 하나의 질문으로 관통한다 — 상태는 어디에 살고, 변경은 어떻게 전파되며, 누가 그것을 소유하는가.
2026-09-14
[frontend]
frontend-design-patterns-1-overview.md
18
프론트엔드 안티패턴 (8) — 견고함: 거짓 안정감을 만드는 것들
에러 바운더리 부재로 인한 흰 화면, catch로 에러 삼키기, as와 any가 만드는 거짓 안정감, 런타임 검증 없는 API 신뢰, 그리고 깨지는데 아무도 안 읽는 테스트.
2026-09-14
[frontend]
frontend-antipatterns-8-robustness.md
19
프론트엔드 안티패턴 (5) — 네트워크와 실패 경로: 정상 경로만 짜고 배포하기
워터폴이 생기는 네 가지 경로, N+1 요청, 그리고 대부분의 코드에 빠져 있는 것 — 재시도, 타임아웃, 취소, 롤백. 실패 경로가 없는 코드는 완성된 것이 아니다.
2026-09-14
[frontend]
frontend-antipatterns-5-network-and-failure.md
20
프론트엔드 안티패턴 (4) — 렌더링과 성능: 병목은 대개 리렌더가 아니다
React.memo 도배와 성능 방치는 같은 병이다. 실제 병목의 순서, Core Web Vitals가 잡아내는 안티패턴, 레이아웃 스래싱과 컴포지팅, 그리고 무엇을 어떤 도구로 측정할지.
2026-09-14
[frontend]
frontend-antipatterns-4-rendering-performance.md