기술 블로그

hover 가 끝난 행이 한 프레임 번쩍이는 이유2026-11-06Chrome 은 CSS 배경색 전환을 GPU 합성기에서 칠하는데, 전환이 끝나는 순간 가끔 한 프레임 동안 배경만 시작 색으로 되돌아간다. 배경색 대신 덮개의 opacity 를 전환하면 사라진다.증상언호버 페이드가 다 끝나 흰색으로 돌아간 행이, 한 프레임 동안 다시 hover 파랑으로 번쩍였다. 새소식 목록은 행에 마우스를 올리면 배경이 흰색에서 파랑(#0fa3ff)으로 0.3초 페이드되고, 내리면 다시 흰색으로 0.3초 페이드되는 단순한 hover 다..row { transition: background-color 0.3s ease;}.row:hover { background: #0fa3ff; .title { color: #fff..

두 달 동안 멀쩡하던 어드민 화면이 에디터 모달 하나를 추가한 커밋에서 깨졌다. 로컬 dev 서버에서는 재현되지 않았고, 빌드 결과물에서야 보였다. 원인은 8월부터 코드에 있었고, 10월의 무관한 커밋이 그걸 드러냈다.이 글은 그 버그의 원인 두 가지, 트리거가 된 커밋, 커밋 세 개를 직접 빌드해서 추적한 과정, 그리고 "AI 가 짠 코드라서 생긴 구멍" 이 정확히 어디였는지를 정리한 기록이다. 마지막에는 같은 유형을 다시 못 만나게 하려고 넣은 정적 검사와 스냅샷 테스트를 적었다.환경: Next.js 16 (App Router, Turbopack 빌드), SCSS CSS Modules1. 증상빌드 결과물을 띄워 어드민 화면을 점검하던 중 이상을 발견했다.목록 하단의 "페이지당 표시" 드롭다운이 68p..

Dan Abramov 의 How Are Function Components Different from Classes? 를 실제 버그에 대입해 본 기록증상어드민의 포트폴리오 수정 화면에 대해 QA 단계에서 이런 이슈가 올라왔다.썸네일 이미지를 올리는 동안 타이틀을 고치면, 업로드가 끝나는 순간 타이틀이 고치기 전으로 돌아간다.썸네일과 로고를 연달아 올리면, 먼저 끝난 이미지가 사라진다.새 글 작성 화면에서는 일어나지 않는다.처음엔 직접 해 봐도 재현되지 않았다. 사내망에서 작은 이미지는 0.2초면 올라가서, 그 사이에 뭔가를 입력할 틈이 없었다. DevTools Network 탭에 Latency 15000ms 커스텀 스로틀링을 걸자 바로 재현됐다. 단서는 "업로드가 진행되는 동안 입력한 것만 사라진다"는 ..

반응형 UI를 만들다 보면 데스크톱에서는 멀쩡한데 실기기에서만 어긋나는 문제를 마주하곤 합니다. 최근 메인 페이지의 sticky 탭바가 실기기 아이폰에서만 스크롤을 한 박자 늦게 따라오는 현상을 겪었습니다. 크롬 개발자도구의 모바일 에뮬레이터에서도 재현되지 않아 원인을 좁히기가 쉽지 않았고, 가설을 두 번 세워 두 번 다 기각당한 끝에 전혀 다른 파일의 공통 mixin 한 줄에서 범인을 찾았습니다.이번 포스트에서는 그 과정을 브라우저 렌더링 엔진의 관점에서 정리합니다.1. 현상 및 재현 조건메인 페이지의 '성공 레퍼런스' 섹션에는 모바일에서 상단에 고정되는 탭바가 있습니다. 사이트 헤더(높이 60px) 바로 아래에 붙고, 스크롤로 헤더가 숨으면 그 빈자리로 올라오는 구조입니다..tabBarSticky {..

[React] 대규모 데이터 편집 시 발생하는 입력 지연 분석: Fiber 트리 순회와 브라우저 ReflowReact 환경에서 수천 건의 데이터를 동시에 다루는 편집 UI를 구현하다 보면, 단순한 최적화만으로는 해결되지 않는 성능 병목을 마주하곤 합니다. 최근 약 3,800건의 매출 데이터를 수정하는 모달에서 입력 시 약 5초간의 지연(Input Lag)이 발생했던 사례를 통해, React 내부 동작과 브라우저 렌더링 엔진의 관점에서 그 원인을 분석하고 해결 과정을 기록합니다.1. 현상 및 초기 진단규모: 약 3,822행 (행당 Input 및 SelectBox 등 10여 개의 컴포넌트 포함)문제: 특정 입력 필드에 타이핑 시 화면이 수 초간 프리징됨.초기 가설: 검색 필터링 로직의 부하 혹은 부모 컴포넌..

정산 시스템의 데이터 수정 모달에서 최대 5,000건의 행을 테이블로 보여줘야 하는 기능을 구현했습니다. 개별 체크박스 토글은 문제가 없었으나, 헤더의 '전체 선택'을 클릭할 때마다 화면이 수 초간 멈추는 성능 저하가 발생했습니다.지난 포스트에서 다룬 Set 기반 최적화와 React.memo만으로는 해결되지 않았던 이 문제를 가상화(Virtualization)를 통해 해결한 과정을 정리합니다.1. 병목 지점 분석: React.memo가 무력화되는 순간개별 체크박스 토글은 React.memo로 최적화가 가능합니다. 5,000개 행 중 상태가 변하는 행은 단 1개뿐이기 때문입니다. 하지만 '전체 선택'은 이야기가 다릅니다.전체 선택 시 발생하는 일selectedSeqs 상태가 0개에서 5,000개로 변경됩니..