번들러

내가 2015년에 퍼블리싱을 접했을때 

자바스크립트는 주로 Jquery라는 라이브러리 코드를 불러서 

자바스크립트 언어보다 더 쉽게 화면을 조작해주는 언어로 많이 사용했다. 

HTML에서 js파일을 script태그로 연결했는데, 

뭔가 편리하자고 분리를 해놓으면 태그가 많아지고, 

하나의 파일로 하자니 매 HTML에 넣는 js파일마다 중복된 코드가 많아졌다. 

 

최근의 자바스크립트는 HTML에서 시작점인 js를 건다. 

js는 또다른 js파일에서 필요한 부분을 모듈로 연결해서 손쉽게 쓸 수 있다. 

놀랍게도 나중에 웹페이지를 열어서 js를 보면 ... 끄게된다. 

일단 줄바꿈이 없고 가독성이 확 낮다....

 

번들러는 js안에서 js를 부르고 scss가 변수모음 scss를 부르고 하는등

최근의 발전되고 복잡해진 웹 세상에 모듈을 통해 분리하고 필요한부분을 가져오는 등 그 복잡한 과정속에 

그 복잡한 코드들을 정리해준다. 

필요한 모듈의 코드를 가져오고 합치며, 

압축해주고, 때로는 불필요한 코드를 제거하고 

심지어 babel과 같은 트랜스 파일러를 연결해서 

최신 스크립트로 짜놓은 코드를 지정된 버전의 자바스크립트 문법으로 변환까지 한다. 

그 외에도, 이미지 압축이라던지 하는 다양한 일을 수행한다. 

 

한마디로 js안의 복잡한 세상을 클라이언트가 처리하기 쉽게하는 것이다. 

보통 사용자들이 js를 확인하지 않으니까 가독성은 떨어지지만, 

CSR이 많이 사용되는 요즘에 있어 이런 번들러의 압축과 편집이 없다면 

브라우저는 대용량의 파일 중 필요한부분을 찾아 로딩하기까지 많은 시간이 들었을 것이다. 

 

이러한 번들러 중 대표적인 것은 webpack이다 

실제로 create-react-app같은 경우 자동으로 webpack을 불러와준다. 

점점 커져가는 앱의 규모에서 번들러가 없다면 

우리는 우리의 코드 외에도 라이브러리 코드들까지 신경써가면서 

엄청나게 복잡한 코드들을 헤매야할 것이다. 

그리고 사용자가 많을 수록 다양한 클라이언트pc의 브라우저환경에 대해 

정의해야한다면 그 얼마나 복잡하고 어려운 일일까

 

번들러 만만세다.