React
overlay-kit
모달 열림 여부를 전역 상태로 들고 있던 코드를 await 한 줄로 바꾸며 얻은 것과 잃은 것. overlay-kit의 이벤트와 리듀서, openAsync 코어 로직을 소스로 따라가고, 재열기 동작을 직접 테스트해 문서와 어긋나는 지점까지 확인한다.
Kalyx
React headless DatePicker Kalyx를 왜 만들었고 Ark UI, React Aria, react-day-picker와 무엇이 다른지 정리했다. ISO 8601 UTC 값 모델, Intl 기반 DST 처리, timezone 속성 테스트를 다룬다.
상태 관리
프론트엔드에서 가장 까다로운 작업으로 꼽히는 상태 관리. 지역·전역·서버·폼·URL·외부·가드 7가지 범주로 상태를 분류하고, 단일 진실 공급원·불가능한 상태 제거·State Colocation 등 4가지 안목으로 도구 선택과 모델링 기준을 정리한다.
Toss Frontend Fundamentals 모의고사 2회차 리팩토링 후기
Toss Frontend Fundamentals 모의고사 2회차 회의실 예약 앱 리팩토링 경험을 공유한다. 모놀리식 컴포넌트 분리, 도메인 로직 추출, 테스트 기반 리팩토링 과정을 정리했다.
queryKey
TanStack Query의 queryKey가 어떤 원리로 동작하고 왜 인라인 배열에서 query key factory, queryOptions까지 진화해왔는지 정리한다. TkDodo 패턴과 v5 queryOptions, setQueryData 무효화를 실무 관점으로 다룬다.
에러 핸들링
React Error Boundary, try/catch, TanStack Query의 throwOnError가 각각 어디까지 책임지고 어떻게 결합하는지 정리한다. 렌더 단계 에러와 비동기 에러를 구분하고 react-error-boundary의 reset 원리도 다룬다.
React Fiber 완전 정복
React Fiber 아키텍처를 Stack Reconciler부터 Lane 우선순위, 더블 버퍼링, MessageChannel 스케줄러, Concurrent Features까지 React 소스코드 기반으로 깊이 분석한다. 프론트엔드 면접 단골 주제.
Zustand, 너 뭔데 ProviderLess 인 거야?
Zustand가 Provider 없이 상태관리를 해내는 원리를 소스코드 분석을 통해 파헤친다. React Context API와의 차이점과 모듈 스코프 기반 설계를 알아보자.