Engineering
index를 key로 쓰면 왜 상태가 엉뚱한 항목에 붙을까: React key props
알림 목록 맨 위에 새 알림이 도착했더니 읽음 표시가 다른 알림으로 옮겨가는 버그를 재현하고, React가 key로 컴포넌트를 식별하는 과정을 트리 단위로 따라가 봅니다. 어떤 값을 key로 써야 하는지, key를 바꿔 상태를 초기화하는 활용법과 그 비용까지 정리했습니다.
00
전체 아티클
5개의 글Engineering
Vite는 왜 번들러를 두 개 썼고, 왜 하나로 합쳤을까
esbuild와 Rollup을 함께 쓰던 Vite가 Rolldown과 Oxc로 도구를 하나로 합친 이유를 dev/prod 불일치 재현으로 살펴보고, 실제 프로젝트를 마이그레이션해 빌드 시간이 어디에 쓰이는지 구간별로 뜯어봅니다.
11
Engineering
useSyncExternalStore로 외부 상태 tearing 막기
동시성 렌더링에서 외부 상태를 읽는 화면이 찢어지는 이유와, useSyncExternalStore가 이를 막는 방식을 실전 예시와 함께 짧게 정리했다.
00
Engineering
useEffect 완벽 가이드: 동작 원리부터 올바른 사용법까지
React useEffect의 핵심 동작 원리, 의존성 배열 비교 방식, 클로저와 스냅샷, Clean-up 함수의 실행 타이밍, 그리고 useEffect가 필요하지 않은 경우를 정리했다.
10
Engineering
AI 코딩에 확신을 더하다: TDD와 Playwright로 구축한 프론트엔드 통제권
Playwright와 TDD를 결합하여 프론트엔드의 동작 무결성과 성능 정밀함을 보장하는 고밀도 테스트 환경을 구축한 과정을 정리했다.
20