| 부족한 프론트엔드 실력 때문에, 본격적인 프로젝트 시작 전 다른 팀 프론트엔드들에게 조언을 구했다. 다양한 테크 스택에 대한 이야기를 나누던 와중, 웹팩에 대한 이야기가 나왔다. 소규모 프로젝트이니 쓰지 않아도 된다는 사람도 있었고, 웹팩은 효율적이니 쓰는 연습을 많이 하는 게 좋다. 라고 하는 사람도 있었기에 웹팩이 정확이 무엇인지, 꼭 사용하는 게 좋을지에 대한 궁금증이 생겼다.
► webpack이란?
webpack은 오픈 소스 자바스크립트(JS) 모듈 번들러이다.
번들링과 컴파일을 결합하는 '정적 모듈 번들러'
번들링과 컴파일은 무슨 의미일까?
- 번들링
웹을 만들 때, 자바스크립트 파일은 기능에 따라 여러 개가 나오기 마련!
하지만 브라우저가 모든 js 파일을 불러오는 것은 비효율적이다.
번들링이라는 건, 여러 개의 js 파일을 하나의 큰 파일로 만들어서 브라우저가 하나의 파일만 불러오게 하는 방식이다.
- 컴파일
js 코드가 최신 문법을 사용하거나 다른 언어로 작성된 경우, 모든 브라우저에서 이 코드를 이해할 수는 없다. 컴파일은 이런 코드를 모든 브라우저가 이해할 수 있는 형태로 변환해주는 과정이다.
► webpack이 필요한 이유
위의 지식을 통해 webpack에 대해 설명해보자면, 개발자가 작성한 js 코드를 하나로 묶고 필요한 경우 코드를 변환하여 브라우저에서 잘 작동하게 해준다는 뜻이다!
예를 들자면, 기존의 file1.js | file2.js | file3.js 가 있다고 치자, webpack은 이 파일들을 'bundle.js'라는 하나의 파일로 묶고 최신 문법이나 다른 언어로 작성된 코드를 변환하여 모든 브라우저에서 이해할 수 있도록 만든다!
► webpack의 장점
- 여러 리소스를 압축하여 최적화하기 때문에 로딩에 대한 네트워크 비용 감소 효과를 가져온다.
- 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다.
- 최신 자바스크립트 문법을 지원하지 않는 브라우저에서도 사용할 수 있다.
► webpack의 단점
- 비교적 복잡한 configuration
► 그렇다면 웹팩은 배포할 때만 좋은 걸까?
webpack을 사용하게 되면 브라우저가 파일을 불러올 때 모든 파일을 불러오지 않고, 하나의 파일만 불러오게 되는데, 그렇다면 webpack은 배포 시에만 효율이 있는 걸까? 설명만 들으면 프로젝트가 거의 완성된 후, 여러 개의 파일을 하나의 파일로 번들화만 하면 되는 거 아닌가? 라는 생각이 들었다.
webpack을 처음부터 설정하여 사용하면 모듈화된 코드 관리, 개발 서버 설정, 코드 최적화 등 다양한 기능을 통해 프로젝트를 효율적으로 관리할 수 있다.
결론은 개발 과정과 배포 모두 다 효율적으로 관리할 수 있다는 것이다!
