ES6 모듈 시스템 : import/export를 활용한 최신 개발 방법

ES6 모듈이란?

ES6 모듈 시스템은 JavaScript 파일을 독립적인 모듈로 나누어 관리할 수 있도록 해주는 기능이다.

즉, 코드를 여러 개의 파일로 나눠서 필요할 때만 불러오는 방식

 

기존에는 script태그를 여러 개 추가하거나, require.js, CommonJS등을 사용했지만, ES6부터는 표준을 내장된 import / export 문법을 사용할 수 있다.

---

 

ES6 모듈의 기본 문법

1) 모듈에서 export 하기

// math.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

 

2) import 해서 사용하기

// main.js
import { add, PI } from "./math.js";

console.log(add(2, 3)); // 5
console.log(PI); // 3.14

 

모듈 시스템을 사용하면 코드가 더 깔끔해지고 유지보수가 쉬워짐!

---

ES6 모듈의 장점

특징	설명
파일 단위 코드 분리	기능별로 파일을 나누어 유지보수 용이
전역 변수 오염 방지	각 모듈이 독립적인 스코프를 가짐
동적 로딩 지원	필요할 때만 import()로 불러올 수 있음
웹 브라우저 표준 지원	최신 브라우저에서 type="module"로 사용 가능

---

ES6 모듈을 브라우저에서 사용할 때주의할 점

1) type="module"을 반드시 명시해야 함

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

 

• ES6 모듈은 자동으로 defer 속성이 적용됨(HTML이 로드된 후 실행됨)
• type="module"이 없으면 브라우저가 import 문을 이해하지 못함

2) import 경로에 확장자를 반드시 포함해야 함

import { add } from "./math.js"; // O (확장자 포함)
import { add } from "./math"; // X (오류 발생)

 

3) 로컬 파일에서 실행할 경우 CORS 문제 발생

파일을 직접 열면 (file://)import가 차단됨 -> 로컬 서버 필요

---

ES6 모듈 지원 브라우저

지원되는 브라우저 : Chrome, Edge, Firefox, Safari, Opera

지원되지 않는 브라우저 : IE11, 구형 브라우저