JavaScript 모듈화 여정: 레거시 코드를 36개 모듈로

// main.js
(function() {
  // 테마 관련 코드 (100줄)
  const themeToggle = ...

  // 네비게이션 관련 코드 (150줄)
  const navToggle = ...

  // 목차 관련 코드 (200줄)
  const tocGenerate = ...

  // ... 1200줄 더 ...
})();

// main.js
(function() {
  // ... 다른 코드 500줄 ...

  // 테마 관련 (여기저기 흩어짐)
  const themeToggle = document.getElementById('themeToggle');
  const currentTheme = localStorage.getItem('theme') || 'light';

  function applyTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
    updateIcon(theme);
    // 다른 부분과 결합된 로직들...
  }

  themeToggle.addEventListener('click', () => {
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    applyTheme(newTheme);
  });

  // ... 다른 코드 1000줄 ...
})();

// modules/theme.js - 단 132줄, 명확한 책임
import { emit } from '../core/event-bus.js';
import { storage } from '../core/utils.js';

// 상태 (클로저로 보호)
let state = {
  themeToggle: null,
  themeIcon: null,
  currentTheme: null,
  initialized: false
};

// 테마 적용
const applyTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme);
  state.currentTheme = theme;
  storage.set('theme', theme);
  emit('theme:changed', { theme }); // 다른 모듈에 알림
  return theme;
};

// Public API
export const init = () => { /* ... */ };
export const toggle = () => { /* ... */ };
export const getCurrent = () => state.currentTheme;

// ❌ 직접 import (결합도 높음)
// theme.js
import navigation from './navigation.js';
import header from './scroll-header.js';
import canvas from '../ui/hero-canvas.js';

export const toggle = () => {
  // 테마 변경
  const newTheme = ...;

  // 다른 모듈들에게 직접 알림
  navigation.updateTheme(newTheme);
  header.updateTheme(newTheme);
  canvas.updateTheme(newTheme);
};

// event-bus.js - 중앙 메시지 허브
let eventHandlers = {};

export const on = (event, callback) => {
  if (!eventHandlers[event]) {
    eventHandlers[event] = [];
  }
  eventHandlers[event].push(callback);

  // 구독 해제 함수 반환
  return () => off(event, callback);
};

export const emit = (event, data) => {
  if (!eventHandlers[event]) return;
  eventHandlers[event].forEach(cb => cb(data));
};

// theme.js - 이벤트 발행만
export const toggle = () => {
  const newTheme = ...;
  emit('theme:changed', { theme: newTheme }); // 알림만!
};

// navigation.js - 관심 있으면 구독
on('theme:changed', ({ theme }) => {
  updateNavigationStyle(theme);
});

// hero-canvas.js - 관심 있으면 구독
on('theme:changed', ({ theme }) => {
  updateCanvasColors(theme);
});

// rollup.config.js
export default [
  {
    input: 'assets/js/app.js',
    output: {
      file: 'assets/js/dist/bundle.js',  // 41KB - 전체 기능
      format: 'iife'
    }
  },
  {
    input: 'assets/js/core/index.js',
    output: {
      file: 'assets/js/dist/core.js',    // 8.7KB - 필수만
      format: 'iife'
    }
  }
];

// app.js
export const init = () => {
  // 1. 필수 기능은 즉시
  theme.init();
  navigation.init();

  // 2. 조건부 기능은 확인 후
  if (document.getElementById('heroCanvas')) {
    heroCanvas.init();  // Canvas가 있을 때만!
  }

  // 3. 비필수 기능은 Idle 시
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      analytics.init();  // CPU 여유 있을 때
    });
  }
};

// utils.js에 20개 함수가 있지만...
export const debounce = ...
export const throttle = ...
export const isMobile = ...
// ... 17개 더

// theme.js에서 2개만 import
import { debounce, storage } from './utils.js';

// 빌드 시 18개 함수는 번들에서 제거됨!

import resolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';

const isDev = process.env.NODE_ENV !== 'production';

export default [
  {
    input: 'assets/js/app.js',
    output: {
      file: 'assets/js/dist/bundle.js',
      format: 'iife',
      name: 'deepApp',
      sourcemap: isDev  // 개발 시 디버깅 용이
    },
    plugins: [
      resolve(),
      !isDev && terser({  // 프로덕션: 압축
        compress: {
          drop_console: true  // console.log 제거
        }
      })
    ]
  }
];

// "이 함수가 어디 있더라...?"
// Ctrl+F 검색 → 5분 소요

// "이거 고치면 다른 곳이 깨지지 않을까...?"
// 불안하게 수정 → 테스트 → 버그 발견 → 다시 수정

// "Theme 관련이니까 modules/theme.js 보면 되겠네!"
// 바로 찾음 → 30초

// "이 모듈만 수정하면 되니까 안심!"
// 자신있게 수정 → Event Bus로 통신 → 다른 모듈은 안전

// button.js - 하나로 충분
export const createButton = (type, size) => { ... };

// theme.js
import { updateNav } from './navigation.js';

// navigation.js
import { getCurrentTheme } from './theme.js';

// ❌ 순환 참조!

// Event Bus 사용
// theme.js
emit('theme:changed', { theme });

// navigation.js
on('theme:changed', ({ theme }) => { ... });

// config.js
export let globalState = { ... };  // Mutable!

// 다른 모듈에서
globalState.foo = 'bar';  // 직접 변경 (위험!)

// config.js
let state = Object.freeze({ ... });  // Immutable

export const set = (key, value) => {
  state = Object.freeze({ ...state, [key]: value });
};

// Vitest로 각 모듈 테스트
describe('Theme Module', () => {
  it('should toggle theme', () => {
    theme.toggle();
    expect(theme.getCurrent()).toBe('dark');
  });
});

// 실제 사용자 성능 측정
import { initPerformanceMonitoring } from './core/performance.js';

initPerformanceMonitoring({
  onFCP: (time) => analytics.track('FCP', time),
  onTTI: (time) => analytics.track('TTI', time)
});