웹팩이 필요한 이유
모듈
모듈 패턴
export/ import가 있기 전에는 어떻게 모듈을 사용했을까?
간단한 예시를 보자
인자 두 개를 받아서 더한 값을 반환하는 sum 함수를 가지고 있는 math 모듈
math 모듈을 받아서 사용하는 app.js
그리고 index.html로 이루어져있다
// math.js
function sum(a,b){
return a+b;
}// app.js
console.log(sum(1,2));export/import에 익숙해진 나는 이게 어떻게 돌아가는지 이해가 되질 않았다
app에서 import하질 않았는데 어떻게 sum을 쓸 수 있지?
답은 html에 있었다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="src/math.js"></script>
<script src="src/app.js"></script>
</body>
</html>자바스크립트를 차례로 로드하면서 전역 객체 window에 sum이 할당된 것
그래서 app에서 window에 할당된 sum을 사용할 수 있는 것이었다
이 때 순서가 바뀌면 당연하게도 window에 sum이 할당되기 전에 sum을 불러오기 때문에 사용할 수 없다
전역 객체에 할당되는 것은 매우 좋지 않다 여러 모듈을 사용하면서 이름이 중복되어 예기치 못한 에러가 날 수도 있기 때문
그래서 주로 사용한 것이 네임스페이스 패턴과 IIFE를 활용한 모듈 패턴이다
var math = math || {};
(function (){
function sum(a,b){
return a+b;
}
math.sum =sum;
})();console.log(math.sum(1,2));이런 식의 패턴을 사용해주게 되면 전역 객체에 할당된 변수들이 오염될 걱정 없이 사용할 수 있다
모듈
이제 정식으로 지원하는 우리가 흔히 접할 수 있는 모듈을 보자
export function sum(a,b){
return a+b;
}import {sum} from './math.js';
console.log(sum(1,2));html에서 모듈을 불러올 때는 이 js가 모듈을 사용한다는 것을 명시해야한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="module" src="src/app.js"></script>
</body>
</html>하지만 이러한 모듈 시스템을 모든 브라우저가 지원하지 않는다
그렇기 때문에 웹팩의 도움을 받아야한다
'Frontend' 카테고리의 다른 글
| 주요 로더와 순서 (0) | 2021.03.16 |
|---|---|
| 프론트엔드 개발환경의 이해 : Webpack (2) (0) | 2021.03.14 |
| 프론트엔드 개발환경의 이해 : NPM (0) | 2021.03.09 |
| MVC 패턴 (0) | 2021.03.06 |
| 유효성 검사는 백에서? 프론트에서? (2) | 2021.02.28 |
