프론트엔드 개발에서의 build, 번들러, 그리고 배포의 모든 것

프론트엔드 프로젝트를 하다 보면 npm run build 혹은 yarn build 같은 명령어를 자주 만나게 되는데요!

프론트엔드 개발을 하다 보면 npm run build 같은 명령어를 자주 접하게 됩니다.

그리고 그 결과로 생성되는 dist/ 폴더, VITE_APP_MODE, NODE_ENV=production 같은 설정도 나오죠..

이게 도대체 뭘 의미하고, 왜 필요한 걸까요?!
(처음 개발을 시작할 때에는 이 "build"가 도대체 뭘 하는 명령어인지, 왜 필요한지 궁금했었거든요)

오늘은 프론트엔드 개발에서 build의 진짜 의미와 역할, 그리고 번들러의 개념, 개발용 vs 배포용의 차이까지 알기 쉽게 정리해보겠습니다!

 

1. 개발 중: 코드가 복잡한 이유

개발할 땐 우리가 TypeScript, 최신 JavaScript 문법(예: async/await, import/export), 모듈 시스템, CSS 모듈, 이미지 import 등 다양한 기술을 씁니다. 하지만 이 코드들은 브라우저가 직접 실행하기엔 복잡합니다.
그래서 이걸 정리해서, 브라우저가 쉽게 이해할 수 있는 코드로 변환하고 묶는 과정이 필요한 거죠

 

2. 번들러의 등장

이때 사용하는 도구가 바로 번들러입니다.
대표적인 번들러로는 Vite, Webpack, Parcel, Rollup 등이 있습니다. 번들러의 역할은 다음과 같습니다:

• 여러 개의 파일을 하나(또는 최소한의 파일)로 번들링
• TypeScript, JSX 같은 코드를 브라우저가 이해할 수 있는 JavaScript로 트랜스파일
• CSS, 이미지, 폰트 같은 정적 자원을 같이 포함
• 코드 압축 및 최적화 (예: 변수명 축소, 사용되지 않는 코드 제거)

3. npm run build가 하는 일

build 명령어를 실행하면 보통 다음과 같은 일이 일어납니다:

• 프로젝트 전체 코드를 트랜스파일하고
• 필요한 설정에 따라 (NODE_ENV=production, VITE_APP_MODE=prod) 환경별로 다르게 처리되며
• 최종 결과물이 dist/ 폴더에 생성됩니다. (폴더 이름은 다를 수 있음)

npm run build가 하는 일

build 명령어를 실행하면 보통 다음과 같은 일이 일어납니다:

• 프로젝트 전체 코드를 트랜스파일하고
• 필요한 설정에 따라 (NODE_ENV=production, VITE_APP_MODE=prod) 환경별로 다르게 처리되며
• 최종 결과물이 dist/ 폴더에 생성됩니다.

npm run build → vite build → dist/ 폴더 생성

=> 이 dist/ 폴더가 바로 브라우저에게 전달될 최종 코드입니다.

4. dist/ 안엔 뭐가 있을까?

• index.html : 앱의 시작점
• assets/main-xxx.js: 모든 JS 코드가 하나로 합쳐져 있고 압축된 파일
• assets/style-yyy.css: 스타일 코드
• 이미지, 폰트 등 정적 리소스들

이렇게 번들된 파일들은 일반적으로 용량이 작고, 네트워크에 효율적으로 전달되며, 캐시를 이용해 빠르게 로딩됩니다.

5. 배포 과정

dist/ 폴더가 만들어졌다면 이제 이걸 서버에 올려야 합니다. 보통 다음과 같은 방법을 사용합니다:

• Netlify, Vercel, Firebase Hosting
• AWS S3 + CloudFront
• Nginx 웹서버
• Heroku, Express.js 정적 파일 서빙

사용자의 브라우저는 서버에 접속해서 index.html을 받고, 그 안에 적힌 <script>와 <link> 태그를 통해 JS와 CSS를 불러옵니다.

6. 개발 vs 배포의 차이

개발할 때는 서버를 켤 때 NODE_ENV=development로 실행합니다. 이 모드에선:

• 소스맵이 포함되어 있어 디버깅이 쉽고
• 빠르게 다시 빌드되며
• 일부 기능(최적화, 압축 등)이 비활성화됩니다

반면 NODE_ENV=production은:

• 모든 코드가 압축되고
• 콘솔 로그나 경고도 제거되며
• 사용자에게 빠르게 로딩되도록 최적화됩니다 

➡️그래서 개발할 때에는 콘솔도 찍고 디버깅도 해야하니까 development로 실행해야하는 것이죠 !

개발 중 (JSX, TS, 모듈 등 복잡한 코드)
build 명령어 실행 (vite, webpack 등)
🔽
dist 폴더 생성 (index.html + assets)
(서버/호스팅에 업로드)
🔽
사용자 접속 시 브라우저가 dist의 파일을 받음

⭐결론⭐

결국 npm run build와 같은 명령어는 개발자가 작성한 복잡한 코드들을 브라우저가 읽을 수 있게 가공하는 과정입니다.
이 결과물인 dist/ 폴더가 사용자에게 전달되며, 이게 바로 우리가 작성한 웹/앱의 진짜 모습이 되는 거죠.
개발모드와 배포모드의 차이도, 이 빌드된 결과물이 얼마나 최적화되어 있는지에 따라 달라지는 것이고요.

이 흐름을 이해하면 프론트엔드 앱이 실제로 어떻게 작동하는지 명확히 그려지는 것 같네요 ~~ ㅎㅎ