[프론트엔드][개발환경]웹팩 & 웹팩 보일러 플레이트

예전에 프론트엔드 개발을 공부할 때 기본적인 html, css, js 등 퍼블리싱부터 이전의 웹 컴포넌트 전의 웹 개발 방식부터 공부했다. 그러다가 리액트, 뷰 등의 모던 웹 개발을 접하면서 기존 웹개발의 경우 html 파일(jsp, php)을 기준으로 js, css 파일 별로 구분을 해서 너저분하게 개발을 하는데 반해 모던 웹개발의 경우 웹 컴포넌트 단위로 쪼개서 깔끔하게 개발을 하는 점에서 코드 재활용성, 코드 품질 향상 및 의존성 관리 등의 점에서 큰 매리트를 느끼게 되었다.

그로 인해서 리액트와 뷰를 공부하기 시작했으나 뷰나 리액트를 제네레이터(vue-cli, create-react-app)로 세팅하는 게 아닌 cdn 방식으로 개발을 하면 기존 웹 개발과 차이가 사실상 거의 없었고 내가 좋다고 느낀 웹 컴포넌트 방식으로 프로젝트 구조를 만드는게 힘들다는 점을 느꼈다. 여기서 내가 모르는 부분이 존재한다는 점을 느꼈고, 그를 이해하기 위해서 webpack에 대해서 공부할 필요를 느꼈다. 왜냐하면, 모듈 단위의 웹컴포넌트 형식의 프로젝트 구조를 짜는데 리액트나 뷰가 핵심적인 역할을 하지 않는다는 것을 이해했기 때문이다.

웹팩은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만든다.
이를 통해서 html에 일일이 js 파일을 type="module"로 링크를 달 필요가 없어지고(귀찮은 짓) 여러 플러그인과 로더들을 통해서 다양한 기능들을 웹팩으로 묶어서 프로젝트를 자동화해서 관리할 수 있게 된다. 내가 느꼈던 좋은 장점들은 사실 리액트나, 뷰가 아니라 대부분이 웹팩이 가진 장점이었다는 것을 알게 되었다.

웹팩의 경우 주로 공식문서를 통해서 공부했었고(그때는 번역이 미흡했는데 지금은 전부 한글로 지원해준다.) 필요한 부분의 공부가 끝난 후 정확히 기억은 안 나지만 해외의 웹팩 관련된 포스트를 참고해서 깃허브에 기본적인 웹팩이 셋팅된 보일러 플레이트(템플릿)를 만들었다. 환경 설정에 관한 모든 점을 암기하고 매번 그 세팅을 반복하는 게 편리하지 않다는 점 때문이다. 그후 기본적인 웹팩 세팅에 관해서 모듈들을 업데이트하면서 관리하고 프론트 개발을 시작할 때 해당 repo를 통해서 초기 세팅을 간단히 처리하고 있다. 그리고 주기적으로 공식문서 등을 참고하면서 업데이트하고 있다.

1. 웹팩 보일러 플레이트 - https://github.com/yoonjonglyu/webpack-init-template

GitHub - yoonjonglyu/webpack-init-template: webpack, js, frontend

2. 웹팩 한국 공식문서 - https://webpack.kr/

webpack

추가로 요즘 빌드 툴로 esbuild나 swc가 점점 떠오르고 있어서 공부해야 할 필요성을 느끼고 있다. 특히 swc 러스트 공부해야 하는데..