코딩하는 곰돌이

[TroubleShooting] 프로토타입, 디바운싱, 쓰로틀링 사례

이론이 실무를 만났을 때: 트러블슈팅 3가지 사례앞선 세 편에서 프로토타입 체인, 프로토타입 오염, 디바운싱과 쓰로틀링을 다뤘습니다. 이번 편은 조금 다릅니다. 이 개념들이 실제 프로젝트에서 어떤 문제를 만났고, 어떻게 해결로 이어졌는지 사례 중심으로 정리해보려 합니다. 개념을 안다는 것과, 문제 상황에서 그 개념을 떠올려 적용할 수 있다는 것은 다른 차원의 이야기라고 생각합니다.사례 1: 검색 자동완성이 서버를 압박하던 문제증상검색 자동완성 기능을 붙이고 나서, 백엔드 팀에서 특정 엔드포인트의 요청 수가 비정상적으로 많다는 이야기가 나왔습니다. 실제 검색 전환율에 비해 요청 수가 지나치게 많았습니다.원인 파악input 이벤트에 바로 fetch를 연결해둔 상태였습니다.searchInput.addEvent..

대규모 리스트 렌더링 성능 개선: 가상 스크롤(Virtual Scroll) 직접 구현하기"리스트에 데이터 좀 늘었다고 스크롤이 이렇게 버벅여도 되나요?" — 운영팀 문의를 받고 콘솔을 열어보니, DOM 노드 수가 12,000개를 넘어가고 있었다.🔍 문제 상황담당하던 관리자 페이지에는 거래 내역을 테이블 형태로 보여주는 화면이 있었다. 초기 설계 당시엔 페이지네이션으로 20건씩 끊어서 보여줬지만, 기획 변경으로 "스크롤하면서 계속 이어서 보고 싶다" 는 요구사항이 추가되며 무한 스크롤 방식으로 바뀌었다.문제는 데이터가 누적될수록 심각해졌다.데이터 500건: 큰 문제 없음데이터 3,000건: 스크롤 시 미세한 끊김데이터 8,000건 이상: 스크롤할 때마다 프레임이 뚝뚝 끊기고, 필터를 바꾸면 화면이 1~2..

메모리 누수 디버깅기: Chrome DevTools로 원인 찾기"페이지를 오래 켜두면 브라우저가 느려져요." — 어느 날아온 이슈, 3일간의 추적기의 시작이었다.🔍 문제 상황담당하던 대시보드 서비스에서 장시간 사용 시 브라우저 탭이 느려지고, 결국 응답 없음 상태가 된다는 제보가 들어왔다. 재현 조건은 명확했다.실시간 데이터가 갱신되는 대시보드 페이지10~15분 이상 페이지를 열어둔 채 방치탭 전환이나 스크롤 시 눈에 띄는 렉 발생처음엔 "그냥 데이터가 많아서 그런가?" 싶었지만, 새로고침 한 번으로 증상이 즉시 사라진다는 점이 마음에 걸렸다. 전형적인 메모리 누수(Memory Leak)의 냄새였다.1단계: 증상부터 정량화하기 — Performance Monitor감으로 접근하면 삽질만 늘어난다. 가장..

대규모 리스트 렌더링 성능 개선 (가상 스크롤 구현)문제 정의: 왜 10,000개의 li가 브라우저를 멈추게 하는가리스트 아이템이 100개 정도면 그냥 .map()으로 전부 렌더링해도 문제없다. 하지만 10,000개가 되면 이야기가 달라진다.function NaiveList({ items }) { return ( {items.map(item => )} );}이 코드가 느린 이유는 "JS 연산이 오래 걸려서"가 아니다. 진짜 비용은 다음 두 곳에서 발생한다.DOM 노드 개수 자체의 비용: 10,000개의 실제 DOM 노드가 존재하면, 브라우저는 스크롤이 발생할 때마다 이 노드들에 대한 Layout/Paint 계산 후보군을 유지해야 한다. 화면에 보이지 않는 9,900개의 노드도 ..

검색창에 숫자가 잘못 뜨는 버그, 원인은 내가 처음 의심한 곳이 아니었다아래 사례는 자동완성/검색 기능에서 흔히 발생하는 레이스 컨디션 패턴을 재구성한 것입니다.QA에서 올라온 티켓 제목은 단순했다."검색어를 빠르게 바꾸면 결과 개수가 이상하게 나옵니다."재현 스텝은 더 단순했다. 검색창에 "ا"를 입력하고, 바로 지운 다음 "b"를 입력. 그러면 화면에는 분명 "b"로 검색한 결과가 나와야 하는데, 가끔 "a"로 검색했을 때의 결과 개수가 잠깐 스쳐 지나가듯 보였다가 사라진다는 것이었다. "가끔"이라는 단어가 마음에 걸렸다. 재현이 100%가 아니라는 건 대부분 타이밍 문제라는 뜻이니까.처음의 오진단: 디바운스가 문제인 줄 알았다가장 먼저 의심한 건 디바운스 로직이었다. 검색 입력에 300ms 디바운스..

번들 사이즈 30% 줄인 과정 (Before/After 수치 포함)이 글은 실제 번들 최적화 작업에서 흔히 나타나는 흐름과 대표적인 수치 감소 폭을 재구성한 사례입니다. 아래 수치는 예시이며, 본인의 실제 webpack-bundle-analyzer 결과와 프로젝트 세부사항으로 교체하면 훨씬 신뢰도 높은 포트폴리오 글이 됩니다.배경: Lighthouse 점수 하락으로 시작된 조사배포 후 정기적으로 확인하던 Lighthouse Performance 점수가 몇 주에 걸쳐 조금씩 떨어지고 있었다. "기능을 추가할 때마다 스크립트도 같이 늘어나는 건 자연스러운 일"이라고 넘기기엔, Total Blocking Time과 Largest Contentful Paint 지표가 특히 모바일 환경에서 눈에 띄게 악화되고 있..

🔧 트러블슈팅 & 이슈 히스토리3D 종·횡단면 분석 마이크로프론트엔드 프로젝트***-svc3d-front-mf-crossanalysis범위운영·개발 중 발생한 주요 이슈 · 원인 · 해결 · 재발 방지작성일2026-07-09 코드베이스, Git 커밋 이력, 주석·워크어라운드 패턴을 기반으로 정리했습니다.IP · 내부 서비스명 등 민감 정보는 ████ 처리되었습니다. 📑 목차#이슈심각도01CORS · Nginx API Gateway 라우팅 불일치🔴 Critical02Qiankun CORS · Webpack Externals 의존성🔴 Critical03공유 Cesium Viewer Entity 오염🔴 Critical043D Tileset 하이라이트 누적 버그🟠 Major05SHP MultiLine..

common-api — 이슈·트러블슈팅 내역대상: 인증·권한(lx.svcauth), UserForge(lx.gygo.userdataset), 공통 인프라 목차빌드·의존성Redis·캐시보안약점 진단 대응런타임 오류·API 응답인증·권한(Auth)UserForge(사용자 맞춤 데이터셋)로컬 개발 체크리스트알려진 제약·후속 과제1. 빌드·의존성1-1. Nexus 의존성 다운로드 실패항목내용증상./gradlew compileJava 또는 bootRun 시 Maven 아티팩트 resolve 실패원인사내 Nexus(build.gradle의 192.168.211.22:8081) 접근 불가 — VPN·사내망 미연결조치VPN 연결 후 재시도. URL 변경 이력 있음(5ea8536 — MAVEN Nexus 주소 변경)예방..

cesium-gaussian-splatting 이슈 & 트러블슈팅 기록CesiumJS 위에 Gaussian Splatting을 통합하는 과정에서 실제로 겪었던 문제, 원인 분석, 적용한 해결책을 정리한 문서입니다.관련 문서: [project-technical-learning.md](./project-technical-learning.md), [gaussian-splatting-review.md](./gaussian-splatting-review.md)목차요약: 이슈 분류렌더링 & 좌표계배치 & 정합 (Alignment)라이브러리 통합빌드 & 배포운영 중 자주 겪는 증상미해결 / 구조적 한계디버깅 체크리스트1. 요약: 이슈 분류#증상원인해결 상태1splat이 떨리거나(jitter) 가우시안 위치가 어긋남E..

ml-sharp 트러블슈팅 내역Apple의 오픈소스 프로젝트 [ml-sharp](https://github.com/apple/ml-sharp)(Sharp Monocular View Synthesis)를 Windows 환경에서 직접 실행하면서 겪은 이슈와 해결 과정을 정리한 문서입니다.작성자: HYEONWOO대상 저장소: apple/ml-sharp (main 브랜치, base commit 1eaa046)실행 환경: Windows 10/11 (win32 10.0.22631), PowerShell주요 사용 CLI: sharp predict, sharp render참고: 아래 이슈들은 코드 기준(src/sharp/cli/predict.py, src/sharp/cli/render.py, src/sharp/util..