MancityBallboy 흔적 남기기

웹팩의 이해(1)

08 Apr 2021

웹팩이란?

웹팩이란 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 입니다.

모듈번들러란 ?

웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 겨로가물을 만드는 도구를 의미합니다.

image

이미지 출처 : https://webpack.js.org/

웹팩에서의 모듈들은 이미지상의 오른쪽을 의미합니다. 오른쪽의 수 많은 모듈들을 이용하여 하나의 파일로 병합 및 압축해주는 것이 모듈 번들링이자 웹팩이 하는 일입니다.

웹팩이 필요한 이유

  1. 파일 단위의 자바스크립트 모듈 관리

    javaScript로 구현하는 로직과 그 코드의 양이 많아지면서 많은 사람들은 코드의 유지 및 보수를 쉽게 하기위해 모듈로 나누어 관리하는 모듈 시스템을 필요로하였고 webpack은 그러한 니즈를 만족 시켜주는 프로그램이다.

  2. 웹 개발 작업 자동화 도구

    이전부터 프런트엔드 개발 업무를 할 때 가장 많이 반복하는 작업은 텍스트 편집기에서 코드를 수정한후 브라우저에서 새로 고침을 누르는 것이 었습니다. 그래야 화면에 변경된 내용을 볼 수 있었습니다.

    이 외에도 웹 서비스를 개발하고 웹 서버에 배포할 때 다음과 같은 작업을 해야 했습니다.

    • HTML, CSS, JS 압축
    • 이미지 압축
    • CSS 전처리기 변환

    이러한 일들을 자동화 해주는 도구들이 필요했습니다. 그래서 Grunt와 Gulp 같은 도구들이 등장했습니다.

  3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

    일반적으로 특정 웹사이트를 접근할 대 5초 이내로 웹 사이트가 표시되지 않으면 대부분의 사용자들은 해당 사이트를 벗어나거나 집중력을 잃게 됩니다.

    그래서 웹 사이트의 로딩 속도를 높이기 위해 많은 노력들이 있었습니다. 그 중 대표적인 노력이 브라우저에서 서버로 요청하는 파일수를 줄이는것이며 이는 웹팩이 크게 도움을 줄 수 있는 부분입니다.

참고 사이트

  • https://joshua1988.github.io/webpack-guide/concepts/loader.html#css-loader-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
  • https://d2.naver.com/helloworld/0239818
  • https://webpack.js.org/

Related posts