TIL 61. 2024-03-28

모듈

: 코드를 조직화하고 재사용 가능한 단위로 분리하는 방법을 '모듈'이라 하며, 이러한 코드를 각각의 파일로 나누어서 관리하는 것을 '모듈화'라고 한다.그리고, 여러 모듈로 나누어 export로 내보내기도 하고, import로 가져오기도 한다.

예시)

// myModule.js
export const add = (a, b) => {
  return a + b;
};
export const subtract = (a, b) => {
  return a - b;
};
//위의 모듈(파일)에서는 add와 subtract 함수를 내보낸다.

// main.js
import { add, subtract } from './myModule.js';
console.log(add(2, 3));
console.log(subtract(5, 3)); 

//main.js에서 import 키워드를 사용하여 myModule.js 모듈(파일)에서 내보낸 함수들을 가져와 사용한다.

번들

: 기능별 또는, 관련된 데이터와 함수를 하나로 묶어주는 도구이며, 쉽게 말해 모듈화된 파일을 하나로 묶어주는 기능이다. 이렇게 하나의 파일로 결합하는 것을 "번들링" 이라고도 하는데 번들링은 주로 JavaScript 및 CSS 파일을 하나의 파일로 결합하는 것을 의미한다. 이를 통해 웹 애플리케이션의 성능을 최적화하고 관리를 더 쉽게 만드는데 도움이 된다.