개요
번들링, 웹팩의 개념에 대해 이해한다.
Checklist
- 여러 개로 나뉘어진 자바스크립트나 이미지, 컴포넌트 파일 등을 하나로 합치는 작업을 하는 것은 성능상에서 어떤 이점이 있을까요?
웹 서비스에서 랜더링 시 소요시간 감소
웹페이지 요청에 필요한 정적자산(Javascript, CSS 등)의 크기를 줄일 수 있어 최초 화면 랜더링 시 HTTP 통신 소요시간을 줄여줄 수 있다.
단, 동일한 자산을 요구하는 동일한 페이지 및 사이트에서는 번들링이 효과가 없을 수 있다.
정적 자산에 대한 유효성 검사 소요시간 감소
브라우저는 각 자산에 대한 유효성 검사를 추가적으로 필요로 한다.
이때 검사해야 할 파일의 개수가 줄어들면, 그만큼 유효성 검사 대상 파일 크기가 작아지므로 번들링을 통한 성능 개선을 할 수 있다.
- 이미지를 Data URL로 바꾸어 번들링하는 것은 어떤 장점과 단점이 있을까요?
Data URL에 대한 개념과 장점
fileRead.readAsDataURL(fileData);filesystem에서 imagefile을 불러올 때 URL string으로 불러오는 방식이기도 하다.
위와 같이 data : ~ 로 시작한다.
image를 URL data로 변환할 경우 base64로 인코딩된 형식이며, 이를 임베드하여 image/jpeg 파일을 불러올 수 있게 된다.
이 과정자체가 간단하고 복잡하지 않고, 사용자가 문서 내(text editor 등)에 직접 인라인으로 임베드할 수 있다.
단점
VanillaJS에서는 filesystem(fileReader)에서 관련 method를 지원하여 자동으로 인코딩 해주지만, 직접 할 경우 특정 스킴(data : ~)을 누락하여 오류가 발생할 수 있다.
브라우저의 경우 URL 데이터의 최대 길이가 제한된다.
또한 base64로 인코딩하면서 발생하는 오류는 직접 파악하고 해결해야 하며(오류에 대한 디버깅을 하지 않음), 직접 인라인 코딩을 구현하는 경우엔 복잡해진다.
- Source Map이란 무엇인가요?
빌드한 파일과 원본 리소스를 서로 연결하여 디버깅 간 편의성을 제공해주는 도구이다.
Webpack을 통한 번들링(대부분 빌드와 번들링은 동일한 개념으로 취급)을 하면서 오류가 발생할 경우, 빌드를 완료한 후 오류를 감지한다(동적감지).
Source Map을 활용하면 원본 리소스와 연결이 되어, 오류가 발생한 파일 및 라인을 감지해낼 수 있다(정적감지).
- Webpack의 필수적인 설정은 어떤 식으로 이루어져 있을까요?
Entry
webpack이 번들(빌드)를 시작하는 지점이자 경로이다.
module.exports = {
//...
entry: {
home: './home.js',
about: './about.js',
contact: './contact.js',
},
};entry 객체를 통해 모듈을 로딩하고 하나의 파일로 묶는다.
Output
entry 객체에 정의된 번들 항목(경로)을 묶은 후, 최종 결과물을 반환할 위치이다.
Loader
Webpack이 기존 번들할 수 있는 속성(Javascript, JSON)뿐만 아니라, HTML/CSS/Image 등 까지 번들할 수 있도록 관련 기능을 지원해준다.
파일 해석에 관한 추가적인 기능을 제공한다.
Plugin
Webpack의 기본적인 동작 외 추가적인 기능을 제공한다.
결과물의 형태를 바꿔주는 기능을 제공하는데, 번들 최적화/환경 변수 주입 등의 작업을 Plugin을 통해 수행할 수 있다.
- Webpack의 모듈은 어떤 역할을 하나요?
기존 브라우저에서 모듈을 완벽히 지원하지 못하여 이를 보완하기 위해 Webpack에서 제공하는 기능이다.
기본적으로 모듈시스템에 대한 호환성을 넓히고, 지원해준 개념으로 생각하면 되는데, 모듈시스템 모두 번들링할 수 있도록 지원하는 기능을 제공한다.
commonJS, ES6 등의 모듈시스템에 대해 지원해줄 수 있다.
- Webpack을 이용하여 HMR(Hot Module Replacement) 기능을 설정하려면 어떻게 해야 하나요?
webpack.config.js의 hot 옵션 true 지정한다.
참조개념
- 빌드
개발이 완료된 React 서비스를 배포하기 위해 하나의 폴더/directory로 구성하여 준비하는 작업을 일컫는다.
npm run build를 실행하면 React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해 준다.
이때 최적화라는 의미는 하나의 js소스로 압축하는 과정과 React와 nodejs가 없는 환경에서도 해당 서비스가 잘 동작할 수 있도록 하는 과정이 모두 포함되어 있음을 유의한다.
※ 앱개발(React-native)에서는 앱스토어 배포를 위해 프로젝트를 하나의 apk파일로 압축하는 과정을 의미하기도 한다.
- 번들링
말 그대로 묶음의 개념, 파일을 묶는 작업을 일컫는다.
여기서의 파일은 의존적 관계(import/export)에 있는 파일 그 자체 혹은 내부적으로 포함되어있는 모듈을 의미하며, 정확히 말하면 모듈 간의 의존성 관계를 파악하여 그룹화하는 작업을 의미한다.
하나의 프로젝트는 수많은 파일과 모듈을 분리하여 작업하는데, 하나의 파일로만 관리하기에는 너무 복잡하고 코드가 길어져 감당할 수 없는 정도이기 때문이다.
이때 규모가 커질 수록 파일 분리 및 import/export 하는 과정에서 문제가 발생할 수 있다.
※ 여러 개의 파일을 브라우저에서 로딩할 경우 속도 저하
※ 모듈(파일) 간의 변수 충돌
이에 따라 의존적인 파일과 모듈을 하나로 묶는 작업이 반드시 필요하며, 이러한 번들링을 해주는 도구(가장 대표적인 webpack)가 따로 존재한다.
※ RequireJS, Browserify, Rollup, Parcel 등
- Webpack(웹팩)
번들링 작업에 가장 많이 사용하는, 대표적인 번들링 도구이다.
모듈화 방식에는 CommonJS, ES6 등 모듈 명세들이 존재하는데, Webpack은 이를 모두 지원할 뿐만 아니라 파일 내부에서 원하는 코드만 따로 분리해서 압축할 수 있다.
또한 React의 CSS/JSX 변환작업도 지원해주므로 웹/앱 어플리케이션 개발 시 상당히 유용하다.
webpack을 통해 번들링 작업을 진행하면 지정해준 파일(모듈)을 그룹화할 수 있고, 원본 소스를 확인할 수 있다.
- HMR(Hot Module Replacement)
Webpack에서 제공하는, 실행에 초점을 맞추어 모듈 업데이트/변환/삭제 등을 해주는 기능이다.
application이 작동하면서(런타임 환경), 모든 종류의 모듈을 새로고침(업데이트)할 필요없이 실행에 초점을 두므로 실행을 위한 모듈만 임시적으로 활용 및 업데이트 하는 개념이다.
npx 개념과 유사하다.
정리
0. why
- React build, bundle 개념을 왜 알고 있어야 하는지 이해한다.
- build, bundle 개념을 왜 동일한 개념으로 고려하는지 이해한다.
- buidl, bundle을 왜 진행하는지 숙지한다.
1. what
- build, bundle이 어떤 과정이고, 어떤 목적으로 진행되는 작업인지 알아본다.
- 최종적인 build, bundle 작업을 하면서 어떤 요소를 고려해야 하는지, 어떤 추가적인 과정을 진행해야 하는지 생각해본다.
2. how
- build, bundle은 script 문서를 통해 작성하는 만큼 다소 생소할 수 있는데, 어떻게 이에 대해 적용하고 실무력을 함양할 수 있을지 고민해본다.
3. 참조링크
npm run build
https://gocoder.tistory.com/2190
React build
https://juein.tistory.com/47
번들링과 웹팩 기본 개념
https://lihano.tistory.com/17
MS공식문서 - 번들링
https://docs.microsoft.com/ko-kr/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-6.0
웹팩 공식문서 - HMR
https://webpack.kr/guides/hot-module-replacement/
DataURL
https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
SourceMap
https://minhyeong-jang.github.io/2019/05/24/sourcemap
https://joshua1988.github.io/webpack-guide/devtools/source-map.html#%EC%86%8C%EC%8A%A4-%EB%A7%B5
Webpack 관련 문서 - Runebook
https://runebook.dev/ko/docs/webpack/configuration/entry-context
※ Webpack을 이용하여 React 빌드하기
https://berkbach.com/%EC%9B%B9%ED%8C%A9-webpack-%EA%B3%BC-%EB%B0%94%EB%B2%A8-babel-%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0-fb87d0027766
