Javascript

Module이란?

John' 2023. 11. 13. 22:37

인간은 망각의 동물이다. 특정한 행동이나 생각을 자주 하지 않으면 우리 뇌 속에서는 신경의 가지치기 현상이 일어난다고 한다. 우리가 어떤 생각, 기분, 행동을 수행하지 않으면 뇌는 그와 연관된 뉴런들을 발화시키지 않는데, 그 결과 그러한 생각, 기분, 행동이 점점 약해지다가 결국 시들어버리고 잊게 되는 것을 신경 가지치기라고 한다. 그렇기 때문에 우리는 초등학교 시절처럼 리코더를 연주할 수 없는거고, 곡면의 부피를 구하는 적분 공식이나 근의 공식등에 대해 더는 기억하지 못하는 것이다. 쉽건 어렵건 지금 나는 무조건 많이 생각하고 자꾸 써보고 사용해보는 것 밖에 방도가 없다 생각한다.

 

 

 

JavaScript 모듈코드를 구조화하고 재사용 가능한 조각으로 나누는 기능을 제공하는 개념이다. 이를 통해 코드를 여러 파일로 나누고, 필요한 부분을 다른 파일에서 가져와 사용할 수 있는데, 이러한 모듈화는 코드의 유지보수성과 확장성을 향상시키며, 여러 개발자가 협업할 때 코드를 구성하기 쉽게 만든다.

 


ES6(ECMAScript 2015)부터 JavaScript에는 공식적인 모듈 시스템이 도입되었는데, ES6 모듈은 기존의 다른 모듈 시스템과 달리 자바스크립트 언어 자체에 내장되어 있다.

 

 


모듈은 export와 import 문을 사용하여 정의하고 가져오는데 아래와 같다.

 

 

모듈 내보내기 (Export):

// mymodule.js

// 변수, 함수, 클래스 등을 내보내기
export const myVariable = 'Hello, World!';

export function myFunction() {
  console.log('This is a function.');
}

 

 

모듈 가져오기 (Import):

// 다른 파일에서 mymodule.js 모듈 사용
import { myVariable, myFunction } from './mymodule.js';

console.log(myVariable); // 'Hello, World!'
myFunction(); // 'This is a function.'을 출력하는 함수 호출

 

이와 같이 모듈을 사용하면 코드를 논리적으로 나누고 각 부분을 필요에 따라 가져와 사용할 수 있다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 만든다.

 

 

.mjs 확장자:

 

.mjs 확장자는 JavaScript 모듈 파일을 나타낸다. JavaScript 모듈은 코드를 여러 파일로 분리하여 구성하고 재사용 가능한 코드를 작성할 수 있게 해주는 기능을 제공한다. .mjs 파일은 ES6(ECMAScript 2015) 이상의 JavaScript 모듈 시스템을 사용하는 파일을 가리킨다.

기존의 .js 파일은 CommonJS나 AMD와 같은 예전의 모듈 시스템을 사용하는데, .mjs 파일은 최신 ECMAScript 모듈 시스템에 따라 작성된 파일이다. .mjs 파일은 기본적으로 strict 모드로 실행되며, import 및 export 문을 사용하여 모듈 간에 코드를 공유한다.

 


예를 들어, 다음과 같은 형식으로 .mjs 파일에서 모듈을 사용할 수 있다:

// mymodule.mjs

// 모듈 내부에서 변수 또는 함수 정의
const myVariable = 'Hello, World!';

function myFunction() {
  console.log(myVariable);
}

// 모듈 밖에서 export
export { myVariable, myFunction };

 

 

다른 파일에서 이 모듈을 사용하려면 다음과 같이 import하여 사용할 수 있다:

// 다른 파일에서 mymodule.mjs 모듈 사용
import { myVariable, myFunction } from './mymodule.mjs';

console.log(myVariable); // 'Hello, World!'
myFunction(); // 'Hello, World!'를 출력하는 함수 호출

 

요약하면, .mjs 파일은 ECMAScript 모듈을 사용하는 JavaScript 파일을 나타내며, import/export 구문을 통해 모듈 간에 코드를 공유할 수 있다.