자바스크립트에서 모듈이란, 코드를 재사용 가능한 단위로 만드는 방법입니다. 이를 통해 전체 코드베이스를 유지 보수하기 쉽고, 모듈 간의 의존성을 관리할 수 있습니다.

쉽게 말하자면, 긴 파일을 여러개로 쪼개서 관리하는 방법입니다!

오른쪽이 더 나아요!

실습하기

다음은 간단한 예시를 통해 모듈화의 장점에 대해서 알아보겠습니다. 같이 실습해보면 더욱 좋을 것 같습니다.

VSCode를 열고, index.html 파일을 하나 만들어주세요.

<!-- index.html -->
<script>
  const add = (a, b) => a + b;
  const sub = (a, b) => a - b;
  const mul = (a, b) => a * b;
  const div = (a, b) => a / b;

  console.log(add(1, 2)); // 3
  console.log(sub(3, 1)); // 2
  console.log(mul(4, 2)); // 8
  console.log(div(6, 3)); // 2
</script>

Live Server를 통해 실행시켜보면, 콘솔 로그들이 잘 출력된 것을 확인할 수 있습니다.

이제 이 자바스크립트 코드들을 차례대로 분리해보겠습니다.

html 파일과 js 파일 분리

VSCode에서, main.js 파일을 하나 만들어주세요. 저는 js 파일만 따로 모아두는 modules이라는 폴더 안에 만들었습니다.

• VSCode 폴더 구조

<!-- index.html -->
<script src="./modules/main.js"></script>

// modules/main.js
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;

console.log(add(1, 2)); // 3
console.log(sub(3, 1)); // 2
console.log(mul(4, 2)); // 8
console.log(div(6, 3)); // 2

이제는 index.html 파일에 자바스크립트 코드가 없네요! 하지만 콘솔을 확인해보면 동일하게 로그들이 잘 출력되는 것을 확인할 수 있습니다.