kyu-log
Suspense Query - 선언성을 대가로 지불하는 Suspend 상태
useSuspenseQuery는 코드를 선언적으로 만들지만, suspend는 결국 throw입니다. 받아 줄 경계가 없으면 화면이 사라집니다. 경계를 어느 깊이에 둘지, Next.js에서는 무엇이 달라지는지, 그래서 언제 쓸 만한지를 정리합니다.
Turbo Cache 와 Github actions/cache 로 CI 시간 -94% 단축시키기
문서 한 줄짜리 PR에도 CI가 3분 걸리던 monorepo에서 죽어 있던 cache를 살린 기록입니다. Turborepo의 그래프와 해시로 판단하고 actions/cache로 보관하는 구조를 나눠 설명하고, 무효화 범위를 시나리오로 따라갑니다.
당신의 useEffect에 이름을 붙여야 하는 이유
useEffect의 첫 인자로 화살표 함수를 넘기는 것은 React 생태계의 사실상 표준입니다. 여기에 이름을 붙이면 가독성뿐 아니라 stack trace가 달라집니다. cleanup 함수 네이밍과 ESLint로 팀에 적용하는 방법까지 다룹니다.
Compound Component 부터 Headless Pattern까지 - (3)
Compound Component의 마지막 한계인 style 종속을 Headless 패턴으로 넘습니다. Props Getter Pattern을 구현하고 두 패턴을 결합한 최종 형태를 만든 뒤, Radix UI의 내부 설계와 대조해 봅니다. 시리즈 3편입니다.
Compound Component 부터 Headless Pattern까지 - (2)
기본 Compound Component만으로 해결되지 않는 세 가지 한계를 넘는 기법을 다룹니다. state를 바깥에서 쓰는 Render Props, layout 순서를 강제하는 Slot Pattern, 그리고 각 기법의 선택 기준을 정리합니다. 시리즈 2편입니다.
Compound Component 부터 Headless Pattern까지 - (1)
props가 끝없이 늘어나는 component 설계 문제를 Compound Component Pattern으로 풉니다. Select를 직접 구현하고 같은 공식을 Accordion, Tabs, ToggleGroup에 적용하며 Context가 몇 개 필요한지까지 비교합니다. 시리즈 1편입니다.