Front-end/JavaScript

JavaScript 모듈(Module)

NiceKHJ 2024. 7. 22. 15:03

모듈은 코드의 재사용성과 유지보수성을 높여주는 중요한 개념입니다.

자바스크립트에서는 주로 CommonJS와 ECMAScript6(ES6) 모듈 형식을 사용합니다.

 

모듈(Module) 이란 ?

  1. 모듈의 정의 : 특정 기능을 수행하는 함수나 변수들의 코드 집합.
  2. 재사용성 : 모듈은 자체로 하나의 프로그램이면서 다른 프로그램의 부품으로 사용할 수 있습니다.
  3. 코드 관리 : 파일 단위로 모듈을 작성하면 여러 프로그램에서 재사용할 수 있어 관리하기 편리합니다.
  4. 구조화 : 애플리케이션의 규모가 커지면 기능별로 모듈화하여 개발하는 것이 중요합니다.
  5. 구성 요소 : 모듈은 특정 목적을 가진 여러 개의 함수 , 생성자 함수 또는 객체로 구성된 하나의 파일로 이루어집니다.

 

노드(Node.js)에서의 모듈 형식

Node.js 에서는 두 가지 모듈 형식을 지원합니다.

 

CommonJs 모듈

  1. CommonJS 모듈 : 표준 자바스크립트 모듈은 아니지만 Node.js 생태계에서 가장 많이 사용됩니다.
  2. ES6 모듈 : ES6(2015) 이후 등장한 모듈 형식으로 웹 브라우저 환경에서 주로 사용됩니다.

 

CommonJS 모듈 사용하기

모듈 작성 및 내보내기

 

모듈을 작성하여 다른 파일에서 사용할 수 있도록 내보낼 때 module.exports 객체를 사용합니다.

 

변수 하나씩 내보내기

 

변수를 하나씩 내보낼땐 module을 빼고 exports.변수 = 내보낼변수 를 사용한다.

 

 

모듈 가져오기

 

다른 파일에서 모듈을 사용할 때는 require() 함수를 사용합니다.

 

 

ECMAScript 6 (ES6) 모듈 사용하기

ES6 모듈은 import 와 export 키워드를 사용하여 모듈을 내보내고 가져옵니다.

 

모듈 작성 및 내보내기

ES6 모듈에서는 exports 키워드를 사용하여 함수나 변수를 내보낼 수 있습니다.

 

 

 

 

 

 

모듈 가져오기

다른 파일에서 모듈을 사용할 때는 import 키워드를 사용합니다.

 

 

모듈의 주요 특징

  1. 위치 무관 : module.exports 와 require() 는 파일의 최하단이나 최상단에 위치하지 않아도 됩니다.
  2. 파일 단위 관리 : 모듈화된 코드는 파일별로 관리할 수 있어 대규모 애플리케이션 개발 시 유용 합니다.

'Front-end > JavaScript' 카테고리의 다른 글

JavaScript 생성자함수 , 클래스  (0) 2024.07.23
JavaScript 프로토타입(prototype)  (2) 2024.07.23
자바스크립트 객체  (2) 2024.07.19
객체 지향 프로그래밍  (0) 2024.07.19
JavaScript ( 함수 정리2)  (0) 2024.07.18