자바스크립트에서 모듈(Module)을 사용하는 이유

목차

목차

• 모듈이란?
• 모듈을 왜 사용하는가?
• 모듈의 장점
• export / import 문법
• CJS와 ESM

 

 

반응형

SMALL

 

---

모듈을 사용하는 방법을 알아보기 앞서 '모듈(Module)이란?

---

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는
시점이 옵니다.

이때 분리된 파일 각각을 '모듈(module)'이라고 부르고,

보통 클래스 하나 + 특정한 목적을 가지는 복수의 함수로 구성된 라이브러리 하나 정도로 구성 된다합니다.

 

 

주변에서 찾아보는 예시

• 다르게 말하여 우리 주변에서 찾아보자면, 하나의 책이 있다고 가정하여 봅시다.
  그 책의 구성을 머릿말과 목차와 여러 개의 챕터, 꼬릿말이라고 했을 때,
  이러한 구성 요소들을 각각의 모듈이라고 할 수 있겠죠.
  위와 같이, 구성들이 모여 하나의 책을 만들어 내듯이,
  여러 모듈들의 구성을 통해 프로그램 혹은 어플리케이션을 이룬다고 보면 좋을 것 같습니다.

모듈에 관한 설명을 알아보았으니 다음은 '모듈을 왜 사용하는가?'에 대해 알아보겠습니다.

---

 

그렇다면 '모듈을 왜 사용하는가?'

---

규모가 큰 프로젝트를 진행하다보면 코드가 많아지고,

코드가 많아질수록 한 파일 내에서 관리하기가 점점 어려워집니다.

따라서 우리는 효율적으로 코드를 관리하기 위해 모듈을 사용합니다.

 

 

 

모듈의 '장점'

---

• 코드의 재사용성을 높일 수 있습니다.
  모듈화된 코드는 다른 프로젝트를 진행하더라도 쉽게 사용 될 수 있습니다.

 

• 코드의 가독성을 높일 수 있습니다.
  긴 코드는 가독성을 떨어뜨리기 마련이다. 따라서 모듈화를 통해 가독성을
  보다 높일 수 있습니다.

 

• 유지 보수에 용이합니다. 

 

 

 

export / import 문법

---

모듈은 특수한 지시자로 export와 import라는 것이 존재합니다.
이것들을 적용하면 다른 모듈을 불러올 수 있고,
불러온 모듈에 있는 함수를 호출하는 것과 같은 기능을 공유합니다.

• export : 외부 모듈에서 해당 변수나 함수에 접근할 수 있습니다.
• import : 외부 모듈의 기능을 가져올 수 있습니다.

쉽게 말해서 export는 내보내기, import는 가져오기라고 알아두시면 좋습니다.

 

이를 사용하기에 앞서 ESModule 방식을 채택하겠습니다.

 

ESM의 방식으로는 크게 두 가지 방법이 있는데

1️⃣ '.js파일의 확장자를 .mjs로 바꿔주는 방법'과

2️⃣ npm init을 통해 만든 package.json내에
{ } 해당 괄호 안에 name, version, main 등의 내용이 있습니다.

여기에 아래와 같이 main 뒤에 쉼표' , '를 추가해주고 "type": "module", 을 입력하면 됩니다.

{
  "name": "directory_file_name",
  "version": "1.0.0",
  "main": "main.js",
  "type": "module",

 

✔️ 먼저 export를 할 파일을 작성해줍니다.

//  login.js
export function login(user) {
  console.log(`Welcome Back, ${user}!`);
}

 

✔️ 이후 import한 파일을 호출하면 login.js에 입력한 결과값이 나옵니다.

//  main.js
import { login } from "./login.js";

console.log(login); //  함수
login("Gyeon"); //  Welcome Back, Gyeon!

 

 

 

 

 

CJS와 ESM

---

원래 자바스크립트에는 모듈 문법이 없었다고 합니다.

애초에 브라우저를 위한 언어로 나왔기 때문이었죠.

거두절미하고 CJS와 ESM에 대하여 알아봅시다.

 

CJS

• CJS, CommonJS로 불리웁니다.
• 과거에 많이 쓰던 모듈 문법으로 require()를 통해 모듈에 접근합니다.
• module.export를 통해 모듈을 내보냅니다.

 

ESM

• ESM. ES Module로 불리웁니다.
• 새롭게 만들어진 ECMAScript 표준 방식입니다.
• ECMAScript(ECMA-262)는 JavaScript의 표준 사양을 정의한 프로그래밍 언어 스펙입니다.
• JavaScript는 ECMAScript 표준을 구현한 언어 중 하나이며, ECMAScript는
  웹 브라우저 및 서버 환경에서 실행되는 JavaScript의 기능과 문법을 정의합니다.
• 위에서 언급했듯이, 확장자를 .mjs로 바꾸거나 package.json에 "type" : "module", 을
  작성하는 방식으로 사용 됩니다.

자세한 내용은 위 예문 코드를 참조하여 주시기 바랍니다.

이상 모듈에 관한 내용은 여기까지 작성하겠습니다.

필요한 내용이 있으시면 댓글로 알려주세요. 수정 후 재업로드 하겠습니다.