ES6 모듈

모듈이란?
: 🌟 프로그램을 구성하는 시스템을 기능 단위로 독립적인 부분으로 분리한 것

• 하나 이상의 논리적인 기능을 수행하기 위한 명령어들의 집합
  ex_독립적인 프로그램 그 자체 혹은 함수나 메서드 등

자바스크립트 모듈

ES6 모듈(ECMAScript 2015 모듈)은 자바스크립트에서 코드를 모듈 단위로 분리하고 관리할 수 있게 해주는 시스템.
모듈을 사용하면 코드를 재사용 가능하고, 유지보수가 쉬우며, 네임스페이스 충돌을 피할 수 있다. ES6 모듈은 import와 export 구문을 사용하여 모듈 간에 기능을 공유.

주요 특징

• 정적인 구조: ES6 모듈은 정적으로 분석된다. 즉, 🌟 모듈의 구조와 의존성은 런타임이 아닌 컴파일 타임에 결정됨. 이를 통해 더 효율적인 트리 쉐이킹(tree-shaking)이 가능해진다.

• 엄격 모드(Strict mode): 모든 ES6 모듈은 기본적으로 Strict 모드에서 실행된다. 별도로 "use strict";를 선언할 필요가 없다.

• 파일 단위 모듈: 각 파일은 자체적으로 모듈 스코프를 가진다. 따라서, 파일 내에서 선언된 변수는 해당 파일 내부에서만 유효하며, 다른 파일과 충돌하지 않는다.

모듈 내보내기 (Export)

export 키워드를 사용하여 다른 모듈에서 사용할 수 있도록 기능(변수, 함수, 클래스 등)을 내보낼 수 있다.

• export의 두 가지 주요 유형

Named Export

여러 개의 이름을 지정하여 내보낼 수 있음. 모듈에서 필요한 것만 선택적으로 가져올 수 있음.

export const pi = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return pi * this.radius * this.radius;
  }
}

Default Export

모듈에서 하나의 기본 값을 내보낼 수 있다. 모듈을 가져올 때 이름을 지정하지 않고 임의의 이름을 사용할 수 있다.

export default class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

모듈 가져오기 (Import)

import 키워드를 사용하여 다른 모듈에서 내보낸 기능을 가져올 수 있다.

Named Import

특정 이름으로 내보낸 기능을 가져온다. 중괄호를 사용하여 가져올 항목을 명시.

mport { pi, add, Circle } from './math.js';

console.log(pi); // 3.14159
console.log(add(2, 3)); // 5

const circle = new Circle(5);
console.log(circle.area()); // 78.53975

Default Import

기본 값을 가져올 때는 임의의 이름을 사용할 수 있다.

import Person from "./person.js";

const john = new Person("John");
console.log(john.greet()); // Hello, my name is John

import { pi as PI, add as sum } from "./math.js";

console.log(PI); // 3.14159
console.log(sum(2, 3)); // 5

가져올 때 이름을 변경 가능.

동적 import

import() 함수는 동적으로 모듈을 가져올 수 있게 한다. 이는 비동기적으로 작동하며, 주로 조건부 로딩이나 코드 스플리팅에 사용된다.

import("./math.js").then((math) => {
  console.log(math.pi); // 3.14159
  console.log(math.add(2, 3)); // 5
});

결론

ES6 모듈은 코드의 모듈화를 통해 재사용성과 유지보수성을 높여준다. export와 import 키워드를 사용하여 모듈 간에 기능을 공유할 수 있으며, 정적인 구조 덕분에 트리 쉐이킹 등의 최적화도 가능해진다. 모듈을 적절히 사용하면 대규모 프로젝트에서도 코드 관리를 효과적으로 할 수 있다.