Bulid, Bundling

💡 번들링이란 ?

• 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위
• 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정
  • 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 개발자가 번들링한 여러 파일을 받음
  • 이 파일을 브라우저가 실행하여 웹 애플리케이션을 제공

💡 번들링의 필요성

• HTML, CSS, JavaScript 파일을 그대로 전송할 시 생길 수 있는 문제점
  • 두 개의 .js파일에서 같은 변수를 사용하고 있는 경우 → 변수 간 충돌이 일어남
  • 딱 한 번 불러오는 프레임워크 코드가 8MB → 인터넷 속도가 느린 국가의 모바일 환경에서는 사용이 불편
  • 번들 파일 사이즈를 줄이기 위해 파일의 공백을 모두 지움 → 가독성이 너무 떨어져 코딩하기 어려움
  • 배포 코드가 너무 읽기 쉬워 개발을 할 줄 아는 사용자가 프론트엔드 애플리케이션을 임의로 조작하여 피해 발생

번들링 작업에서는 필연적으로 용량을 줄이고 파일을 통일하는 툴링 작업이 필요하다.

➡︎ 소프트웨어를 잘 만들어도 사용자에게 배포하기 위해 번들링이 꼭 필요하다.

💡 번들링 툴킷 확인 방법

package.json 내에서 확인 할 수 있다.

• 현재 진행중인 프로젝트 내 번들링 툴킷은 ?

• react-scripts@5.0.1 → Create React App (CRA)를 사용. Create React App은 내부적으로 Webpack을 사용함. Webpack 5를 사용하고 있을 가능성이 높으나 공식적으로 내부 문서를 제공하고 있지 않음.

💡 Webpack의 필요성

• 웹팩이 필요한 가장 큰 이유는 웹 애플리케이션의 빠른 로딩 속도와 높은 성능을 위함
• 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것!
• 웹팩으로 같은 타입의 파일들을 묶어 요청 및 응답을 받을 수 있다.

→ 네트워크 코스트가 획기적으로 줄어듬

• webpack loader를 사용하면 일부 브라우저에서 지원하지 않는 JavaScript ES6의 문법들을 ES5로 변환해주는 babel-loader를 사용할 수 있게된다.→ 개발자가 원하는 최선의 개발 방식을 선택해 개발할 수 있다.