웹 개발 기초집LESSON 25

JavaScript 모듈로 파일 나누기

난이도입문

예상 시간25분

선수지식이전 강의

25강. JavaScript 모듈로 파일 나누기

이번 강의의 결과물은 프로젝트 데이터, DOM 렌더링, 시작 코드를 서로 다른 모듈로 분리한 포트폴리오입니다.

1. 이번 강의에서 해결할 문제

모든 데이터와 함수, 이벤트 코드를 main.js 하나에 계속 추가하면 파일의 책임을 찾기 어렵습니다. 외부에 제공할 값은 export하고 필요한 파일에서 import해 역할별로 코드를 나눕니다.

학습 목표

모든 데이터와 함수, 이벤트 코드를 main.js 하나에 계속 추가하면 파일의 책임을 찾기 어렵습니다. 외부에 제공할 값은 export하고 필요한 파일에서 import해 역할별로 코드를 나눕니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

모듈: 독립된 파일 범위를 가진 JavaScript 파일
export: 다른 모듈에 제공할 값이나 함수 지정
import: 다른 모듈이 제공한 이름을 현재 파일에서 사용
모듈 지정자: ./data/projects.js 같은 상대 URL
모듈 그래프: 진입 모듈에서 import로 연결된 파일 관계

main.js
├─ import projects.js
└─ import render-projects.js

브라우저 모듈은 엄격 모드로 실행되고 최상위 선언이 전역 객체의 속성이 되지 않습니다. WHATWG script 모듈 표준, TC39 ECMAScript Modules

3. 코드 예시

파일 구조:

web-basics/portfolio/
├─ index.html
└─ js/
   ├─ main.js
   ├─ data/
   │  └─ projects.js
   └─ ui/
      └─ render-projects.js

파일명: index.html

기존 script를 다음과 같이 변경합니다.

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

파일명: js/data/projects.js

export const projects = [
  {
    title: "게임플레이 기능 프로젝트",
    category: "game",
    description: "Unreal C++로 상호작용 기능을 구현합니다.",
  },
  {
    title: "반응형 포트폴리오",
    category: "web",
    description: "HTML과 CSS로 여러 화면 크기에 대응합니다.",
  },
];

파일명: js/ui/render-projects.js

function createProjectCard(project) {
  const article = document.createElement("article");
  const title = document.createElement("h3");
  const description = document.createElement("p");

  article.className = "project-card";
  article.dataset.category = project.category;
  title.textContent = project.title;
  description.textContent = project.description;
  article.append(title, description);

  return article;
}

export function renderProjects(projects, container) {
  container.replaceChildren();

  for (const project of projects) {
    container.append(createProjectCard(project));
  }
}

파일명: js/main.js

import { projects } from "./data/projects.js";
import { renderProjects } from "./ui/render-projects.js";

const projectList = document.querySelector("#project-list");

if (projectList) {
  renderProjects(projects, projectList);
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

4. 코드가 동작하는 이유

type="module"이 main.js를 JavaScript 모듈로 불러옵니다.
브라우저가 main의 import 문을 읽고 두 의존 모듈도 별도 요청합니다.
projects.js는 데이터만, render-projects.js는 DOM 생성만 담당합니다.
named export와 import의 이름이 같아 해당 바인딩이 연결됩니다.
상대 모듈 경로는 import를 작성한 파일 위치를 기준으로 계산됩니다.
모듈 스크립트는 HTML 파싱이 끝난 뒤 실행되므로 별도 defer가 필요하지 않습니다.

모듈은 URL로 로드되므로 file://로 직접 열지 말고 로컬 HTTP 서버에서 실행해야 합니다.

5. 자주 하는 실수

HTML script에 type="module"을 빠뜨림
상대 경로 앞의 ./ 또는 .js 확장자를 생략함
export한 이름과 import 이름의 철자가 다름
import 경로를 index.html 기준으로 계산함
모듈을 파일 더블 클릭 방식인 file://에서 실행함
데이터 모듈에서 DOM까지 수정해 책임을 다시 섞음

6. 짧은 실습 과제

기존 main.js에서 프로젝트 데이터를 data/projects.js로 옮깁니다.
카드 생성과 렌더링 함수를 ui/render-projects.js로 옮깁니다.
main.js에는 import, DOM 조회, 초기 호출만 남깁니다.
Network 탭에서 세 JavaScript 파일이 모두 200인지 확인합니다.
import 경로를 일부러 틀려 Console과 Network 오류를 확인한 뒤 복구합니다.
각 파일의 책임을 한 문장으로 설명합니다.

완료 기준은 데이터 변경, 화면 생성, 앱 시작 위치를 각각 다른 파일에서 찾을 수 있고 모듈 경로 오류 없이 카드가 렌더링되는 것입니다.

7. 이해 점검 질문 3개

export와 import는 각각 어떤 역할을 하나요?
main.js 안의 ./data/projects.js는 어느 파일 위치를 기준으로 계산되나요?
브라우저 모듈을 file:// 대신 로컬 서버에서 실행해야 하는 이유는 무엇인가요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ