번들링(Bundling)

쉬운 설명

AI가 만든 웹앱에는 화면 코드, 입력 검사 코드, 가져다 쓰는 라이브러리 등이 여러 파일에 나뉘어 있을 수 있어요. 번들링은 파일들이 무엇을 가져다 쓰는지 따라가며 실행에 필요한 코드를 결과물로 만드는 작업이에요. 결과는 하나의 파일일 수도 있고, 화면이나 기능별로 나뉜 여러 파일일 수도 있어요. 웹앱에서는 보통 빌드 과정에 포함되며, 파일을 ZIP으로 압축하는 것과는 달라요.

이런 상황에서 만나요

신청 폼을 수정한 뒤 빌드했더니 내가 편집한 main.js 대신 assets 안에 다른 이름의 파일이 생겼다고 해 볼게요. 원본 코드의 연결 관계를 따라 결과물을 만든 장면이에요.

import { validEmail }
  from "./validate.js";

src/
  main.js
  validate.js

dist/
  assets/
    main-a1b2.js

아래 예시에서 main.js는 입력 검사 함수가 들어 있는 validate.js를 가져다 써요. 번들링을 거치면 이 코드가 빌드 결과에 포함될 수 있어요. 결과 파일을 직접 고치면 다음 빌드 때 덮어쓸 수 있으므로 수정은 원본 파일에서 해요.

헷갈리기 쉬운 점

번들링하면 파일이 무조건 하나가 되나요?

아니요. 여러 시작 파일을 두거나 필요한 기능을 나중에 불러오도록 설정하면 결과가 여러 조각으로 나뉠 수 있어요. 파일 개수만 보고 번들링 여부나 성능을 판단하지 않아요.

빌드 결과 파일이 생겼다고 사이트가 공개된 것은 아니에요. 배포한 뒤 실제 주소에서 필요한 파일이 로드되고 기능이 동작하는지 확인해요.

왜 알아야 할까요?

원본 파일 이름과 배포된 파일 이름이 다른 이유를 이해할 수 있어요. AI에게 수정할 파일을 알려 줄 때도 생성된 결과물과 원본 코드를 구분할 수 있어요.

참고 자료

• Rollup · 모듈 번들러 개요
• Vite · 정적 사이트 배포