💡 웹팩은 모듈 번들러 이다!
웹팩을 설명하기 위해 이해하고 넘어가야할 것이 바로 "모듈" 입니다. 😉

모듈

모듈(module)

---

A module is one of the separate parts.

• 자바스크립트에서의 모듈이란 기능이 구현된 "자바스크립트 개별 파일"이라고 생각하면 됩니다.
• 잘 만든 모듈패턴은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope이 되도록 구현해야 합니다. 그래야 파일 내에서 변수도 자유롭게 선언할 수 있고, 관련 기능만 하나의 파일에 구현해서 다른 파일의 방해를 받지 않을 수 있게 됩니다!
• 바닐라 자바스크립트에서의 모듈패턴은 scope 개념을 활용해서 직접 구현해야 하며, 다른 도움 없이는 모듈화 시스템을 구축할 수 없습니다. commonJS, AMD, ES2015 등을 통해서 모듈화 시스템을 사용할 수 있습니다. 프론트앤드에서 모듈화는 아주 예전부터 있던 개념이며, react가 없던 시절에도 모듈화를 사용했었습니다.

정의

---

• 프로그램을 구성하는 단위
• 자신만의 독립적인 실행 영역
• 보통 파일 단위로 나뉨

모듈패턴과 필요성

---

• 자바스크립트의 소스를 모듈 단위로 관리하거나 라이브러리 등을 만들 때 사용
• 전역 변수의 사용을 최소화 하기 위함
• 변수 scope을 지정해서 사용하기 위함
• Reusablility, Isolation, Organization
• 모듈 단위로 소스를 개발하면 각 모듈 간의 의존성을 최소화하거나 의존성 파악하기 쉬움

모듈 구현

옛날 이야기

---

• 왜 필요했나? 네임스페이스 생성을 위해 모듈패턴을 사용함.
• 라이브러리(CRA) 없이 모듈 패턴 구현할 때는 어떻게 했나?

  // 이렇게 감싸서 하나의 모듈을 만들 수 있습니다.
  (function () {
  	// scope가 막혀있기 때문에 전역변수가 생성되지 않습니다.
    // 즉시 실행함수는 보통 일회용 코드
  })();
  
  // 모듈 또 하나
  (function () {
  	window.myLibrary = /* */;
  }());
  
  // 모듈 또 하나
  (function () {
  	var math = {
  		add: function () {}
  	}
  
  	window.math = math;
  }());

  • 잠깐. 위의 코드 아직 어색해요? 어색 하면 즉시실행함수 보고 오기
• Kakao 로그인할 때 Kakao가 하나의 네임스페이스라고 생각하시면 됩니다. 자바스크립트 라이브러리나 특정 회사의 외부 모듈의 용도를 명확하게 구분하고자 모듈 패턴을 확장하여 네임스페이스로 활용합니다.

  //kakao 코드 초반
  (function (f) {
    if ((typeof exports === "undefined" ? "undefined" : _typeof(exports)) === "object" && typeof module !== "undefined") {
      module.exports = f();
    } else if (typeof define === "function" && define.amd) {
      define([], f);
    } else {
      var g;
  
  		if (typeof window !== "undefined") {
        g = window;
      } else if (typeof global !== "undefined") {
        g = global;
      } else if (typeof self !== "undefined") {
        g = self;
      } else {
        g = this;
      }
  
  		g.Kakao = f();
    }
  })(function() { return /* 내부 코드 */ })

모듈시스템, 라이브러리

모듈 기능 표준화

---

ES Module

• 자바스크립트를 이용하는 웹페이지의 코드가 복잡해지기 시작하면서 효율적인 소스 관리가 필요해져서 이제는 모듈을 정의하는 것 또한 표준으로 정의되었습니다.

  <!-- IE는 아직 지원 안 됨. 사용하려면 type 속성 추가 -->
  <script type="module" src="index.js" />

  // index.js
  import fn, { name } from './module';
  
  console.log(name);
  console.log(fn());

  // module.js
  export const name = '모듈';
  
  export default function() {
    console.log('익명함수')
  }

• 아직 IE지원이 안되므로, 모듈을 사용하려면 babel, webpack이 필요하다.
  • babel은 ES6 → 브라우저에서 사용할 수 있도록 모듈을 commonjs로 바꿔주고,
  • webpack은 모듈간의 의존성을 파악하여 자바스크립트 코드를 bundle(합쳐) 해준다.

CommonJS

// routes.js

const routes = { name: "/main" };

module.exports = routes;

// index.js

const routes = require("./routes");

console.log(routes);  // { name: '/main' }