코딩하는 곰돌이

들어가며tsc 한 줄이면 타입스크립트 코드가 자바스크립트로 바뀐다. 그런데 언젠가부터 이 명령어가 점점 느려지기 시작했다. 처음엔 5초, 나중엔 40초 넘게 걸리는 빌드를 보면서 "타입스크립트는 원래 느린 언어인가 보다" 하고 그냥 넘어갔었다.그러다 CI 파이프라인에서 빌드 시간이 병목이 되면서 제대로 파고들 수밖에 없었다. 알고 보니 문제는 언어 자체가 아니라, 타입 체킹과 코드 변환(트랜스파일)을 하나의 프로세스가 전부 떠맡는 기본 설정 때문이었다. 이 글은 그 과정에서 정리한 TypeScript 빌드 파이프라인의 동작 원리와, 빌드를 빠르게 만드는 방법들을 다룬다.1. tsc가 하는 두 가지 일 — 타입 체킹과 트랜스파일tsc를 실행하면 내부적으로는 크게 구분되는 두 가지 작업이 함께 일어난다.소스..

들어가며Promise.race로 API 타임아웃을 구현하는 코드는 여러 번 써봤다. Promise.allSettled로 여러 요청을 동시에 보내고 실패한 것만 골라내는 코드도 익숙하다. 그런데 정작 "이 두 메서드가 내부적으로 어떻게 동작하길래 이런 결과가 나오는가"라는 질문을 받으면 말문이 막혔다.사용법은 아는데 원리는 모르는 상태. 이런 지점을 가장 확실하게 메우는 방법은 직접 구현해보는 것이다. 이 글은 Polyfill이 왜 필요한지부터 시작해서, Promise.race와 Promise.allSettled를 직접 만들어보고, 그 과정에서 왜 특정 최신 스펙 API를 도입하지 못하고 있는 프로젝트들이 여전히 Polyfill에 의존하는지를 정리한 기록이다.1. Polyfill이란 무엇이고, 왜 여전히 ..

들어가며메이저 버전 업그레이드 공지가 뜨면 늘 하는 고민이 있다. "지금 당장 옮겨야 하나, 아니면 좀 더 지켜볼까." React 19도 마찬가지였다. 릴리즈 노트를 처음 훑어봤을 때는 use 훅이나 Actions 같은 개념들이 매력적으로 보였지만, 실제로 우리 프로젝트에 들어왔을 때 어떤 코드가 사라지고 어떤 코드가 새로 생기는지는 직접 옮겨보기 전까진 감이 안 왔다.이 글은 사이드 프로젝트 하나와 팀 프로젝트의 일부 기능을 React 19로 옮기면서 실제로 써본 기능들, 기대와 달랐던 부분, 그리고 마이그레이션 과정에서 부딪힌 문제들을 정리한 기록이다.1. Actions — "로딩 상태 관리 코드"가 사라졌다1-1. 이전에는 이렇게 짰다React 18까지 폼을 제출하는 로직을 짜면, 로딩/에러/성공 ..

들어가며"이 애니메이션 왜 이렇게 뚝뚝 끊겨요?"라는 질문을 받았을 때, 처음엔 requestAnimationFrame으로 바꾸면 되겠지 하고 단순하게 접근했다. 실제로 적용해보니 나아지긴 했지만 완전히 매끄럽지는 않았다. 그때 깨달았다. 나는 requestAnimationFrame이 "언제, 왜" 좋은지는 모른 채 "애니메이션엔 이거 쓰는 거다"라고 외워서 쓰고 있었다는 걸.결국 문제를 제대로 풀려면 브라우저가 화면 한 프레임을 그리기까지 내부적으로 어떤 단계를 거치는지, 그리고 그 사이에서 자바스크립트 코드가 언제 끼어들 수 있는지를 이해해야 했다. 이 글은 그 과정에서 정리한 내용이다.1. 브라우저는 어떻게 픽셀을 그리는가 — 렌더링 파이프라인브라우저가 HTML/CSS/JS를 받아서 실제 화면의 픽..

들어가며npm run build 한 줄이면 끝나는 세상이다. 그래서 오히려 아무도 그 안에서 무슨 일이 일어나는지 궁금해하지 않는다. 나도 그랬다. Webpack 설정 파일에 loader와 plugin을 이름만 보고 복붙해 넣던 시절이 있었다.전환점은 빌드 시간이 8분을 넘기던 프로젝트를 최적화해달라는 요청을 받았을 때였다. webpack-bundle-analyzer를 열어봐도, 뭘 어떻게 줄여야 할지 감이 안 왔다. 번들러가 내부적으로 무슨 작업을 어떤 순서로 하는지 모르니, 어디를 건드려야 시간이 줄어드는지도 알 수 없었던 거다.이 글은 그때 파고들며 정리한 내용이다. Webpack, Vite, esbuild가 각각 "왜 그렇게 설계됐는지"를 중심으로, 번들러의 공통 동작 원리부터 셋의 근본적인 차이..

들어가며입사하고 처음 맡은 일이 "이 페이지 버튼 하나만 추가해주세요"였다. 별거 아닌 것 같았다. 그런데 그 버튼 하나를 추가하려고 코드를 열어본 순간, 나는 알았다. 이건 단순한 작업이 아니라는 걸.main.js 한 파일에 4,000줄이 넘는 jQuery 코드가 들어있었고, 전역 변수는 셀 수 없이 많았고, 이벤트 바인딩은 어디서 어떻게 걸리는지 추적이 거의 불가능했다. $(document).ready() 안에 또 다른 $(document).ready()가 있었고, 같은 셀렉터에 이벤트가 세 번, 네 번 중복으로 바인딩되어 있는 경우도 흔했다.이 글은 그 코드베이스를 약 6개월에 걸쳐 React 기반으로 리팩토링하면서 겪은 시행착오, 의사결정, 그리고 배운 점을 정리한 기록이다.1. 문제 정의: 왜 ..

이벤트 최적화 실험실 Debounce/Throttle 1초에 수십 번씩 쏟아지는 scroll, resize, input 이벤트를 다스리는 두 가지 방법. 정의는 다들 아는데, 막상 눈으로 보면 헷갈리는 두 개념의 차이를 직접 실행해보며 확인합니다. Raw Event Throttle Debounce 브라우저는 마우스를 1px만 움직여도 mousemove를 발화하고, 스크롤바가 살짝만 움직여도 scroll을 발화합니다. 이 이벤트에 매번 API를 호출하거나 무거운 연산을 걸어두면 브라우저는 순식간에 버벅이기 시작합니다. Debounce와 Thro..

```htmlFrontend Performance웹에서부드러운 애니메이션만들기브라우저는 화면을 일정한 주기로 다시 그립니다.requestAnimationFrame()은 이 렌더링 타이밍에 맞춰 실행되므로setInterval()보다 훨씬 자연스럽고 성능도 뛰어난 애니메이션을 만들 수 있습니다.requestAnimationFrame이란?requestAnimationFrame()은 브라우저가 다음 화면을 그리기 직전에콜백을 실행하는 API입니다.덕분에 브라우저 렌더링과 동기화되어 프레임 드랍이 적고,백그라운드 탭에서는 자동으로 호출 빈도를 줄여 CPU 사용량도 감소합니다.브라우저 렌더링 주기와 동기화60fps에 최적화백그라운드에서 자동 절전게임, Canvas, WebGL에서 필수 API기본 사용법animati..

FLOW-3D 교량 세굴 3D 대시보드실데이터 CSV 연동과 유체·하상 통합 시각화한 줄 요약합성 데모에서 한 걸음 더 — FLOW-3D CSV를 브라우저에서 직접 파싱하고,하상·수면·유체장·세굴 변화량을 단일 시간축 위에 겹쳐 보여주는 3D 대시보드를 완성했다.들어가며지난 스프린트에서 Three.js 기반의 교량 세굴 3D 대시보드 골격을 만들었다.지형 애니메이션, 교각 붕괴 시뮬레이션, 합성 유체장까지 — 데모는 돌아갔다.오늘의 목표는 명확했다.BeforeAfter합성 데이터만 시각화FLOW-3D CSV 직접 업로드수평 슬라이스 중심 유체 표현지형 위 수면 + 추적 입자 + 3D 점군파라미터 패널 하나실험 조건 / 유체 / CSV / 시각 설정 역할 분리HUD 텍스트 오버레이Dock 패널 + 글래스 ..

메모리 누수 디버깅기: Chrome DevTools로 원인 찾기이 글은 실제 트러블슈팅 과정에서 흔히 마주치는 패턴을 재구성한 사례입니다. 본인이 직접 겪은 프로젝트의 세부사항(어떤 컴포넌트였는지, 어떤 지표로 발견했는지)으로 바꿔 넣으면 더 설득력 있는 글이 됩니다. 아래는 그 틀로 활용할 수 있는 실제 디버깅 흐름입니다.증상: 사용자 제보로 시작된 조사"페이지를 오래 켜두면 브라우저가 느려지다가 결국 탭이 죽어요."대시보드형 SPA에서 실시간 데이터를 폴링하며 그래프를 갱신하는 화면이었다. 사용자는 이 화면을 하루 종일 켜둔 채로 사용했고, 몇 시간 뒤부터 스크롤이 버벅이다가 결국 탭이 응답 없음 상태에 빠진다는 제보가 들어왔다.첫 반응은 "메모리 누수겠구나"였지만, 정확히 어디서 새는지 특정하는 게..