[JavaScript] JavaScript의 Module화

·2022년 11월 14일
0

Javascript

목록 보기
7/16

📌 JavaScript Module

📍 JavaScript Module 이란?

프로그래밍에서 모듈이란 코드들의 묶음이라고 볼 수 있다.
높은 독립성을 바탕으로 기능적으로 구분될 수 있는 단위로 묶은 코드들을 좋은 모듈화를 구현했다고 볼 수 있다.

📍 Module 사용의 장점

📝 유지 보수의 용이함

모듈이란 기능적으로 구분될 수 있는 코드들을 높은 독립성을 가질 수 있도록 묶어놓은 코드 묶음이므로 모듈간의 결합도가 낮다.
이로 인해 수정이 필요한 경우 연관 있는 모듈만 업데이트함으로써 최소한의 작업을 통해 유지보수가 가능하다.

📝 네임스페이스

JavaScript에서 top-level function의 scope 밖 변수들은 글로벌 변수로서 어디서든 접근이 가능하다.
이는 프로그램 규모가 커짐에 따라 디버깅을 어렵게 하는 요인이 되는데, 모듈을 사용함으로써 변수들을 위한 private 공간을 만들 수 있다.

📝 재사용

여기 저기서 사용되는 동일한 기능에 대해 별도로 모듈화하여 어디서든 필요에 의한 재사용이 가능하다.

📌 CommonJS

  • 서버사이드 및 데스크탑 어플리케이션에서 지원하기 위해 만든 방식으로, Node.js에서 사용 가능하다.
  • require, module.exports를 사용하는 방식
  • module.exports의 module은 예약어이며, 현재 모듈에 대한 정보를 가지고 있는 객체이다.

    예약어 ? 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어 (await, break, catch, const 등)

// serach.js
const getWord = () => {};

module.exports = {
  getWord
};

// index.js
const searchModule = require('./search.js');
searchModule.getWord();

module.exports를 exports로도 사용 가능하다.

  • module.exports는 빈 객체를 참조
  • exports는 module.exports 참조
  • require는 module.exports를 리턴받음

📌 AMD (Asynchronous Module Definition)

  • 비동기 모듈에 대한 표준안
  • 모듈 로딩이 다 될 때까지 동기로 기다릴 수 없기 때문에 비동기 모듈 방식이 브라우저쪽에서 더 큰 효과를 발휘한다.
  • define(), require()를 사용하는 방식

📌 ES6 (ES2015) 방식

  • import, export 방식 사용
  • 모든 브라우저가 지원하는 것은 아니므로 Babel의 @babel/plugin-transform-modules-commonjs을 통해 컴파일한다.
  • export하는 방식에 따라 import해서 사용하는 방식이 달라진다.
// export default
const getWord = () => {};
export default getWord;

// import
import getWord from 'searchJS';

// export {}
const getWord = () => {};
export { getWord };

// import
import {getWord} from 'searchJS';
  • default export는 모듈 내에서 한 번만 사용 가능하다.
  • named export는 여러 번 사용 가능하다.
profile
개발을 개발새발 열심히➰🐶

0개의 댓글