프론트엔드 개발 환경 : Webpack - 배경

 

 

 

안녕하세요! 호기심 많은 도라희몽입니다!

웹팩 배경이나 기초에 대해서는 한번 훑긴 했긴 했지만, 누군가 파고드는 질문을 하게 될 때

당황하지 않고, 버벅이지 않기 위해 블로그를 다시 한번 정리할려구 합니다

또한 누군가에게 설명할 때 이해하기 쉽게 설명할 수 있는 그때 까지!!

---

 

 

웹팩 배경

웹팩의 배경을 살펴보려면 import/export 가 없던 모듈 이전 상황부터 살펴야 한다.

// sum.js
function sum (a ,b ){return a + b}; // 전역 공간에 sum 함수가 노출된다.

// app.js
sum(1,2); //3

sum.js가 로딩되면 app.js는 sum이라는 함수를 찾은 뒤에 함수를 실행한다.

문제는 다른 파일인데도 불구하고 sum이라는 함수가 전역 공간에 노출되는 것이다.

이럴 경우 app.js 파일 안에서 sum이라는 함수를 선언한 경우 전연 공간에 있는 다른 sum 함수와 충돌이 생기게 된다.

 

이를 막기 위해 탄생한 게 IIFE이다.

IIFE 모듈 

즉시 실행 함수 (IIFE)
함수 스코프를 만들어 외부에서 안으로 접근하지 못하도록 한다.

쉽게 말해 스코프가 생기면서 스코프 외부와 이름 충돌을 막을 수 있다.

// sum.js
var math = math || {}; // math 네임스페이스 math가 있으면 할당 없으면 빈 객체

(function () {
    function sum(a, b) {
        return a + b;
    }
    math.sum = sum; // 네임스페이스에 추가
})();

// app.js
math.sum(1,2) //3

같은 코드를 즉시 실행 함수로 감쌌기 때문에 다른 파일에서 안으로 접근할 수가 없다. 

'sum'이란 이름은 즉시실행함수 안에 감추어졌기 때문에 외부에서는 같은 이름을 사용해도 괜찮다.

 

다양한 모듈 스펙

자바스크립트 모듈을 구현하는 대표적인 것이 Common JS와 AMD가 있다.

1. Common JS

Common JS는 자바스크립트를 활용하는 모든 환경에서 모듈 하는 것이 목표라고 한다.

exports 키워드로 모듈을 만들고 require() 함수로 불러들이는 방식이다.

대표적으로 node.js에서 사용하고 있다.

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

//app.js
const math = require("./math.js")
math.sum(1, 2) // 3

2. AMD

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

주로 브라우저 환경이다.

3. UMD

UMD(Universal Module Definition)는 AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태다.

4. ES 2015 표준

지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이다.

export 구문으로 모듈을 만들고 import 구문으로 가져올 수 있다.

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

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

추가적인 내용

import * as Math from "./add.js"; // math라는 이름으로 add 파일안에 있는 모든 객체를 불러온다.
import {sum} from "./add.js"; // add 파일안에 있는 내가 필요한 것만 가져온다.

브라우저의 모듈 지원

안타깝게도 모든 브라우저에서 모듈 시스템을 지원하지 않는다.

익스플로러를 포함한 몇몇 브라우저에서는 여전히 모듈을 사용하지 못한다.

//index.html (브라우저 : 크롬)
<script type="module" src="app.js"></script>

자바스크립트의 모듈화 도구 Webpack

웹 개발을 하면서 자바스크립트로 작성하는 코드의 양이 늘어나게 되면서,

유지와 보수가 쉽도록 코드를 모듈로 나누어 관리하는 모듈 시스템이 필요해지게 된다.

그러나, 자바스크립트 언어 자체가 지원하는 모듈 시스템이 없기 때문에 이러한 한계를 극복하는 것 중에 하나가 웹팩이다.

 

Webpack은 common js와 amd의 명세를 모두 지원하는 자바스크립트의 모듈화 도구이다.

 

Webpack의 모듈 정의와 모듈 사용

1. 모듈 정의

모듈을 작성하고 module.exports 속성에 외부에 배포할 모듈을 전달해서 모듈을 정의한다.

module.exports = {message: 'webpack'};

 

2. 모듈 사용

모듈을 사용할 때는 모듈을 로딩하는 파일의 require() 함수에 로딩할 모듈의 경로를 전달한다. 

alert(require('./examplemodule).message);

3. 모듈 중첩 사용

여러 모듈을 합치거나 중첩해서 모듈을 로딩할 수도 있다.

코드의 예시는 'HelloWorld'를 구성하는 단어를 모듈로 분리한 다음 두 모듈을 합쳐서 사용하는 것이다.

//hello.js
module.exports = 'Hello';

//world.js
module.exports = 'World';

//greeting.js
var greeting = require('./hello') + require('./world');

module.exports = greeting;

//app.js
alert(require('./greeting'));

모듈을 정의하고 사용하고 로딩하는 것은 어렵지 않지만, 모듈로 만든 파일을 바로 웹 브라우저에서 실행할 수 없다.

webpack으로 컴파일해서 브라우저에서 실행할 수 있는 형태로 바꿔줘야 실행이 가능하다.

 

 

 

인프런 - 김정환님의 프론트엔드 개발환경의 이해 강의 위주로 공부해서 정리한 글입니다.

참고자료 1) : 김정환님의 블로그

참고자료 2) : 김정환님의 강의

참고자료 3) : 네이버 D2