프론트엔드 개발환경 웹팩(1)

제이든·2022년 1월 5일
0

웹팩

목록 보기
1/5
post-thumbnail

웹팩에 대해서 '공부해야지.. 포스팅해야지..' 마음 먹었었지만 그렇게 몇 달은 지났다.

이제서야 공부를 하고 포스팅하게 되었다 📌

1. 등장 배경

웹팩이 등장한 배경에 대해서 자세히 알아보자. 초창기 자바스크립트는 말 그대로 스크립트로서 큰 기능을 기대하지 않았다. 브라우저를 동작시키기 위해 아주 최소한의 기능만 했을 뿐이었다. 그러나 웹의 비중이 점차 커지고 js의 역할이 방대해짐에 따라 코드도 길어지고 파일 수도 많아졌다.

기능에 따라 파일을 나누고 관리할 필요성이 생긴것이다
이 때 부터 모듈의 개념이 도입되기 시작했다

모듈을 지원하기 시작한 것은 ES2015부터이다. import/export구문이 없었던 모듈 이전 상황에 대해 알아보자.

src/math.js

function sum(a, b) {
  return a + b;
}

src/app.js

sum(1,2); // 3

이 두가지 파일을 하나의 HTML 파일에서 로드해야만 실행이 된다.

index.html

🚨 문제는 이 sum이라는 함수가 전역 공간에 노출된다는 점이다. 다른 파일에서도 sum이라는 이름을 사용하면 충돌한다.

1.1 IIFE 방식

이런 문제를 예방하기 위해 스코프를 이용했다. 스코프를 만들어 외부에서 안으로 접근하지 못하도록 하는 것이다.

src/math.js

var math = math || {}; // namespace

(function (){
  function sum(a,b) {
    return a + b;
  }
  math.sum = sum;
})();

같은 코드를 즉시실행함수로 감쌌기 때문에 다른 파일에서 안으로 접근할 수 없다. 전역에 등록한 math라는 네임스페이스만 잘 활용한다면 모듈화를 할 수 있다.

1.2 다양한 모듈 스펙

AMD와 CommonJS는 모듈 스펙을 제공한다.
CommonJS는 자바스크립트를 사용하는 모든 환경에서 모듈을 제공하는 것이 목표였다.
exports로 모듈을 내보내고 require로 불러들인다.

src/math.js

exports function sum(a,b) { return a + b;}

src/app.js

const math = require('./math.js');
math.sum(1,2); // 3

AMD는 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표였다.

UMD는 AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태이다.

이렇게 각 커뮤니티에서 각자 스펙을 제안하다가 ES6에서 표준 모듈 시스템을 도입했다. 지금은 바벨과 웹팩을 이용해 모듈을 사용하는 것이 일반적이다

src/math.js

export function sum(a,b){
  return a + b;
}

src/app.js

import * as math from "./math.js"
math.sum(1, 2); // 3

1.3 브라우저의 모듈 지원

인터넷 익스플로러는 모듈을 지원하지는 않지만 곧 종료될 것이고 👍 대부분이 크롬 브라우저를 사용하는데 크롬은 모듈시스템을 지원한다.

index.html

<script type="module" src="app.js"></script>

script태그로 로드할 때 type="text/javascript"대신 type="module"을 사용한다.

브라우저에 무관하게 모듈을 사용하고 싶다..

이 때 사용할 것이 웹팩이다

자세한 것은 다음편에서 알아보자.


김정환님 블로그를 토대로 작성된 포스팅입니다.

profile
개발자 제이든

0개의 댓글