[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩이 필요한 이유)
웹팩에 대해 알아보기 전에 먼저, 웹팩을 왜 사용해야하는지 필요한 이유에 대해 살펴보자.
웹팩이 필요한 이유와 기본 동작
배경
모듈은 재사용할 수 있는 코드를 어떤 한 조각으로 만들어 둔 것(함수)을 의미한다. 결국 같은 코드를 반복하지 않고 모듈을 사용하면 효율적으로 코드를 작성할 수 있고, 유지보수가 쉽다. 이런 모듈을 문법 수준에서 지원하기 시작한 것은 ES2015 부터다.
import/export 구문이 없었던 모듈 이전 상황으로 돌아가보자.
math.js
function sum(a, b) {
return a + b
} // 전역 공간에 sum이 노출app.js
console.log(sum(1, 2)) // 3위 코드는 모두 하나의 HTML 파일 안에서 script 태그로 불러와 로딩해야 실행된다. math.js가 로딩되면 app.js는 sum 함수를 찾아 실행한다. 문제는 sum이 전역 공간에 노출되어 다른 파일에서도 sum에 다른 값을 할당하고 그러면 충돌할 것이다.
IIFE 방식
이러한 문제를 예방하기 위해 scope(범위)를 사용한다. 이것을 IIFE 방식의 모듈이라고 하는데, IIFE (Immediately Invoked Function Expression)는 즉시 실행 함수 표현이다. 함수 범위를 만들어 외부에서 접근하지 못하게 한다.
math.js
var math = math || {} // math 네임 스페이스
;(function () {
function sum(a, b) {
return a + b
}
math.sum = sum // 네임 스페이스에 추가
})()위와 같이 즉시 실행 함수로 감싸 다른 파일에서 sum 함수에 접근할 수 없게 했다. 심지어 같은 파일 내에서도 접근이 불가하다. 이는 자바스크립트 함수 범위의 특징이다. math라는 네임 스페이스에 sum 함수를 추가했기 때문에 사용하기 위해서는 math.sum 이렇게 해주면 된다. 그렇기 때문에 즉시 실행 함수로만 잘 감싸주면, 외부에서 sum 이라는 같은 이름을 사용해도 된다.
이러한 IIFE 방식으로 자바스크립트 모듈을 구현하는 대표적인 것이 AMD와 CommonJS이다.
CommonJS는 자바스크립트를 사용하는 모든 환경에서 모듈을 하는 것이 목표이다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들인다. 대표적으로 서버 사이드 플랫폼인 Node.js에서 사용한다.
math.js
exports function sum(a, b) { return a + b; }app.js
const math = require("./math.js")
math.sum(1, 2) // 3AMD(Asynchronous Module Definition)는 비동기로 로딩되는 환경 즉, 브라우저 환경에서 모듈을 사용하는 것이 목표이다.
UMD(Universal Module Definition)는 AMD 기반으로 CommonJS 까지 지원하는 통합 형태이다.
이렇게 각 커뮤니티에서 각자의 스펙을 제안하다가 ES2015에서 표준 모듈 시스템을 내놓았다. 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이다. export 구문으로 모듈을 만들고 import 구문으로 가져올 수 있다.
math.js
export function sum(a, b) {
return a + b
}app.js
import * as math from "./math.js"
math.sum(1, 2) // 3브라우저 모듈 지원
모든 브라우저에서 모듈 시스템을 지원하지는 않기 때문에, 인터넷 익스플로러를 포함한 몇개의 브라우저는 여전히 모듈을 사용하지 못한다. 크롬 브라우저에서는 모듈 시스템을 지원하는데 사용하는 법을 살펴보자.
index.html
<script type="module" src="app.js"></script>type="text/javascript" 대신 type="module" 을 사용하여 app.js는 모듈을 사용할 수 있다.
그러나 우리는 브라우저와 무관하게 어디서든 모듈을 사용하고 싶어한다. 이러한 문제를 해결하고자 웹팩이 등장한다..!!!