모듈이란?

구현한 세부사항들을 캡슐화하고 다른 코드에서 쉽게 사용하며, 코드의 재사용성을 높이기 위한 코드 조각들.

ES5의 모듈 패턴

과거 웹에서 동작하는 로직이 작아, js를 관리해야할 필요성을 못느꼈고 과거ES5 및 이전 버전은 모듈을 염두해 두지 않고 디자인되었음.
ES6이후 부터 모듈화 지원.
자바스크립트가 진화하면서 모듈을 정의하기 위한 다양한 문법이 개발되었음. ==> 이것을 " 모듈 포맷 " 이라고 함

모듈 포맷

ES6 이전에는 다양한 JS 모듈 포맷 만들어짐

  • AMD

  • CommonJS

  • System.register

  • Universal Module Definition

  • ES6 Moudle format (ES6)

현재 주로 사용되어지는 모듈

  • CommonJS ( Node.js가 디폴트로 사용하고 있는 모듈 포맷 )
  • ES6 Moudle format

Commonjs 포맷

  • node.js에서 사용
  • require, module.exports로 dependency와 모듈 정의
const fs1 = require('./fs1');
const fs2= require('./fs2');
const createFile = () => {
 ...
}
...
module.exports = { createFile }

ES6 Moudle 포맷

  • ES6 이후, js가 지원하기 시작한 모듈 포맷
// lib.js
export function hello(){
...
}
import { hello } from './lib';
hello();
  • 모듈은 굳이 function이 아니어도 괜찮음. 뭐든 된다.
  • 아직까지 해당 포맷은 모든 브라우저에 지원 하지 않는다.
  • 따라서 우리는 브라우저와의 호환성 문제 때문에 Babel과 같은 transpiler를 사용하여
    ES5에서의 모듈 포맷들로 브라우저에 적용하기 전 변환 해야 한다.
    • babel :ES6 이상의 최신 문법으로 작성한 자바스크립트 코드를 ES5 이하의 예전 문법으로 작성한 것 처럼 소스 코드 내의 문법의 형태를 변경 가능

모듈 로더

  • 주요 모듈 포맷으로 작성된 모듈을 해석하고 로드
  • 런타임에서 실행됨
  • 예를 들어, 우리가 모듈 10개를 불러온다면, 스크립트태그 10개가 추가된다고 보면 됩니다.
    지금도 많이 쓰이는 방식이지만, 한가지 아쉬운 점은 스크립트를 이렇게 나눠서 로딩하게 되면 로딩하는데 시간이 매우 많이 걸리게 된다는 것입니다.
    하나의 js파일에 쓸 수 있는것을, 나눠서 30개의 js로 코딩해서 모듈로더를 통해 불러오게된다면, 30번 불러오게 됩니다.
    http는 비용이 큰 프로토콜이라 매우 큰 부하를 주게된다고 합니다.
    그래서 나온 발상이 “빌드시간에 합치면 되지 않을까?”였습니다.
    이게 모듈 번들러입니다.

모듈 번들러

  • 모듈 번들러는 모듈 로더를 대체합니다.
  • 모듈 로더와는 반대로 모듈 번들러는 빌드타임에 실행됩니다.
  • 대표적으로 Browerify 와 Webpack이 있음

0개의 댓글