본문으로 건너뛰기

루프공방LoopLab

배우기 카탈로그 도구·모델 AI 질의 소식 챌린지 공유 방명록

페이지를 불러오는 중입니다.

루프공방

바이브코딩을 해 봤지만 아직 서툰 사람을 위해, 하네스·Skills·MCP·Hooks·실제 도구를 익히고 시행착오를 줄이는 학습 허브

검색 완전 초보 배우기 도구·모델 카탈로그 소식 챌린지 프로젝트 방명록 로그인

배우기
카탈로그
AI 질의
챌린지
공유

hook실전성능프론트

번들 사이즈 경고 훅

프론트 용량 급증 감지

커뮤니티 · 웹 성능 하네스에서 사용

무엇을 하나요

빌드 후 번들 크기 임계값을 넘으면 경고. 에이전트의 무거운 의존성 추가를 견제.

어떻게 동작하나요

next build / vite build 산출물 크기 비교.

이런 분께

웹 성능에 민감한 제품.

시작 방법

현재 크기를 베이스라인으로 기록.

실전 팁

동적 import 제안
아이콘 전체 import 금지
분석 리포트 아티팩트 보관

이럴 땐 쓰지 마세요

SSR 없는 초소형 페이지.

주의 (보안·운영)

환경마다 수치가 다름.

막히기 쉬운 지점

임계값을 너무 느슨히.

같이 보면 좋은 항목

Auth.js / NextAuth — 인증 헬퍼
frontend-design / UI 미학 스킬 — AI 특유 ‘보라 그라데이션 UI’ 탈출