WoodyCode_우디코드

안녕하세요! WoodyCode입니다. 🚀 웹 개발을 하다 보면, 참 다양한 프로젝트를 마주하게 되죠? 그중에서도 특히 짧게는 며칠, 길게는 몇 주 정도만 운영되는 '일회성 웹사이트'를 만들 일이 꽤 자주 생깁니다.예를 들면, 회사에서 갑자기 진행하는 반짝 팝업 스토어 홍보 페이지, 간단한 이벤트 경품 응모 시스템, 혹은 딱 한 달만 쓸 사내 예약 페이지 같은 것들이죠.그럴 때마다 여러분은 어떻게 하시나요? 혹시 관성적으로 React나 Vue 프로젝트부터 생성하고 계시진 않나요? 🤔물론 익숙한 도구가 편하긴 하지만, 문득 이런 생각이 듭니다. "단순한 화면 몇 개에 가벼운 상호작용뿐인데, 굳이 수십 MB의 자바스크립트 번들과 복잡한 빌드 도구가 필요할까?" 배보다 배꼽이 더 크다는 느낌? 그런 고민을 ..

안녕하세요, WoodyCode입니다. 🚀 지난 포스팅에서 우리는 HTML이 DOM 트리로 변환되는 과정을 알아봤습니다. 이제 브라우저는 이 설계도를 바탕으로 실제 사용자 눈에 보이는 픽셀을 화면에 그려야 합니다. 이 마지막 단계를 렌더링(Rendering)이라고 합니다."Next.js는 SSR이라서 빠르다", "하이드레이션 때문에 인터랙션이 씹힌다"는 말, 들어보셨죠? 도대체 렌더링 과정에서 어떤 일이 벌어지길래 현대 프레임워크들이 이 렌더링 방식을 두고 치열한 성능 전쟁을 벌이는지, 그 속사정을 낱낱이 파헤쳐 보겠습니다.1. 브라우저의 렌더링 파이프라인 (The Rendering Pipeline)브라우저가 픽셀을 그리는 과정은 정교한 자동차 생산 공정과 같습니다. 각 단계가 유기적으로 연결되어 있으며..