자바스크립트의 Module(모듈)

모듈(Module)

모듈이란?
프로그램을 구성하는 구성요소의 일부분을 의미하며, 재사용이 가능한 코드 조각 모음을 의미하기도 한다.

• 개발하는 애플리케이션의 크기가 커지면서 확장성과 유지보수 측면에서 파일을 여러개로 분리하여 각 파일을 우리는 모듈이라고 부른다.

모듈(Module)을 사용하는 이유는?🧐

• 프로그램을 효율적으로 관리하고 성능을 향상시킬 수 있다!
• 소프트웨어의 디버깅과 테스트, 통합, 수정이 용이하다!
• Side Effect를 최소화할 수 있다.
• 개발과 유지보수가 용이하다.
• 자체적인 스코프를 가져 코드와 네임스페이스의 충돌을 막울 수 있다.

"자체적인 스코프를 가진다" 라는 말이 무슨 의미인지 알아보자!😗

• JS는 기본적으로 전역 스코프와 함수 스코프가 존재한다고 하였다.
• 모듈은 파일 단위로 코드를 구성하기 때문에 모듈 내에서 선언되 변수나 함수는 해당 모듈 안에서만 유효하다. => 즉! 다른 모듈에서는 접근할 수 없다는 의미가 된다!
• 이러한 자체적인(=독립적인) 스코프를 가지는 특성때문에 변수의 이름 충돌을 방지하고 코드를 모듈화하여 유지보수와 관리를 용이하게 해주는 것이다

// 모듈의 기본 예시 코드

// 모듈 1 : math. js
export function add(a, b){
  return a + b;
}
// 모듈 2 : calculator.js
import { add } from './math.js';
console.log(add(2, 3)); // 출력은 5

• 기본 예시 코드 설명
  math.js 모듈은 add 함수를 정의하고 있고, calculator.js 모듈은 'math.js' 모듈의 add 함수를 가져와 사용하고 있다. 각 모듈은 서로 독립적인 스코프를 가지며 add함수는 math.js 모듈의 스코프 안에서 정의되어 있으므로 calculator.js에 접근할 수 있다.

여기서 './math.js'와 같이 상대 주소를 사용하였는데 상대주소와 절대주소에 대해 간단히 알아보겠다.

상대주소와 절대주소 🛣️

1. 상대 주소 : 현재 모듈의 위치를 기준으로 다른 모듈의 위치를 나타낸다.
2. 절대 주소 : 파일 시스템 전체 경로를 사용하여 모듈의 위치를 나타낸다

// 상대주소의 예시 코드 1

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

// 모듈 2: calculator.js
import { add } from './math.js'; // 상대주소 사용

console.log(add(2, 3)); // 출력: 5

• 위 코드는 calculator.js모듈에서 math.js 모듈을 불러올 때 상대주소를 사용하였다.
• './math.js/는 현재 모듈인 'calculator/js'의 위치를 기준으로 상대적인 위치에 있는 'math.js' 모듈을 불러오는 것을 의미한다.

// 절대주소의 예시 코드 1
// 모듈 1: math.js
export function add(a, b) {
    return a + b;
}

// 모듈 2: calculator.js
import { add } from '/Users/user/Documents/projects/math.js'; // 절대주소 사용

console.log(add(2, 3)); // 출력: 5

• /Users/user/Documents/projects/math.js는 파일 시스템 전체 경로를 사용하여 math.js 모듈의 위치를 나타낸다.

그럼 '../math.js'의 의미는 무엇인가?

// 상대주소의 예시코드 2
// 모듈 1: math.js
export function add(a, b) {
    return a + b;
}

// 모듈 2: calculator.js
import { add } from '../math.js'; // 상대주소 사용

console.log(add(2, 3)); // 출력: 5

• 현재 모듈이 /Users/user/Documents/projects/calculator.js에 위치해 있다고 가정하면 이때 ../math.js를 사용하면 /Users/user/Documents/projects/math.js를 불러온다.
• calculator.js 모듈은 상대주소 ../math.js를 사용하여 현재 디렉토리의 상위 디렉토리 내에 있는 math.js 모듈을 불러온다.

---

트리 쉐이킹(Tree Shaking)

• 여러개의 파일로 나눠둔 모듈을 하나의 파일로 결합하는 과정 = 번들링(Bundling)라고 부른다.
• 번들리 과정에서 실제로 사용되지 않는 함수나 변수가 포함되어 있으면 번들 크기가 늘어나 로딩 시간이 길어지는 문제점이 발생한다.

번들리 과정에서 발생할 수 있는 문제점을 해결하기 위해 불필요한 코드(사용되지 않는 모듈)을 제거하고 식별하는 기법 = '트리 쉐이킹(Tree Shaking)' 이라고 한다.

• 트리 쉐이킹을 함으로써 번들의 크기를 최소화하고 로딩 속도를 개선할 수 있다.

---

모듈의 종류

• ESM(ECMAScript) 방식
• CJS(Common JS) 방식

모듈의 종류는 ESM방식과 CJS 방식으로 나뉘는데 설명은 다음 포스트에 진행하겠다!!

---