면접에서 디자인 시스템을 어떻게 만들 거냐는 질문에 버튼·모달과 색 정의라고만 답했습니다. 사내 관리 도구의 styles.css를 다시 읽으며 뜻으로 지은 색 토큰, 원칙을 어긴 자리의 기록, @theme의 --shadow-*가 다크 모드에서 안 바뀌는 이유를 정리하고, 다시 답한다면 할 답을 적었습니다.

푸터의 방문자 수가 모든 페이지를 1분 주기 ISR로 만들고, 방문할 때마다 캐시를 무효화했습니다. 30일 동안 ISR Writes 3.7M(한도 200K), Fast Origin Transfer 29.2GB(한도 10GB)를 쓰고 팀 전체가 402로 멈췄습니다. 원인과 고친 코드, 정지를 푼 과정을 정리합니다.

useState의 초기값은 첫 렌더에서만 쓰이고, 같은 자리의 같은 컴포넌트는 리렌더될 뿐 마운트되지 않습니다. prop을 state 초기값으로 넘긴 코드가 왜 깨지는지, Fiber가 언제 재사용되는지, 클릭 한 번 동안 React와 브라우저가 어떤 순서로 움직이는지 정리합니다.

localStorage는 XSS에 취약해서 액세스 토큰을 메모리 변수에 뒀습니다. 그랬더니 새로고침할 때마다 토큰이 날라가버렸습니다...

App Router에 페이지 전환을 넣으려고 Next 16의 ViewTransition을 켰다가 다시 뺐습니다. 스냅샷이 뷰포트가 아니라 요소 전체 높이로 잡히고, 전환 중에는 스크롤이 막힙니다. 결국 key 재마운트와 CSS 애니메이션으로 돌아왔습니다.

Vite + TanStack Router로 사내 관리 도구를 스캐폴드하며 FSD를 네 레이어로 깎았습니다. 파일 기반 라우팅이 폴더 구조를 먼저 정하는 문제, 그리고 그 경계를 ESLint로 강제하려다 두 번 조용히 실패한 기록입니다.

localStorage 읽기를 useState + useEffect에서 useSyncExternalStore로 바꾸며 깜빡임을 고쳤다고 커밋에 적었습니다. headless Chrome으로 재보니 두 구현의 DOM 변화는 같았습니다. 측정 방법과, 이 훅을 쓸 진짜 이유.

같은 트래픽이 기준점에 따라 인바운드도 아웃바운드도 됩니다. 기준은 방화벽 룰이 붙은 장비이고, stateful 방화벽의 connection tracking이 응답 트래픽을 통과시키는 방식까지 정리했습니다.