[webpack] 1) 웹팩의 정의, 모듈(Module)

https://github.com/webpack/webpack

webpack/webpack

 

# Github 웹팩 소개글

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

 

 " 웹팩은 모듈 번들러(묶음체),

주된 목적은 브라우저에서 자바스크립트 파일들을 묶어서 사용하기 위함이고,

어떠한 자원(js, css, png, jpg 등)이나 자산 등을 전송, 구축, 패키징이 가능하게 만드는 유용한 도구. "

 

 

 어느정도 해석을 해보면, 브라우저 상에서 자바스크립트 코드로 구성된 프로그램을 실행할 때 이에 필요한 자원들을 프로그램의 목적에 맞게 '모듈(Module)화' 된 내용으로 제공해주는 것 이라고 보면 될 듯 하다.

 

 

# 모듈(Module)

 일단은 웹팩을 이루는 핵심인 '모듈'을 이해하기위해, 한번 쯤 사용해 본 인스X그램의 게시물 페이지를 한번 보자.

다른 사용자의 게시물 페이지의 기능은 대략적으로 아래와 같은 구성요소가 있다.

 

1-1) 댓글 달기

: 댓글을 작성할 수 있는 레이아웃을 생성하고, 그 레이아웃 내부에 적은 텍스트를 DB에 저장하는 기능.

 

1-2) 댓글 보기

: '댓글 더 보기' 를 클릭해서 다른 사용자가 작성한 댓글을 DB에서 꺼내와, 사용자 화면에 보여주는 기능.

 

2) 좋아요 누르기

: 좋아요 버튼을 클릭해서 비어있던 하트 아이콘이 채워짐과 동시에 '눌렀다는 기록'을 DB에 저장하는 기능.

 

3) 상세 기능( 게시물 우측 상단의 점 세개 ===> ● ● ● )

: 상세기능 버튼을 클릭하여 게시물 삭제, 수정, 공유를 할 수 있는 기능

 

(더 세부적으로 들어가자면 위의 기능을 제외하고도 몇 가지의 기능들이 더 있겠지만, 큼지막하게 보면 저렇다.)

 

 

 위의 저러한 기능들을 만약 한 파일 내부에서 코드로 작성하게 되면 못해도 1000~2000줄에 해당되는 방대한 양의 코드가 될 수 있다.(물론, 필자 기준.)

뿐만 아니라, 가독성도 안좋아지고 추후에 해당 페이지에 2) 좋아요 기능 이 오류가 나더라도, 그와 관계 없는 다른 기능들의 코드를 전부다 봐야하는 문제가 생길 수도 있다.(즉, 유지보수 관점에서도 좋지 않다 라는 뜻.) 

 

 

 그래서 저러한 기능들을 각각의 파일들로 구성하는 것을 '모듈화' 라고 볼 수 있고, 조금 더 깊게 들어가면 3) 상세기능의 내부에 들어가있는 삭제, 수정, 공유에 대한 기능들도 각각 모듈화 시킬 수도 있기 때문에 단순히 '크기' 라는 것에 초점을 맞추면 안된다.(정말 적게는 함수 한 줄도 모듈이라고 부를 수 있다.) 

 

 

 그래서 이러한 관점의 프로그래밍을 '모듈화 프로그래밍' 이라고 하는데 한번 쯤 프로그래밍을 공부해봤다면 들어봤을 것이다.

 

하지만, 위에서 설명한 모듈화 프로그래밍도 100% 효율성이 좋다고만은 볼 수 없다. 

소프트웨어가 커지면 커질 수록 각각의 세분화된 모듈 파일이 늘어나고, 이러한 모듈 단위의 파일들을 호출 할때 신경써야하는 각 변수들의 스코프 문제, 그리고 호출할 때 생겨나는 네트워크 쪽의 코스트도 신경써야 한다.

*참고 http://jeonghwan-kim.github.io/js/2017/05/15/webpack.html

 

그래서 이러한 문제들을 바탕으로 나온 것이 웹팩(Webpack)의 번들링(bundling) 개념이다.

 

다음장에서 다뤄보자.