번들러(Bundler)

쉬운 설명

빌드 중에 “파일을 찾을 수 없다”는 오류가 나면 번들러가 코드를 연결하다가 막힌 것일 수 있어요. 번들러는 시작 파일에서 다른 파일이나 패키지를 가져오는 관계를 따라가며 결과물을 만들어요. 번들링이 작업 이름이라면 번들러는 그 작업을 하는 도구예요. 프로젝트에서는 개발 서버와 여러 빌드 기능을 묶어 제공하는 도구 안에서 번들러를 사용하기도 해요.

이런 상황에서 만나요

AI가 신청 폼 파일을 고친 뒤 빌드가 실패했다고 해 볼게요. 오류에는 validate.js를 찾을 수 없다고 나오는데, 실제 폴더에는 validation.js가 있는 상황이에요.

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

src/
  main.js
  validation.js

오류에 나온 파일과 가져오려는 경로를 먼저 대조해요. 파일 이름을 바꾼 뒤 import 경로를 고치지 않았는지, 대소문자나 확장자가 다른지 확인해요. 원인을 확인하지 않고 번들러를 바꾸거나 패키지를 다시 설치하는 것부터 시작할 필요는 없어요.

헷갈리기 쉬운 점

Vite와 번들러는 같은 말인가요?

Vite는 개발 서버와 빌드 기능을 제공하는 특정 도구이고, 번들러는 코드 묶음을 만드는 도구의 종류를 말해요. Vite 내부에서 사용하는 번들링 구현은 버전에 따라 달라질 수 있어요. 프로젝트의 버전과 오류를 낸 도구 이름을 확인해요.

설치된 패키지 이름과 내 프로젝트의 파일 경로는 해결 방법이 다를 수 있어요. 오류 문구의 가져오는 쪽 파일, 대상 경로, 실패 단계를 함께 읽어요.

왜 알아야 할까요?

“번들러 오류”라는 말만 듣고 도구 자체가 고장 났다고 판단하지 않게 돼요. AI에게 어떤 파일의 어떤 연결이 실패했는지 전달해 수정 범위를 좁힐 수 있어요.

참고 자료

• Rollup · 모듈 번들러 개요
• webpack · 핵심 개념
• Vite · 시작하기