초기 브라우저의 자바스크립트
1993 년 HTML 1.0 이 처음 나오고 1997년 HTML, CSS, DOM, JavaScript 의 조합으로 페이지를 개발 했을 하던 시절 [1] 자바스크립트는 보조적인 수단에 불과하였다. 그 당시의 웹 문서는 정적인 정보 전달에 초점을 두었기 때문이다.
브라우저가 단일 스레드 언어이며 동기적으로 실행 되기 때문에 하나의 전역 스코프만을 갖는다.
<!DOCTYPE html>
<html lang="en">
...
<body></body>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</html>// a.js
var name = "a";
// b.js
var name = "b";
// c.js
console.log(name) // output : 'b'그러나 점점 동적인 웹 페이지에 대한 수요와 관심이 늘어남에 따라 하나의 페이지에서 사용해야 하는 자바스크립트 파일의 개수가 늘어나게 되었다.
파일의 개수가 늘어남에 따라 개별적인 파일들이 서로의 스코프를 침범하는 문제들이 불가피하게 발생 하게 되었다.
이 당시의 문제를 해결하기 위해 자바스크립트 개발자들은 파일 별 스코프를 가지도록 하는 클로저 패턴 등을 이용하였다.
하지만 점점 하나의 프로젝트를 개발하기 위해 생성해야 할 자바스크립트 파일이 늘어날 수록 이러한 클로저 패턴은 한계점이 드러나기 시작했다.
파일 단위의 스코프를 제공하는데는 효과적이지만, 자바스크립트 파일이 많은 대규모 프로젝트에선 모든 파일을 클로저로 감싸는 것은 번거롭고 유지보수가 어려울 뿐 더러
각 파일 별 의존성 관리가 명확하지 않다는 단점이 존재 했기 때문이다.
모듈이 뭘까 ?
우선 본격적인 설명을 하기 앞서 모듈에 대해 먼저 알아보자
모듈이란 독립된 하나의 소프트웨어 또는 하드웨어의 단위를 지칭 한다. [2] 모듈은 여러가지로 정의 될 수 있지만 프로그래밍 관점에서는 큰 체계의 구성 요소이며 다른 구성요소와 독립적으로 운영 되는 단위라고 할 수 있다. [3]
모듈성
모듈성은 말 그대로 컴퓨터 프로그래밍에서 서로 독립적인 모듈들의 집합으로 구성되어 있는 정도를 의미한다.
임의의 구성 요소들이 직접적인 상호관계가 많아지면 많아질 수록 모듈성이 떨어진다고 하고, 직접적인 상호관계가 적고 인터페이스를 통해 모듈이 적절히 엮여 있을 때 모듈성이 높다고 한다.
이런 모듈성은 비단 프로그래밍 뿐 아니라 실제 세계를 이루고 있는 다양한 요소들에도 적용 되는데
하나의 자동차가 엔진, 변속기, 브레이크 등 다양한 부품으로 이뤄져있는 것도 모듈화로 볼 수 있다.
모듈성이 높은 것의 장점
복잡한 프로그램을 단순한 모듈들의 집합으로 구성하게 되었을 때의 장점은 다음과 같다.
- 재사용성 향상
모듈은 특정 기능만을 하고 독립적이기 때문에 다른 시스템에서도 재사용이 가능하다. - 독립적인 개발
다른 모듈들과 직접적인 상호관계가 없기 때문에 다른 모듈의 작업과 상관 없이 독립적인 개발이 가능하다. - 확장성 및 유연성 향상
모듈의 독립성으로 인해 특정 모듈의 수정, 추가, 제거 등이 프로그램 전체에 미치는 영향이 적다.
CommonJS 의 등장과 모듈화
자바스크립트를 브라우저에서만이 아니라 서버환경에서도 사용하고자 하는 움직임과 함께
2009년 NodeJS 에서 자바스크립트 파일을 개별적인 모듈로서 다루는 모듈시스템을 적용한 CommonJS 가 등장하였다.
자바스크립트 파일에서 module.export 을 이용해 파일을 하나의 모듈로 정의하고
require 이란 명령문을 통해 모듈을 불러와 사용 할 수 있게 되었다.
ECMAScript Module (ES Module)
CommonJS 는 서버사이드 환경에서의 모듈이기 때문에 모든 자바스크립트 파일이 로컬에 존재하고 동기적으로 불러온다는 점 에서 브라우저에서 사용하기 완벽하지 못했다.
이에 ECMA 에서는 브라우저에서 사용 가능하며 비동기적으로 모듈들을 불러올 수 있는 모듈 시스템을 소개하였고 브라우저에서 표준적으로 사용 된다.
우리에게 익숙한 import, export 문법이 ES Module 이다.
번들링의 필요성
모듈화를 통해 import, export 문으로 각 모듈별 종속성을 관리하기는 쉬워졌지만
비동기적으로 모듈을 불러오는 브라우저 특성상 종속성이 100개가 있는 자바스크립트 파일을 불러오기 위해선
100번의 네트워크 요청이 필요하다는 단점이 존재하였다.
이러한 문제를 해결하기 위한 번들링 기법이 등장하였다.
번들링이란 종속성이 있는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식 을 의미 한다.
위의 예시에서 index.js, b.js, c.js 파일은 종속성을 가지고 있는데 번들링 후에는 하나의 자바스크립트 파일로 변환 되어 한 번의 비동기 요청만으로 스크립트를 이용 할 수 있게 된다.
대표적인 번들러로는 웹팩이 존재하는데 웹 팩에선 자바스크립트 파일 뿐 아니라 css, img 파일 등도 모듈처럼 다뤄 전체 프로젝트를 모듈성 프로그래밍으로 하는데 도움을 준다.
모듈 시스템
번들링을 통해 네트워크 요청을 줄이는 것은 가능했지만 여전히 위에서 언급했던 스코프 침범 문제는 해결 할 수 없었다.
이에 번들러들은 단순히 파일을 하나의 파일로 합치는 것 뿐 아니라 합쳐진 파일 별로 독립적인 스코프를 가지도록 모듈별로 독립적인 시스템을 가지도록 번들링한다.
출처
