verify-lazy-loading

Purpose

1. •Lazy import 일관성 - TabContent.tsx의 모든 탭 컴포넌트가 React.lazy()로 import되는지 검증
2. •Suspense 래핑 - lazy 컴포넌트가 Suspense로 감싸져 있고 적절한 fallback이 있는지 검증
3. •ErrorBoundary 존재 - TabContent 전체가 ErrorBoundary로 감싸져 있는지 검증
4. •ModalManager 패턴 - 모달 컴포넌트도 lazy load되는지 검증
5. •TimetableManager 패턴 - 시간표 내부의 lazy import가 유지되는지 검증

When to Run

• •components/Layout/TabContent.tsx에 새 탭을 추가한 후
• •components/Layout/ModalManager.tsx에 새 모달을 추가한 후
• •components/Timetable/TimetableManager.tsx의 lazy import를 수정한 후
• •번들 사이즈 최적화 작업 후
• •새로운 탭 레벨 매니저 컴포넌트를 생성한 후

Related Files

Workflow

Step 1: TabContent lazy import 카운트 검증

파일: components/Layout/TabContent.tsx

검사: 모든 탭 컴포넌트가 React.lazy()로 import되어야 합니다. 현재 20개의 lazy import가 존재해야 합니다.

grep -c "React.lazy(" components/Layout/TabContent.tsx

PASS 기준: 20개 이상의 lazy import 존재 (탭 추가 시 증가 가능) FAIL 기준: lazy import 수가 감소했거나, 직접 import로 전환된 탭이 있음

추가 검증: 직접 import된 대형 컴포넌트가 없는지 확인

grep -n "^import.*from '\.\./.*Manager\|^import.*from '\.\./.*Tab'" components/Layout/TabContent.tsx

PASS 기준: Manager/Tab 직접 import 없음 (모두 lazy) FAIL 기준: 대형 컴포넌트가 직접 import됨

수정: const Component = React.lazy(() => import('../Path/Component')) 패턴으로 변경

Step 2: TabContent Suspense + ErrorBoundary 래핑 검증

파일: components/Layout/TabContent.tsx

검사: ErrorBoundary로 전체 래핑, 각 탭이 Suspense로 감싸져 있어야 합니다.

grep -c "Suspense" components/Layout/TabContent.tsx
grep -n "ErrorBoundary" components/Layout/TabContent.tsx

PASS 기준:

• •Suspense 10회 이상 사용 (각 탭 그룹마다 1개 이상)
• •ErrorBoundary import 및 래핑 존재

FAIL 기준: Suspense 없이 lazy 컴포넌트 렌더링 (런타임 에러)

수정: <Suspense fallback={<TabLoadingFallback />}> 래핑 추가

Step 3: ModalManager lazy import 검증

파일: components/Layout/ModalManager.tsx

검사: 글로벌 모달이 lazy load되고 Suspense로 감싸져 있어야 합니다.

grep -c "React.lazy(" components/Layout/ModalManager.tsx
grep -c "Suspense" components/Layout/ModalManager.tsx

PASS 기준: 4개 이상의 lazy import + Suspense 래핑 존재 FAIL 기준: 모달이 직접 import됨

수정: const Modal = React.lazy(() => import('../Path/Modal')) + <Suspense> 래핑

Step 4: TimetableManager lazy import 검증

파일: components/Timetable/TimetableManager.tsx

검사: 시간표 내부의 대형 하위 컴포넌트가 lazy load되어야 합니다.

grep -c "lazy(" components/Timetable/TimetableManager.tsx
grep -n "Suspense" components/Timetable/TimetableManager.tsx

PASS 기준: 5개 이상의 lazy import + Suspense 사용 FAIL 기준: lazy import 수 감소 (직접 import로 전환)

수정: const Component = lazy(() => import('./Path/Component')) 패턴 복원

Step 5: ErrorBoundary 컴포넌트 존재 검증

파일: components/Common/ErrorBoundary.tsx

검사: ErrorBoundary 컴포넌트가 존재하고 올바르게 export되어야 합니다.

ls components/Common/ErrorBoundary.tsx 2>/dev/null || echo "MISSING"
grep -n "export default" components/Common/ErrorBoundary.tsx

PASS 기준: 파일 존재 + export default 있음 FAIL 기준: ErrorBoundary 파일 누락

수정: React ErrorBoundary 클래스 컴포넌트 생성

Output Format

Exceptions

다음은 위반이 아닙니다:

1. •소형 유틸리티 컴포넌트의 직접 import - ErrorBoundary, VideoLoading, Skeleton 등 작은 공통 컴포넌트는 lazy load 불필요 (번들에 이미 포함)
2. •ModalManager에서 fallback={null} - 모달은 화면 전체를 차지하지 않으므로 로딩 스피너 대신 null fallback 사용 가능
3. •조건부 렌더링 내부의 lazy 컴포넌트 - 삼항 연산자 내부에서 렌더되는 lazy 컴포넌트는 상위 Suspense가 커버하면 개별 Suspense 불필요
4. •.then(m => ({ default: m.ComponentName })) 패턴 - named export를 lazy load할 때 사용하는 정상적인 패턴