모든 글

10주 전에는 구현을 통째로 AI에 맡기고 "동작하면 통과"로 판단했다. 10주 뒤에는 무엇을 보고 받아들일지가 생겼다. LCP 측정에서 내 짐작이 두 번 틀린 기록과, PR 체크리스트에는 있는데 저장소에는 없던 파일 이야기. 참여를 고민 중인 분들을 위해 시간 비용과 안 맞는 경우까지 적었다.

루프팩 10주차 회고. required에 무엇을 넣을지 "싸니까"로 정하려다 막혔다. 축을 하나 더 세우자 build가 살아남고 Lighthouse가 빠졌고, 같은 질문을 배포 쪽으로 밀었더니 CI가 원리적으로 못 보는 층이 나왔다. 거기 17초짜리 버그가 숨어 있었다.

루프팩 9주차 회고. "E2E는 비싸다"는 알겠는데 그래서 어디에 붙일지가 늘 감이었다. 30일치 이벤트 로그에서 노이즈를 거른 7,514세션을 세어 근거를 만들었더니, 빈도 1위(100%)는 버리고 7위(8.6%)를 고르는 결론이 나왔다. 그리고 그 하나가 값을 하는지, 구현을 세 번 망가뜨려 확인했다.

루프팩 8주차 테스트 회고. 단위·통합 102개와 E2E 4개가 전부 초록불이었지만, 그 테스트들이 무엇을 지키는지는 아무도 확인한 적이 없었다. 경계를 한 칸씩 옮겨보니 아무도 못 잡은 게 둘, 노린 층이 못 잡은 게 하나, 잡았는데 원인을 못 읽은 게 둘이었다.

루프팩 7주차 성능 최적화 회고. LCP 8.2초의 범인은 30초 만에 찾았는데, 그 뒤 대부분의 시간은 "이 숫자를 믿어도 되는가"에 썼다. 조건을 고정하고, 한 번에 하나씩만 바꾸고, 줄일 수 없는 지연은 화면 설계로 감당한 기록.

루프팩 5주차에서 검색·페이지 URL 상태, 서버 캐시, 장바구니 클라이언트 상태를 설계하며 계속 같은 질문 앞에 멈췄다 — 이 값을 어느 경계에서 다룰 것인가. page=0 하나가 사용자를 못 빠져나오는 에러 화면에 가두는 걸 보고, 보정 위치가 구현 디테일이 아니라 UX 설계라는 걸 알았다.

Select 3종을 로직 한 벌로 묶고 Dialog를 compound로 짜면서 두 번 같은 벽에 부딪혔다 — 무엇을 컴포넌트가 쥐고 무엇을 사용처에 넘길 것인가. headless와 compound가 자유도를 주는 축이 어떻게 달랐는지 되짚은 기록

500줄짜리 상품 목록 컴포넌트를 훅·컴포넌트로 쪼개고, URL 상태의 소유권을 뒤집고, 계층 폴더로 가르기까지 — 관심사마다 '분리'의 형태가 어떻게 달랐는지 되짚은 기록

한가득 나온 코드 냄새를 심각도로 줄 세워 무엇부터 고칠지 정한 기록

AI에게 일을 맡기는 환경 만들기 — 무엇을 규칙으로 둘지, 어떤 등급을 줄지

캘린더 라이브러리 'vue-cal' 기반 예약 현황판의 렌더링 최적화 구현기

병목 지점은 내 코드가 아닌 라이브러리 내부였다

♪ 모두 해체해버렸다 나는 써보지도 않았는데 ♪

클라이언트에서 HTML을 화면에 그려내는 브라우저 렌더링 과정과 최적화 방법을 알아봅니다.