프로그램 / 실무형 프론트엔드 성능 최적화 부트캠프
실무형 프론트엔드 성능 최적화 부트캠프
코어 웹 바이탈과 번들 구조를 동시에 다루며, 팀 코드베이스에 바로 적용할 수 있는 리팩터링 루틴을 체화합니다.
- 시간
- 6주 · 주 2회 라이브
- 형식
- 하이브리드
- 가격
- KRW 2,490,000
- 난이도
- 중급
프로그램 소개
초기 로딩과 런타임 렌더링을 나누어 진단하고, 측정→가설→실험→문서화의 사이클을 반복합니다. 실습은 샘플 앱이 아니라 팀에서 제출한 익명화된 스니펫을 기반으로 진행됩니다.
포함 내용
- Lighthouse·WebPageTest·Chrome Performance 패널 교차 검증
- 번들 그래프와 동적 import 경계 설계
- 이미지·폰트·서드파티 스크립트 거버넌스 템플릿
- 프리렌더·스트리밍·캐시 헤더 실습
- 지표와 제품 이벤트를 연결하는 성과 프레임
- 코드 리뷰 체크리스트 및 릴리즈 게이트 샘플
기대할 수 있는 변화
- 핵심 페이지의 LCP·INP 개선안을 우선순위화할 수 있습니다.
- 성능 회귀를 잡는 최소한의 CI 스텝을 설계합니다.
- 팀 내 공통 언어로 병목을 설명하는 문서를 남깁니다.
담당 코치
박서연
실서비스 트래픽 패턴을 기준으로 성능 병목을 분해하고, 측정 가능한 개선안으로 정리합니다.
FAQ
선수 지식은 어느 정도 필요한가요?
React 또는 Vue 중 하나에 익숙하고, 네트워크 탭을 열어본 경험이 있으면 충분합니다.
기업 라이선스 도구가 필요한가요?
기본 실습은 오픈소스와 브라우저 내장 도구만 사용합니다. 유료 APM은 다루지 않습니다.
배포된 서비스에 바로 적용하나요?
교육 중에는 샌드박스와 스테이징 환경에서만 변경합니다. 프로덕션 반영은 팀 내부 승인 절차를 따릅니다.
후기
-
번들 그래프 실습에서 우리 결제 위젯이 차지하던 공간을 정확히 짚어줘서 설득이 쉬웠습니다.
-
코드 리뷰 체크리스트를 그대로 가져가 팀 규칙에 붙였습니다. 숫자보다 대화 속도가 빨라졌어요.