미분류 1088 - naver.HOW data lake by AI

자바스크립트 코드가 점점 복잡해지면 하나의 파일에 모든 코드를 작성하는 것은 유지보수 측면에서 매우 비효율적입니다. 이럴 때 자바스크립트 코드를 여러 파일로, 논리적 단위로 분리하면 개발과 디버깅이 훨씬 수월해집니다. 하지만 자바스크립트 파일을 분리할 때 잘못하면 코드가 동작하지 않는 문제가 발생할 수 있습니다. 이 글에서는 자바스크립트 모듈화의 핵심 개념과 실제 적용 방법에 대해 알아보겠습니다.

자바스크립트 파일 분리 시 발생하는 문제

자바스크립트 파일을 분리할 때 가장 흔히 발생하는 문제들은 다음과 같습니다:

1. 스코프 문제

각 자바스크립트 파일은 자체 스코프를 가집니다. 한 파일에서 선언한 변수나 함수를 다른 파일에서 직접 접근할 수 없습니다.

// file1.js
const username = "Alice";
function greet() {
  console.log(`Hello, ${username}!`);
}

// file2.js
greet(); // ReferenceError: greet is not defined
console.log(username); // ReferenceError: username is not defined

2. 로딩 순서 문제

HTML 문서에서 스크립트 태그의 로딩 순서에 따라 종속성 문제가 발생할 수 있습니다.

<!-- 잘못된 순서 -->
<script src="app.js"></script> <!-- app.js는 utils.js의 함수를 사용 -->
<script src="utils.js"></script>

3. 전역 네임스페이스 오염

여러 파일에서 같은 이름의 변수나 함수를 정의하면 충돌이 발생합니다.

// file1.js
const config = { theme: "dark" };

// file2.js
const config = { debug: true }; // 이전 config를 덮어씀

전통적인 방식의 자바스크립트 모듈화

ES6 모듈 이전에는 다음과 같은 방법으로 모듈화를 구현했습니다:

1. 즉시 실행 함수(IIFE)

// module.js
(function() {
  // 비공개 변수와 함수
  let privateVar = "비공개 데이터";
  
  // 전역으로 노출할 API
  window.MyModule = {
    getPrivateData: function() {
      return privateVar;
    },
    doSomething: function() {
      console.log("Something done with " + privateVar);
    }
  };
})();

// 사용
MyModule.doSomething();

2. 네임스페이스 패턴

// namespace.js
var MyApp = MyApp || {};

MyApp.utils = {
  formatDate: function(date) {
    // 날짜 형식화 로직
    return date.toLocaleDateString();
  }
};

MyApp.ui = {
  showAlert: function(message) {
    alert(message);
  }
};

// 사용
MyApp.utils.formatDate(new Date());
MyApp.ui.showAlert("Hello!");

3. 스크립트 로딩 순서 관리

HTML에서 스크립트를 올바른 순서로 로드합니다:

<!-- 올바른 순서 -->
<script src="utils.js"></script>
<script src="models.js"></script>
<script src="views.js"></script>
<script src="controllers.js"></script>
<script src="app.js"></script>

현대적 방식: ES 모듈 시스템

ES6에서 도입된 모듈 시스템은 자바스크립트 코드 구조화의 표준이 되었습니다.

1. 기본 내보내기와 가져오기

// math.js
export default {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

// app.js
import Math from './math.js';
console.log(Math.add(5, 3)); // 8

2. 명명된 내보내기와 가져오기

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

export function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

// app.js
import { formatDate, formatCurrency } from './utils.js';
console.log(formatDate(new Date()));
console.log(formatCurrency(9.99));

3. HTML에서 모듈 사용하기

<script type="module" src="app.js"></script>

ES 모듈을 사용할 때 주의할 점:

type="module" 속성이 필요합니다.
모듈은 항상 엄격 모드('use strict')로 실행됩니다.
모듈은 CORS 정책을 따릅니다 (로컬 파일에서 직접 실행 시 문제 발생).
모듈은 기본적으로 defer 속성처럼 동작합니다.

번들러를 활용한 모듈 관리

대규모 프로젝트에서는 Webpack, Rollup, Parcel 같은 번들러를 사용하면 모듈 관리가 더 쉬워집니다.

Webpack을 사용한 예

설치하기

npm init -y
npm install webpack webpack-cli --save-dev

웹팩 설정 (webpack.config.js)

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development'
};

사용 예

// src/utils.js
export function greeting(name) {
  return `Hello, ${name}!`;
}

// src/index.js
import { greeting } from './utils.js';

document.body.textContent = greeting('World');

빌드 및 HTML에 포함

npx webpack

<script src="dist/bundle.js"></script>

실전 예제: 웹사이트에 모듈화 적용하기

대부분의 웹사이트는 다음과 같은 자바스크립트 구성 요소를 가집니다:

UI 상호작용
데이터 관리
API 통신
유틸리티 함수

이러한 요소를 모듈로 분리하여 구성해 보겠습니다.

1. 프로젝트 구조 설정

/js
  /modules
    ui.js
    api.js
    data.js
    utils.js
  main.js
index.html

2. 모듈 코드 작성

// js/modules/utils.js
export function formatDate(date) {
  return new Date(date).toLocaleDateString();
}

export function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// js/modules/api.js
export async function fetchData(url) {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error('API 호출 중 오류 발생:', error);
    throw error;
  }
}

// js/modules/data.js
import { fetchData } from './api.js';

let cache = {};

export async function getUserData(userId) {
  if (cache[userId]) {
    return cache[userId];
  }
  
  const data = await fetchData(`/api/users/${userId}`);
  cache[userId] = data;
  return data;
}

// js/modules/ui.js
import { formatDate } from './utils.js';
import { getUserData } from './data.js';

export function renderUserProfile(userId, elementId) {
  const element = document.getElementById(elementId);
  if (!element) return;
  
  element.innerHTML = '<div class="loading">로딩 중...</div>';
  
  getUserData(userId)
    .then(user => {
      element.innerHTML = `
        <div class="profile">
          <h2>${user.name}</h2>
          <p>가입일: ${formatDate(user.joinDate)}</p>
          <p>이메일: ${user.email}</p>
        </div>
      `;
    })
    .catch(error => {
      element.innerHTML = `<div class="error">사용자 정보를 불러오는 중 오류가 발생했습니다.</div>`;
    });
}

3. 메인 애플리케이션 파일 작성

// js/main.js
import { renderUserProfile } from './modules/ui.js';
import { debounce } from './modules/utils.js';

// DOM이 로드된 후 실행
document.addEventListener('DOMContentLoaded', () => {
  const userIdInput = document.getElementById('user-id');
  const searchButton = document.getElementById('search-user');
  
  searchButton.addEventListener('click', () => {
    const userId = userIdInput.value.trim();
    if (userId) {
      renderUserProfile(userId, 'user-profile');
    }
  });
  
  // 검색어 입력 시 디바운스 적용
  userIdInput.addEventListener('input', debounce(() => {
    const userId = userIdInput.value.trim();
    if (userId && userId.length > 3) {
      renderUserProfile(userId, 'user-profile');
    }
  }, 500));
});

4. HTML에 통합

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>사용자 프로필 조회</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>사용자 프로필 조회</h1>
    
    <div class="search-container">
      <input type="text" id="user-id" placeholder="사용자 ID 입력">
      <button id="search-user">검색</button>
    </div>
    
    <div id="user-profile"></div>
  </div>
  
  <script type="module" src="js/main.js"></script>
</body>
</html>

디버깅 팁

모듈화된 자바스크립트 코드를 디버깅할 때 유용한 팁입니다:

1. 브라우저 개발자 도구 활용

크롬 개발자 도구의 ‘Sources’ 탭에서는 모듈화된 코드를 파일별로 볼 수 있습니다. 중단점(breakpoint)을 설정하여 코드 실행을 추적할 수 있습니다.

2. 모듈 로딩 확인

네트워크 탭에서 모든 자바스크립트 모듈이 제대로 로드되었는지 확인합니다.

3. 모듈 내보내기/가져오기 검증

콘솔에서 모듈 객체를 출력하여 예상한 속성과 메서드가 포함되어 있는지 확인합니다.

import * as utils from './utils.js';
console.log(utils); // 모든 내보내기 확인

4. 오류 메시지 분석

모듈 관련 오류 메시지는 대개 다음과 같은 패턴입니다:

Failed to resolve module specifier – 경로 문제
Unexpected token 'export' – 모듈로 로드되지 않은 파일에서 export 사용
X is not defined – 모듈을 올바르게 가져오지 않음

5. CORS 오류 대응

로컬에서 모듈을 테스트할 때 CORS 오류가 발생할 수 있습니다. 이를 해결하려면 로컬 서버를 사용해야 합니다:

# Node.js를 사용한 간단한 서버
npx serve

마무리

자바스크립트 코드를 모듈화하면 다음과 같은 장점이 있습니다:

코드 구조 개선: 논리적으로 관련된 코드를 함께 그룹화
재사용성 증가: 모듈을 여러 프로젝트에서 재사용 가능
의존성 관리 개선: 모듈 간 명확한 종속성 선언
네임스페이스 충돌 방지: 각 모듈은 자체 스코프를 가짐
테스트 용이성: 독립적인 모듈은 단위 테스트하기 쉬움

현대적인 웹 개발에서는 ES 모듈을 기본으로 사용하고, 대규모 프로젝트에서는 번들러를 추가하는 것이 좋습니다. 이를 통해 자바스크립트 코드를 체계적으로 관리하고 유지보수성을 크게 높일 수 있습니다.

[카테고리:] 미분류

웹 개발에서 자바스크립트 모듈화 하기: 파일 분리와 적용 가이드

목차