번들링과 빌드 시스템

이번 포스팅은 번들링의 개념과 장점, 번들러의 개념과 구성요소 등에 대해 공부해보겠습니다. 

 

CRA란?

npx create react app myProject.

리액트를 시작할 때 개발 환경 구축을 위한 지식이 없이 빠르게 코드 작성을 할 수 있는 빌드 자동화 문장

 

번들링이란?

파일을 묶는 작업을 일컫는다. 

여기서의 파일은 의존적 관계(import/export)에 있는 파일 그 자체 혹은 내부적으로 포함되어 있는 모듈을 의미하며, 모듈 간의 의존성 관계를 파악하여 그룹화하는 작업이 번들링이다. 

 

번들링 장점

• 웹 서비스에서 랜더링 시 소요시간 감소
  웹페이지 요청에 필요한 정적자산(JS, CSS 등)의 크기를 줄일 수 있어 최초 화면 랜더링 시 HTTP 통신 소요시간 줄일 수 있음
  (단, 동일한 자산을 요구하는 동일한 페이지 및 사이트에서는 효과가 없을 수 있음)
  
  
• 정적 자사에 대한 유효성 검사 소요시간 감소
  브라우저는 각 자산에 대한 유효성 검사를 추가적으로 필요로 한다. 이때 검사해야 할 파일의 개수가 줄어들면, 그만큼 유효성 검사 대상 파일 크기가 작아지므로 번들링을 통한 성능 개선을 할 수 있다.
  
  
• 웹 개발 작업 자동화 도구
  HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환 작업 지원
  
  
• 모듈(파일) 간의 변수 충돌 문제 해결
  자바스크립트는 기본적으로 전역 범위를 가짐으로 복잡한 애플리케이션의 경우 문제 발생. 파일 단위의 모듈화로 해결

---

번들러란?(bundler)

웹 어플리케이션을 구성하는 모든 자원을 하나의 파일로 묶는 도구 

ex: Rollup, Parcel, Browserify

 

<기존 문제점>

• 전역 범위 수백 개 자바스크립트 파일의 중복 선언
• 많은 JS 파일로 인한 느린 로딩
• 수동적인 웹 개발 루틴 작업(파일, 이미지 압축/CSS 전처리기 변환 등)

<장점>

• 모듈 단위의 코드 작성
• 네트워크 병목 완화(최적화)
• 웹 개발 작업 자동화
  
  

webpack

모듈 번들링을 해주는 대표적 도구

 

웹팩 명령어 간소화하기

webpack.config.js 파일은 매번 명령어로 entry, output 등 여러 옵션을 사용하지 않고 해당 파일에서 기본 설정을 할 수 있습니다. 

 

<구성요소>

 

entry

웹팩에서 자원을 변환하기 위해 필요한 최초 진입점 (자바스크립트 파일 경로)

웹 애플리케이션의 전반적 구조와 내용 포함

싱글 페이지 애플리케이션은 엔트리 포인트가 하나, 멀티 페이지 애플리케이션은 엔트리 포인트 여러 개 

 

output

웹팩을 돌리고 난 결과물의 파일 경로. 객체 형태로 옵션 추가 

일반적으로 filename, path를 정의

 

loader

웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원들을 변환할 수 있도록 도와주는 속성 (HTML, CSS, 이미지, 폰트) 

오른쪽에서 왼쪽 순으로 적용

 

plugin

추가적인 기능을 제공하는 속성

플러그인은 해당 결과물의 형태를 바꾸는 역할

배열을 사용하며 각 요소들은 객체 인스턴스만 추가 가능

 

Mode

Webpack 모듈 번들링 과정에서 자체적으로 코드를 최적화하여 용량을 줄입니다.

---

<용어정리>

 

**transpile

최신 버전으로 작성한 JS를 하위 버전의 JS로 변환
ex: 웹팩 안 바벨

**Cli

빌드를 구성하고 상호 작용하기 위한 CLI(명령줄 인터페이스)

---

Webpack Dev Server

개발하는 과정에서 사용하는 도구

웹팩의 빌드 대상 파일 변경 시 웹팩으로 빌드한 후 브라우저 새로고침 -> 개발 생산성 향상

 

웹팩을 사용하기 전 Node.js & NPM 필요하다. 

 

Node.js

브라우저 밖에서도 자바스크립트를 실행 할 수 있는 환경

NPM(Node Package Manager)

사용이유 : 라이브러리를 HTML 중간에 삽입(CDN방식)하면 직접 찾아야 한다. 그러면 버전관리가 어렵고 라이브러리 의존성이 엮였을 때 문제가 생긴다. 따라서 npm을 이용해 package.json 한 곳에서 관리하는 것이다. 

 

주요 명령어

• npm init : pakage.json 파일 생성
• npm init -y : package.json 파일 생성
• npm install ${라이브러리 이름} : 라이브러리 설치 및 프로젝트 내 node_modules 폴더 생성
  install 은 i 로 축약가능
• npm uninstall ${라이브러리 이름}: 해당 라이브러리와 관련된 라이브러리 삭제

---

자바스크립트 모듈 관련 도구 

**모듈 : 특정 기능을 갖는 작은 코드 단위

 

path

파일 경로를 안전하게 설정하기 위해 사용하는 모듈 

ex ) var path = require('path');

 

AMD & Common.js

자바스크립트 모듈화 라이브러리의 선두 주자

• Common.js : 브라우저 뿐 아니라 서버 사이드 개발에서도 사용하기 용이하도록 만들어짐. node.js 사용 가능 
  ex ) require, module exports 
• AMD : 비동기 모듈에 대한 표준안
  ex ) define() require()

 

ES6 Modules

import & export 는 자바스크립트의 코드를 모듈화 할 수 있는 기능. 

ES6 기본 문법들이 최신 브라우저에서 지원되지만 import & export 는 아직 보조도구 필요. 

 

<추가 공부 내용>

Source Map

배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다.

 

웹팩의 필수 요소 

entry, output, loader, plugin

 

Hot Module Replacement모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업테이트 해주는 기능

 

참고 사이트

https://velog.io/@gyrbs22/WebDevCurriculum-%EB%B2%88%EB%93%A4%EB%A7%81%EA%B3%BC-%EB%B9%8C%EB%93%9C-%EC%8B%9C%EC%8A%A4%ED%85%9C

[WebDevCurriculum] 번들링과 빌드 시스템

https://www.hyojae.info/db57bc7b-0fbd-46bc-a71b-e45bcbfad26e

프론트엔드 빌드 시스템에 대해서 알아보자! (feat. Webpack)