Salangdung_i의 기록
[기술면접] Webpack(+module) 본문
처음 기술면접을 준비하면서 webpack에 대해 공부할 때 webpack은 모듈을 번들시켜주는 역할을 하는 것이라고 알게 되었다. 모듈의 의미는 알겠는데 번들? 시켜준다. 이렇게 정의만 알고 있었는데 면접에서 이 질문을 받게 되었다. 이 김에 제대로 정리해보자.
webpack이 무엇인지 설명해주세요.
webpack을 커스터마이징한 경험이 있나요?
결론
Webpack이란 여러개의 파일을 하나의 파일로 묶어주는 모듈 번들러(Module bundler)입니다.
설명
webpack의 개념을 이해하기 위해선 먼저 모듈(Module)에 대해 이해해야 합니다.
자바스크립트로 개발하다보면 코드의 재사용이나 유지보수 측면에서 파일을 여러 개로 분리해서 개발하곤 합니다. 이렇게 분리된 파일을 모듈이라고 합니다. 이러한 모듈을 필요한 어떤 곳에서든 재사용이 가능하기 때문에 자주 사용하는 코드의 경우 모듈로 분리해서 개발합니다.
모듈(Module)
즉, 개발하는 애플리케이션의 규모가 커지면 파일을 여러개로 분리해야 하는 시점이 오고, 이때 분리된 하나의 파일을 모듈이라고 부르는데, 모듈을 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어있습니다.
모듈의 장점
- 유지보수 용이 : 기능들이 모듈화가 잘 되어 잇는 경우, 의존성을 줄일수 있기 때문에 기능을 개선이나 수정이 용이합니다.
- 네임 스페이스화 : 코드양이 많아질수록 전역 스코프에 존재하는 변수명이 겹치는 경우가 존재합니다. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있습니다.
- 재사용성 : 같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 재활용할수 있습니다.
모듈을 필요시에 언제든지 불러올수 있도록 하는 다양한 방법들이 있습니다. 모듈을 불러오는 방법을 모듈 시스템이라고 합니다.
모듈 시스템의 종류
- AMD - 가장 오래된 모듈 시스템 중 하나로 require.js라는 라이브러리를 통해 처음 개발되었습니다.
- CommonJS - NodeJS 환경을 위해 만들어진 모듈 시스템입니다.
- UMD - AMD와 CommonJS와 같은 다양한 모듈 시스템을 함께 사용하기 위해 만들어졌습니다.
- ES Module - ES6에 도입된 자바스크립트 모뮬 시스템입니다.
그렇다면 Webpack이란 무엇인가요?
Webpack은 여러개의 파일을 하나의 파일로 묶어주는 모듈 번들러(Module bundler)입니다.
모듈의 의미는 웹 애플리케이션을 만들면서 규모가 커졌을 때 파일을 여러 개로 분리하고 이때 분리된 하나의 파일이라고 했습니다. 웹팩에서의 모듈은 좀더 다양한 것들을 포함합니다. 자바스크립트뿐만 아니라 HTML, CSS, 이미지 등 웹을 구성하는 모든 자산을 뜻합니다.
즉, 웹팩은 의존성있는 모듈(JS, CSS, HTML, Image, etc)을 취하여 해당 모듈을 대표하는 정적 자산을 생성합니다.
그렇다면 Webpack을 왜 사용해야 해요?
웹 애플리케이션이 완성되면 우리는 웹 서버라는 공간에 배포를 하게 되고, 사용자들을 이 브라우저를 통해 웹 사이트에 접근하게 되면 브라우저는 사용자들에게 UI를 보여주기 위해 웹서버에게 html, css, JS 등과 같은 자원을 요청합니다. 웹 서버는 준비된 자원을 브라우저에게 응답함으로써 사용자들은 UI를 볼 수 있게 됩니다. 하지만 개발 편의성을 위해 모듈을 계속해서 분리하다 보면 그만큼 브라우저에서 서버에서 요청하는 개수는 많아지고 때문에 네트워크의 비용 증가가 발생합니다. 이는 사용자에게 페이지 로딩 시간이 길어지게 함으로 UX가 좋지 않습니다.
그러면 개발 편의를 위해 모듈로 분리해서 개발하고 , 페이지 로딩시간을 줄일 수 있는 방법은 무엇일까요?
브라우저에서 서버로 요청하는 http 갯수를 줄이는 것입니다. 개발을 할 때는 모듈로 나누어 개발하고, 웹서버로 배포하기 전에 이러한 모듈을 하나의 파일로 묶어서 배포하면 그만큼 클라이언트(브라우저)에서 서버로 요청하는 개수가 줄어들기에 UX 경험을 향상할 수 있습니다.
이렇게 하나로 모듈을 묶는 작업을 번들링이라고 합니다.
모듈 번들러의 종류는 다양하지만, FE에서 가장 인기 있는 webpack에 장점에 대해 설명하겠습니다.
웹팩의 장점은
- 여러 파일의 자바스크립트 코드를 압축하여 최적화 할수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.
- 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉽습니다.
- 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할수 있는 코드로 쉽게 변환시켜 줍니다.
더 알아보기
- 모듈 시스템 사용방식
- 웹팩최소 설정으로 프론트엔드 개발 환경 만들기
참고
'WEB FRONT END' 카테고리의 다른 글
| [기술면접] 브라우저 저장소 (0) | 2022.04.12 |
|---|---|
| FE 개발자 준비과정(강의/서적)편 (2) | 2022.03.08 |
| Fetch API cannot load file:/xxx.json. URL scheme "file" is not supported. (0) | 2021.10.24 |
| 멀티미디어 태그 (0) | 2019.09.21 |
| 테이블 태그 (0) | 2019.09.21 |
