GitHub Pages
내 생애 가장 자랑스러운 128킬로바이트
실제 프로덕션 서비스에서 번들 크기를 128KB 줄인 성능 최적화 경험을 공유하는 아티클입니다. 번들 분석 도구를 활용한 문제 발견부터 코드 스플리팅, 불필요한 의존성 제거, 트리 쉐이킹 개선까지의 전 과정을 다룹니다.
핵심 요약
이 아티클은 웹 성능 최적화를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 실제 프로덕션 서비스에서 번들 크기를 128KB 줄인 성능 최적화 경험을 공유하는 아티클입니다. 번들 분석 도구를 활용한 문제 발견부터 코드 스플리팅, 불필요한 의존성 제거, 트리 쉐이킹 개선까지의 전 과정을 다룹니다. 실무에서 성능 최적화가 단순한 이론이 아니라 측정-분석-개선의 반복 사이클임을 보여주는 사례입니다.
이 아티클은 웹 성능 최적화를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
웹 성능 최적화를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. webpack-bundle-analyzer나 source-map-explorer 같은 번들 분석 도구로 실제 용량을 차지하는 모듈을 시각적으로 파악한다 기술 선택뿐 아니라 협업과 커뮤니케이션 판단까지 함께 보여줄 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
webpack-bundle-analyzer나 sou
webpack-bundle-analyzer나 source-map-explorer 같은 번들 분석 도구로 실제 용량을 차지하는 모듈을 시각적으로 파악한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
webpack-bundle-analyzer나 sou를 개념으로만 기억하고 맥락 없이 적용하면 webpack-bundle-analyzer나 source-map-explorer 같은 번들 분석 도구로 실제 용량을 차지하는 모듈을 시각적으로 파악한다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
moment
moment.js의 로케일 파일처럼 자동으로 포함되는 불필요한 데이터를 IgnorePlugin이나 대체 라이브러리(day.js)로 제거할 수 있다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
moment를 개념으로만 기억하고 맥락 없이 적용하면 moment.js의 로케일 파일처럼 자동으로 포함되는 불필요한 데이터를 IgnorePlugin이나 대체 라이브러리(day.js)로 제거할 수 있다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
동적 import
동적 import()와 React.lazy를 활용한 코드 스플리팅으로 초기 로드 번들에 포함될 필요 없는 코드를 분리한다 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
동적 import를 개념으로만 기억하고 맥락 없이 적용하면 동적 import()와 React.lazy를 활용한 코드 스플리팅으로 초기 로드 번들에 포함될 필요 없는 코드를 분리한다 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
읽는 순서
- 1이론
"내 생애 가장 자랑스러운 128킬로바이트"의 멘탈 모델과 요약을 먼저 읽고, 웹 성능 최적화와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
내 생애 가장 자랑스러운 128킬로바이트에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 웹 성능 최적화와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "프론트엔드 번들 크기를 줄이기 위한 방법들을 아는 만큼 설명해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "내 생애 가장 자랑스러운 128킬로바이트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 코드 스플리팅, 트리 쉐이킹, 라이브러리 대체(moment→dayjs, lodash→lodash-es), 이미지 최적화, 사용하지 않는 CSS 제거(PurgeCSS) 등을 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "내 생애 가장 자랑스러운 128킬로바이트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 라우트 기반 스플리팅(페이지별), 컴포넌트 기반(모달, 차트 등 무거운 컴포넌트), vendor 청크 분리 등의 전략과 각각의 trade-off를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "내 생애 가장 자랑스러운 128킬로바이트에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] ES Module의 정적 구조(static import/export) 덕분에 번들러가 dead code를 제거 가능하며, CommonJS(require)는 동적이라 트리 쉐이킹이 어려움, side effects 설정도 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"webpack-bundle-analyzer나 sou"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.