[React] 번들링 웹팩

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

모듈이란 프로그램을 구성하는 요소로, 관련된 데이처와 함수를 하나로 묶은 단위를 의미합니다

보통 하나의 소스 파일에 모든 함수를 작성 하지 않고, 함수의 기능별로 따로 모듈을 구성합니다.

모듈로 파일을 구성하면 유지보수와 재사용성이 용이 해집니다

웹 애플리케이션에 Html, Img, CSS, js 등을 구성하여 웹 서버에 배포가 됩니다.

사용자는 브라우저를 통해 웹 사이트에 접속하게 되면 사용자에게 ui를 보여주기 위해 웹 서버에게 html, css, js등의 자원들을 요청합니다 그리고 웹서버는 준비된 자원을 브라우저에게 응답하면서 사용자들은 ui를 볼수있게 됩니다.

하지만 개발 편의성을 위해 모듈을 계속 계속 분리하다보면 브라우저에서 서버에 요청하는 개수가 많아지게 됩니다.

이렇게 될 경우 페이지 로딩이 길어지는 등 사용자에게 나쁜 ux를 제공합니다.

번들링

번들링은 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미 합니다

모듈 방식으로 개발을 진행하여 기능별로 파일을 만들고, 웹 서버에 배포하기 전 모듈로 나눠진 파일을 하나로 만들어 서버에 요청하는 개수를 줄여 로딩시간을 줄이는 작업을 번들링이라고 합니다.

webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하고 있는 번들러 입니다.

webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미합니다

Webpack에서의 모듈은 js의 모듈에만 적용되는건 아닙니다.

플러그인을 적절하게 사용하면 Html,CSS 뿐만아니라 jpg,png와 같은 이미지에도 적용할 수 있습니다