why webpack ?

imacoolgirlyo·2019년 9월 17일
0

👩🏻‍💻 정확히 webpack은 자바스크립트의 어떤 부족한 점을 채워주는 걸까?

'모듈'이란 말과 크게 관련이 있는 거 같다. 그렇다면 정확히 모듈은 어떤 걸 뜻하는지, webpack이 나오게 된 배경들은 어떤지 알아보자.

모듈 (module)

modular programming 은 소프트웨어 디자인 방법 중 하나로 어떤 프로그램의 기능들을 각각 독립적으로 분리하여 개발하는 방법이다. 즉 프로그램의 어떤 세부적인 기능은 하나의 온전한 모듈로 실행할 수 있게 된다. 잘 짜여진 모듈은 abstraction, encapsulation이 아주 잘 되어있다.
[출처] : modular programming 란?

이렇게 큰 소프트웨어를 여러 개의 기능들로 잘게 쪼개어 개발한다면 코드를 유지 보수 하기도 좋아지겠지.!

어쨌든. webpack이 나오기 전

NodeJS의 경우 modular programming을 자체적으로 지원하고 있는 반면, web에서의 모듈 지원은 아주 천천히 진행되고 있다. 복잡한 어플리케이션을 만들기 위해선 기능이나 코드들을 모듈화하여 필요할 때 불러와서 사용하는 방식을 흔하게 생각하는데, 자바스크립트는 ES6에서야 표준으로 모듈을 사용할 수 있는 import, export 가 추가되었다. 그 전까지는 CommonJS이나 AMD 같은 커뮤니티에서 만든 모듈 패턴을 사용해온 것 이다.

그 보다 더 전인 CommonJS, AMD 같은 방식도 없었을 때는

1) 각 기능 별로 script를 만들고 이를 불러오는 방법
2) 하나의 큰 js 파일에 모든 코드를 다 넣는 방법

이 두 가지 방법으로 스케일이 있는 자바스크립트 어플리케이션을 만들어야했다.

  • 1번의 경우 점점 스케일이 커질 수록 더 많은 script를 로딩 해야하기 때문에 network bottleneck이 생겼다.
  • 그렇다고 해서 2번 처럼 하나의 js 파일에 코드를 다 넣기에는 scope, size, 가독성, 유지보수 등의 문제가 발생했다.

🧐 그래서 사용하게 된 IIFEs

IIFEs는 즉시실행함수로 스크립트 파일을 IIFE로 wrap 하면 자신의 온전한 scope가 생기기 때문에 다른 기능(파일)과의 충돌이 생기지 않게 된다.
IIFEs 때문에 Gulp, Grunt 등의 task runners 들이 생기게 되었다. 이러한 툴들은 프로젝트 파일이 연결되도록 도와주었다.

하지만 IIFEs와 task runner를 사용한다면 하나의 파일을 변경할 때, 전체를 다시 rebuild 해야했다. 연결하는 방식은 script를 재사용할 수 있도록 도와주었지만 최적화는 더 어렵게 만들었다. code가 실제로 사용되는지 아닌지는 알기 어려웠기 때문 !

😎 Hello, I'm NodeJs.

Nodejs는 기존의 자바스크립트가 실행되던 브라우저 환경이 아닌 컴퓨터와 서버에서 사용할 수있는 JavaScript 런타임 이다. webpack은 Nodejs에서 실행된다.

NodeJS가 처음 release 되었을 때, 새로운 문제를 맞닿드려야 했다. 바로 자바스크립트가 브라우저 환경이 아닌 곳에서 실행된다는 것이였고, 이는 자바스크립트 코드 조각이 새롭게 로드되어야 할 때 문제가 됐다. 왜냐면 script tag를 추가할 수 있는 html 파일이 없기 때문.

그 때 CommonJS가 나와서 require 을 소개하였고 현재있는 파일에서 모듈을 로드하여 사용할 수 있게 되었다. 이렇게 되면 필요에 따라 모듈을 불러와서 사용하면 되기 때문에 코드 간의 scope 문제가 해결되었다.

하지만, 브라우저는 CommonJS를 지원하지 않았기 때문에 Browerify, RequireJS 등이 만들어졌고 이를 통해 브라우저에서도 CommonJS 모듈을 사용할 수 있게 되었다.

ECMAscript module

마침내 ECMAScript 표준으로 web에서 사용할 수 있는 모듈이 나왔지만 아직 모든 브라우저에서 완전하게 지원하지 못하고 있고 bundling이 여전히 빠르게 때문에 bundling 하는 것을 대부분 권장한다.

그래서 webpack이 하는 일은 ..?

모듈을 만들 수 도 있으면서, 기존의 모듈 형식들도 사용할 수 있고, images, font 같은 assets 등도 동시에 모듈로써 다룰 수 있게 하는 tool이 webpack이다.

좀 더 정확히 말하면, webpack은 entry 파일 부터 시작하여, 어플리케이션 전체 모듈 간의 dependencies를 확인하며 dependencies tree를 만든다. 어떤 모듈들이 연관되어 있는지 파악한 후 해당 tree 혹은 graph를 기반으로 하나의 큰 bundle 파일을 만들어 준다.

  • 그래서 webpack으로 bundle하면 구체적으로 어떤게 좋은지 궁금해졌다. 큰 어플리케이션 코드를 알아서 하나의 bundle 파일로 알아서 압축해서 전달해주니 간편하고 로딩이 더 빨라졌다는 건 알겠는데 또 다른 이점이 있을까 ?
  • 이전에 IIFEs, CommonJS들로 모듈화하여 사용한 코드들이 궁금하다.
  • abstraction, encapsulation의 특성을 가지게 모듈을 짜려면 어떻게 해야할까 ?
  • gulp나 grunt 같은 task runners는 정확히 어떤 순서로, 어떻게 연결되는 걸까?

[참고]

0개의 댓글