Frontend 카테고리 (2/2)

21

프론트엔드 안티패턴 (8) — 견고함: 거짓 안정감을 만드는 것들

에러 바운더리 부재로 인한 흰 화면, catch로 에러 삼키기, as와 any가 만드는 거짓 안정감, 런타임 검증 없는 API 신뢰, 그리고 깨지는데 아무도 안 읽는 테스트.

2026-09-14

[frontend]

frontend-antipatterns-8-robustness.md

22

프론트엔드 안티패턴 (7) — CSS와 접근성: 조용히 실패하는 것들

!important가 해결이 아니라 증거인 이유, z-index 인플레이션, 마진 소유권, 그리고 div 버튼부터 포커스 관리까지 예외를 던지지 않는 실패들.

2026-09-14

[frontend]

frontend-antipatterns-7-css-and-a11y.md

23

프론트엔드 안티패턴 (6) — 번들과 경계: 트리셰이킹은 왜 실패하는가

번들을 한 번도 열어보지 않는 것에서 시작해, 트리셰이킹이 실패하는 다섯 가지 이유, 코드 분할의 잘못된 단위, use client 커트라인, 그리고 환경변수를 통한 비밀 유출까지.

2026-09-14

[frontend]

frontend-antipatterns-6-bundle-and-boundaries.md

24

프론트엔드 안티패턴 (5) — 네트워크와 실패 경로: 정상 경로만 짜고 배포하기

워터폴이 생기는 네 가지 경로, N+1 요청, 그리고 대부분의 코드에 빠져 있는 것 — 재시도, 타임아웃, 취소, 롤백. 실패 경로가 없는 코드는 완성된 것이 아니다.

2026-09-14

[frontend]

frontend-antipatterns-5-network-and-failure.md

25

프론트엔드 안티패턴 (4) — 렌더링과 성능: 병목은 대개 리렌더가 아니다

React.memo 도배와 성능 방치는 같은 병이다. 실제 병목의 순서, Core Web Vitals가 잡아내는 안티패턴, 레이아웃 스래싱과 컴포지팅, 그리고 무엇을 어떤 도구로 측정할지.

2026-09-14

[frontend]

frontend-antipatterns-4-rendering-performance.md

26

프론트엔드 안티패턴 (3) — 컴포넌트 설계: 성급한 추상화가 중복보다 비싼 이유

잘못된 추상화의 비용 곡선, God Component를 쪼개는 순서, 컴포넌트 안에서 컴포넌트를 정의할 때 입력값이 사라지는 이유, key={index}가 만드는 정체성 혼란.

2026-09-14

[frontend]

frontend-antipatterns-3-component-design.md

27

프론트엔드 안티패턴 (2) — 상태와 데이터 흐름: useEffect는 왜 계속 오용되는가

useEffect의 네 가지 오용을 해부하고, 왜 사람들이 계속 그렇게 쓰게 되는지 밝힌다. 파생 상태, props를 state로 복사, 성급한 전역화, boolean 상태 머신까지.

2026-09-14

[frontend]

frontend-antipatterns-2-state-and-data-flow.md

28

프론트엔드 안티패턴 (1) — 안티패턴을 보는 눈: 비용 곡선과 되돌리기 비용

안티패턴은 실수가 아니라 구조다. 비용 곡선, 되돌리기 비용, 지연된 비용이라는 세 축으로 판단하는 법과, 지연된 비용을 즉시 아프게 만드는 측정 장치.

2026-09-14

[frontend]

frontend-antipatterns-1-how-to-see.md

29

Suspense 경계는 어디에 그어야 하는가 — 실전 설계 기준 (번외편)

Suspense를 남용하지도, 방치하지도 않기 위한 실전 판단 기준을 정리합니다. 경계는 코드가 아니라 사용자가 화면을 읽는 구조를 따라갑니다.

2026-04-05

[frontend]

react-suspense-boundary-design.md

30

React 스트리밍 렌더링 — Suspense 경계가 응답을 쪼개는 절단선이 되기까지

RSC와 Suspense가 결합해 서버 렌더링 결과를 조각조각 스트리밍하는 방식과 Selective Hydration까지, 시리즈의 마지막 퍼즐을 맞춥니다.

2026-04-05

[frontend]

react-streaming-rendering.md

31

React Server Components — 렌더링을 어디서 할 것인가

SSR과 RSC의 차이, Server/Client Component의 경계 규칙, 그리고 children 패턴이 왜 중요한지 정리합니다.

2026-04-05

[frontend]

react-server-components.md

32

React Lane 내부 구현 — 비트마스크로 우선순위를 관리하는 법 (번외편)

React가 업데이트 우선순위를 31비트 정수 하나로 관리하는 방법과, 그 설계가 선택된 이유를 살펴봅니다.

2026-04-05

[frontend]

react-lane-internals.md

33

React Suspense — 데이터 로딩을 렌더링 시스템 안으로

Suspense가 어떤 문제를 풀고, Promise를 throw한다는 독특한 메커니즘이 동시성 렌더링과 어떻게 맞물리는지 정리합니다.

2026-04-05

[frontend]

react-suspense.md

34

React Fiber 아키텍처 — 렌더링을 멈추고, 재개하고, 버릴 수 있는 이유

React 16에서 도입된 Fiber 아키텍처가 왜 등장했고, 어떤 구조로 동시성 렌더링을 가능하게 하는지 정리합니다.

2026-04-05

[frontend]

react-fiber-architecture.md

35

React 렌더링 원리 — Virtual DOM, Reconciliation, 그리고 key

React가 UI를 어떻게 효율적으로 업데이트하는지, 그 내부 원리를 단계별로 정리합니다.

2026-04-05

[frontend]

react-rendering-principles.md