코딩하는 곰돌이

들어가며"이 애니메이션 왜 이렇게 뚝뚝 끊겨요?"라는 질문을 받았을 때, 처음엔 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. 문제 정의: 왜 ..