컴파일과 번들링

지금 내 프로젝트가 어떻게 빌드되고 있는지에 대해 알아보다가
자주 듣던 컴파일, 번들링에 대해 좀 더 베이직한 의미에 대해 한번 찾아봤다.
대략적으로 이해했는데 실제로 직접 해보며 이해도를 높여가고 싶군..!

컴파일

• 예를들면 리액트에서 jsx, tsx로 작성한 코드 → javascript로 변환하는 과정
• 나보다는 컴퓨터가 더 잘 이해하도록
• 보통 Babel이 이 역할을 담당

번들링

• 여러개의 다양한 리소스를 하나의 파일 (또는 몇개의 파일)로 묶는 과정
• 보통 Webpack, Parcel, Vite가 번들러로 사용됨

[예시] src의 3개 javascript를 dist경로의 bundle.js에 묶음

src/
├── App.js
├── Header.js
├── Footer.js

⬇️

dist/
├── bundle.js