첫 페인트 전 DOM 크기를 읽어 깜빡임을 막았지만 강제 동기 reflow가 렌더링을 늦췄다. useLayoutEffect와 useEffect 사이에서 reflow와 flash를 어떻게 비교할지 정리한다.
[Read More]
흰 화면은 네트워크가 아니라 렌더였다: 하던 성능 작업을 접고 방향을 바꾼 기록
네트워크가 느리다고 가정해 prefetch를 준비했지만 영상 비교에서는 흰 화면 시간이 거의 같았다. 잘못 잡은 가설을 접고 렌더링과 CPU 비용으로 방향을 바꾼 기록이다.
[Read More]
잘못 이해한 요구도 AI는 빠르게 구현한다
AI는 명확한 요구뿐 아니라 잘못 이해한 요구도 빠르게 구현한다. 화면의 증상과 실제 계약을 구분하지 못해 생긴 재작업을 통해 구현 전 확인할 질문을 정리한다.
[Read More]
평균이 빨라져도 성능 개선이 아닐 수 있다: 캐시와 이봉 분포 읽기
평균은 빨라졌지만 측정값은 빠른 실행과 느린 실행 두 무리로 갈렸다. 코드 효과를 단정하기 전에 캐시·연결 재사용·실험 조건과 원본 분포를 읽는 방법을 정리한다.
[Read More]
같은 정책, 다른 API: 화면마다 답이 달라지는 데이터 일관성 문제
같은 사용자 정책을 여러 API가 서로 다른 값과 시점으로 제공하면 화면마다 답이 달라진다. 기준 원천과 정책 소유권 없이 프론트엔드가 한쪽을 고를 때 생기는 문제를 살펴본다.
[Read More]
Feature Flag 장애가 흰 화면을 만들 때: return null 대신 실패 정책 설계하기
Feature Flag 조회 실패를 비활성 상태와 똑같이 처리하자 핵심 화면이 흰 페이지가 됐다. 로딩·실패·값 없음·비활성을 나누고 복구 가능한 화면을 남기는 실패 정책을 설계한다.
[Read More]
장애 기록은 저장으로 끝나지 않는다: 검색되고 전파되고 대응을 시작해야 한다
장애 기록은 저장됐다는 사실만으로 다음 대응을 돕지 못한다. 증상과 완화 방법으로 검색되고, 검토·전파·후속 조치까지 이어지는 완료 조건을 정리한다.
[Read More]
GitHub Actions가 멈췄다: 모든 자동화 대신 중요한 배포만 이중화하기
GitHub Actions 장애로 배포와 검증이 함께 멈췄다. 모든 워크플로를 복제하지 않고 고객 장애 복구와 운영 배포에 필요한 경로부터 이중화하는 기준을 정리한다.
[Read More]
AI와 Google Sheets로 필요한 앱 만들기: 아이 투약 기록 도구 공개
이 글에서 공개하는 도구는 보호자가 이미 의료진에게 안내받은 투약 계획을 기록하기 위한 개인용 보조 도구다.
약의 종류, 용량, 투약 간격, 휴약 여부를 판단하지 않으며 처방전과 의료진·약사의 안내를 대신하지 않는다.
[Read More]
API를 당장 바꿀 수 없다면 호출 시점을 당겨본다: prefetch라는 합법적 꼼수
프리페치는 느린 API를 빠르게 만들지 않지만 네트워크 대기를 화면 전환과 겹칠 수 있다. 캐시를 안전하게 재사용하기 위한 QueryClient, queryKey, staleTime 조건을 정리한다.
[Read More]
content-visibility: auto를 적용했더니 position: fixed가 고정되지 않았다
content-visibility: auto를 적용하자 fixed 요소가 뷰포트에 고정되지 않았다. containment가 새로운 containing block을 만드는 원인과 적용 경계를 좁힌 해결책을 정리한다.
[Read More]
동시에 처리한다는 것: AI 에이전트와 작업 규칙으로 병렬 개발하기
기능 개발, 성능 실험, 코드 리뷰를 여러 에이전트와 작업 폴더에서 병렬로 진행했다. 작업은 동시에 흐르게 하되 판단은 한 사람의 규칙을 통과하게 만든 방법을 정리한다.
[Read More]