TK-FB-Project/개발로그/2026-01-19_작업분석페이지_모듈로딩_수정.md

작업 분석 페이지 모듈 로딩 오류 수정

작업 일시

2026-01-19

작업 개요

작업 분석 페이지에서 발생하던 JavaScript 모듈 로딩 오류를 해결하고, 네비게이션 바가 정상적으로 표시되도록 수정했습니다.

발견된 문제점

1. JavaScript 모듈 로딩 오류

증상:

[Error] SyntaxError: Unexpected token '{'. import call expects one or two arguments.
    (익명 함수) (load-navbar.js:2)
[Error] SyntaxError: Unexpected token '{'. import call expects one or two arguments.
    (익명 함수) (api-config.js:2)

원인:

• ES6 import 문을 사용하는 스크립트 파일들이 type="module" 속성 없이 로드됨
• load-navbar.js와 api-config.js가 일반 스크립트로 로드되어 import 구문 파싱 실패

2. apiCall 참조 오류

증상:

[Error] 초기 데이터 로딩 오류: – ReferenceError: Can't find variable: apiCall
ReferenceError: Can't find variable: apiCall
    loadInitialData (work-analysis.js:138)

원인:

• work-analysis.js가 apiCall 함수를 사용하지만 api-config.js보다 먼저 실행됨
• 모듈 로딩 순서가 보장되지 않아 apiCall이 정의되기 전에 호출 시도

3. 네비게이션 바 미표시

증상:

• 작업 분석 페이지에서 상단 네비게이션 바가 표시되지 않음
• 헤더가 없어서 대시보드로 돌아갈 수 없음

원인:

• load-navbar.js가 모듈로 로드되지 않아 실행 실패
• navbar-container 요소에 네비게이션 컴포넌트가 로드되지 않음

해결 방안

1. HTML 스크립트 태그에 type="module" 추가

파일: web-ui/pages/analysis/work-analysis.html

A. api-config.js 모듈 로딩 설정

<!-- 변경 전 -->
<script src="/js/api-config.js?v=1" defer></script>

<!-- 변경 후 -->
<script type="module" src="/js/api-config.js?v=3"></script>

B. work-analysis.js 모듈 로딩 설정

<!-- 변경 전 -->
<script src="/js/work-analysis.js?v=4"></script>

<!-- 변경 후 -->
<script type="module" src="/js/work-analysis.js?v=5"></script>

C. load-navbar.js 모듈 로딩 설정

<!-- 변경 전 -->
<script src="/js/load-navbar.js?v=4"></script>

<!-- 변경 후 -->
<script type="module" src="/js/load-navbar.js?v=5"></script>

효과:

• ES6 import/export 구문이 정상적으로 파싱됨
• 브라우저가 모듈로 인식하여 올바르게 처리
• 버전 업데이트로 브라우저 캐시 무효화

2. work-analysis.js에서 api-config.js import

파일: web-ui/js/work-analysis.js

// 파일 최상단에 추가
// 작업 분석 페이지 JavaScript

// API 설정 import
import './api-config.js';

// 전역 변수
let currentMode = 'period';
let currentTab = 'worker';
// ...

효과:

• api-config.js가 work-analysis.js보다 먼저 로드되도록 보장
• window.apiCall이 정의된 후에 work-analysis.js 코드 실행
• 모듈 의존성 명시로 코드 가독성 향상

수정된 파일 목록

HTML 파일

1. web-ui/pages/analysis/work-analysis.html
   • 3개의 script 태그에 type="module" 추가
   • 스크립트 버전 업데이트 (캐시 클리어)

JavaScript 파일

2. web-ui/js/work-analysis.js
   • 파일 상단에 import './api-config.js'; 추가
   • 모듈 의존성 명시

테스트 결과

Before (수정 전)

❌ SyntaxError: Unexpected token '{'
❌ ReferenceError: Can't find variable: apiCall
❌ 네비게이션 바 미표시
❌ 초기 데이터 로딩 실패

After (수정 후)

✅ 모듈 로딩 정상
✅ apiCall 함수 정상 호출
✅ 네비게이션 바 정상 표시
✅ 초기 데이터 로딩 성공
✅ 모든 기능 정상 작동

전체 페이지 점검 결과

이 수정 작업 중에 전체 애플리케이션의 모든 페이지를 점검했습니다:

✅ 정상 페이지 (type="module" 적용 완료)

Admin 페이지:

• manage-issue.html
• manage-project.html
• manage-task.html
• manage-user.html
• manage-worker.html

Common 페이지:

• daily-work-report.html
• management-dashboard.html
• project-analysis.html
• work-report-review.html
• work-report-validation.html
• worker-individual-report.html
• daily-work-report-viewer.html

Management 페이지:

• worker-management.html
• project-management.html
• code-management.html
• work-management.html

Analysis 페이지:

• work-analysis.html ← 이번 수정으로 완료

독립 페이지 (navbar 미사용):

• daily_work_analysis.html
• project-worktype-analysis.html
• work-report-analytics.html

결론

모든 페이지에서 ES6 모듈 시스템이 일관되게 적용되었습니다.

기술적 배경

ES6 모듈 시스템

• type="module": 브라우저에게 파일을 ES6 모듈로 처리하도록 지시
• import/export: 모듈 간 의존성 명시 및 코드 공유
• 자동 strict mode: 모듈은 자동으로 엄격 모드로 실행
• 지연 로딩: 모듈은 기본적으로 defer 동작 (DOM 로드 후 실행)

모듈 vs 일반 스크립트 차이

특성	모듈 (type="module")	일반 스크립트
import/export	✅ 지원	❌ 미지원
스코프	모듈 스코프	전역 스코프
strict mode	자동 적용	명시 필요
defer	기본 동작	명시 필요
중복 로드	한 번만 실행	매번 실행

배포 시 주의사항

1. 브라우저 캐시 클리어

   • 사용자들에게 강제 새로고침 안내 필요
   • Ctrl+F5 (Windows) 또는 Cmd+Shift+R (Mac)

2. 버전 관리

   • 스크립트 파일 버전이 상향되었으므로 캐시 문제 없음
   • api-config.js: v1 → v3
   • work-analysis.js: v4 → v5
   • load-navbar.js: v4 → v5

3. 브라우저 호환성

   • ES6 모듈은 IE11에서 지원되지 않음
   • 최신 Chrome, Firefox, Safari, Edge에서 정상 작동
   • 필요시 Babel 트랜스파일 고려

관련 작업

이전 작업 (2026-01-19)

• 2026-01-19_작업자관리_스키마_동기화.md

  • worker-management 페이지 모듈 로딩 수정
  • 데이터베이스 스키마 동기화

• 2026-01-19_UI_반응형_개선.md

  • 전체 UI 반응형 디자인 개선
  • 네비게이션 바 전면 리팩토링
  • 모든 관리 페이지 모듈 시스템 통일

연계성

이번 수정은 UI 반응형 개선 작업의 연장선상으로:

• 동일한 문제 패턴 (type="module" 누락)
• 동일한 해결 방법 적용
• 전체 애플리케이션의 일관성 확보

향후 개선 계획

1. 모듈 번들링 도입

   • Webpack 또는 Vite 도입 검토
   • 프로덕션 빌드 최적화
   • 코드 스플리팅으로 초기 로딩 개선

2. TypeScript 전환

   • 타입 안정성 확보
   • IDE 자동완성 개선
   • 런타임 오류 사전 방지

3. 의존성 관리 개선

   • 모든 JS 파일에 명시적 import 추가
   • window 전역 객체 의존성 최소화
   • 모듈 간 결합도 낮추기

4. 테스트 자동화

   • 모듈 로딩 오류 자동 감지
   • CI/CD 파이프라인 구축
   • 배포 전 자동 검증

참고 자료

• MDN: JavaScript modules
• MDN: script type="module"
• ES6 Modules in Browsers

Git 커밋 정보

• 커밋 ID: b0d17cd
• 커밋 메시지: fix(web-ui): 작업 분석 페이지 모듈 로딩 오류 수정
• 변경된 파일: 2개
• 푸시 완료: https://git.hyungi.net/hyungi/TK-FB-Project.git