오늘은 번들링과 웹 팩에 대해서 알아보겠습니다.
번들링과 웹 팩에 대해서 알아보기 전에 번들링이 왜 만들어 졌을까요? 역사가 그렇듯, 무엇인가 문제점을 해결하기 위해 만들어 졌습니다.
기존에는 스크립트 태그를 통해 여러사람이 작성한 자바스크립트 파일을 불러왔습니다. 이 때 변수명이 겹치게 되면 마지막에 불러온 값으로 변경되기 때문에 오류가 발생합니다. 그래서 파일을 기능 단위로 묶는 모듈이 만들어졌습니다.
import React from 'react';
function App() {...}
export default App;리액트 모듈을 받아서 리액트 컴포넌트를 import / export 해보셨나요?
import / export 를 사용하여 오류를 해결했습니다.
모듈을 통해 변수명이 겹치는 오류는 줄었지만, 규모가 커질수록 수많은 자바스크립트 파일을 import / export 하므로 네트워크 과부하를 초래합니다.
이러한 문제를 해결하기 위해 여러 자바스크립트 파일을 하나로 묶어서 백엔드와 통신하는 번들러가 만들어졌습니다. 번들링에 대한 개념을 알아보겠습니다.
1. 번들링이란?
번들링이란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는(번들) 것입니다.
2. 번들러와 웹팩은 무엇일까요?
번들러란, 웹 애플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는 도구를 의미합니다.
웹팩은 프론트엔드 프레임워크에서 가장 대중적인 모듈 번들러(빌드 자동화 도구)입니다. 일반적으로 CRA의 환경구축에 사용됩니다.
3. 번들러를 사용하는 이유
- 모듈 단위의 코드 작성
- 네트워크 병목 완화 (최적화)
- 웹 개발 작업 자동화 (빌드 자동화 도구: 웹팩)
4. 트랜스파일이란?
자바스크립트의 버전이 다를 때 (ES5, ES6) 호환하기 위해 코드를 변환하는 것을 transpile 이라고 한다. 대표적인 웹팩 transpiler는 Babel이다.
5. 웹팩의 필수 구성요소
Entry, Output, Loaders, Plugins, Mode
추가적으로 공부할 질문들 !
1. Source Map이란?
2. Webpack의 플러그인과 모듈은 어떤 역할들을 하나요?
3. Hot Module Replacement가 무엇인가요?
참조: 웹팩
질문 참조: 코드스테이츠 URClass 학습 플랫폼
