빌드, 번들링, 변환 ⇒ 세 단어는 c언어에서는 차이점을 나누게 되지만 프론트엔드 영역에서는 같은 의미로 사용된다.

1. 빌드 자동화

ex) CRA( npx create react app [프로젝트 이름])

빌드 자동화를 사용하면, 코드 작성 이외의 작업은 자동으로 진행되어 신경 쓰지 않아도 되고, 무엇보다 에러 없이 정상적으로 동작하기 때문에 사용한다.

2. 모듈

초기의 웹페이지와 다르게 다이나믹한 상호 작용이 많은 대규모 웹 서비스들이 생겨나면서 수십 줄의 코드, 수백 개의 JS파일을 하나씩 관리하기 어려워짐

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

3. 모듈 번들러