(얕고 좁은) 신림 프로그래머 front-end 스터디 후기 - webpack

이번에는 아라한사님과 재린님이 webpack에 대해서 준비해주셨습니다.

https://webpack.github.io/

기술적으로 많이 이해하지는 못했지만, 이번 스터디를 통해서 프론트와 백앤드를 분리하는 시나리오를 배웠습니다.

많은 것을 알려주셨지만, 제가 얻은 얕고 좁은 지식을 정리해볼까 합니다.

우선 웹팩은 웹의 클라이언트 리소스들을 번들링(패키징)하는 도구입니다. 공홈에가면 웹팩 모듈 번들러라고 하는 군요. 모듈은 우리가 기본적으로 생각하는 기능단위를 생각하시면 될 듯합니다. 번들링은 검색해보면 세트로 묶어서 파는 것이라는 내용이 많이 나오는데요, 웹팩의 번들링은 js, css, img를 세트로 묶어주는 것을 말합니다. 이미지까지 묶인다는게 참 신기했습니다.

개념은 이 정도로 이해했고, 그러면 어떻게 프론트와 백앤드를 웹팩으로 분리할 수 있을까요. Single Page Application을 기준으로 설명을 해보겠습니다. SPA는 클라이언트에서 서버 api를 호출하는 기능까지 모두 들어가 있습니다. 우선 그렇게 백앤드에 독립적으로 스크립트를 작성합니다. 

그리고 웹팩을 통해서 서버를 만듭니다. 이 서버는 웹팩이 설정한 대로 번들링한 파일을 특정위치에 생성합니다. html은 번들링한 파일을 가져다가 쓰면 되는거죠. 신기한 건 설정조금 하면 알아서 스크립트 태그를 삽입할 수도 있고, css와 js도 분리할 수 있습니다. 웹팩 서버 자체로 프론트 앤드 리소스 서버가 되는 거죠. 그리고 웹팩이 자동으로 계속 번들링 해주는 것이고요.

그런데 아주 뉴비가 볼때 웹팩은 좀 어렵습니다. 그런데 아라한사님이 아주 잘 정리해주셔서 따라하다보면 어렵지 않게 익힐 수 있을 것 같습니다.

아라한사님 자료 링크를 걸어둡니다. 좋아요 혹은 별 눌러주세요~

http://www.slideshare.net/meadunhansa/ss-66563467

https://github.com/arahansa/WebpackTutorial/

PS. 사내에서 하는 node.js 스터디 아니었으면 진짜 두시간 많이 혼란스러웠을거 같네요.