🌿 중급 개발도구
빌드 도구가 뭔가요?
쉽게 이해하기
요리할 때 재료를 손질하고 조리해서 완성된 요리를 내놓잖아요? 빌드 도구는 '날것의 코드'를 손질해서 '배포 가능한 상태'로 만들어주는 주방 도구예요. 불필요한 부분은 제거하고, 여러 파일을 하나로 합치고, 크기를 줄이는 작업을 자동으로 해줍니다.
핵심 정리
개발용 코드를 배포용 코드로 변환해주는 프로그램이에요.
자세히 알아보기
빌드 도구는 개발 중인 코드를 실제 배포용 코드로 변환해주는 프로그램입니다. 개발할 때는 코드를 여러 파일로 나눠서 작성하고, 주석도 많이 달고, 최신 문법을 쓰는데, 이걸 그대로 배포하면 파일이 너무 많아서 느리고 용량도 커요. 빌드 도구는 이런 문제를 해결해줍니다.
예를 들어 Webpack, Vite, Rollup 같은 빌드 도구는 여러 개의 JavaScript 파일을 하나로 합치고(번들링), 변수명을 짧게 바꾸고(난독화), 공백을 제거해서(압축) 최종 파일 크기를 줄여줍니다. 또 TypeScript를 JavaScript로 변환하거나, 최신 ES6 문법을 구형 브라우저에서도 돌아가게 바꿔주는 작업도 해요.
'npm run build' 같은 명령어를 실행하면 빌드 도구가 자동으로 작동해서 'dist'나 'build' 폴더에 배포용 파일을 만들어줍니다. 이 파일들이 실제로 서버에 올라가는 거예요.
요즘은 Vite처럼 빌드 속도가 빠른 도구가 인기입니다. 특히 큰 프로젝트일수록 빌드 시간이 중요한데, Vite는 기존 Webpack보다 10배 이상 빠르기도 해요. 프로젝트 시작할 때 어떤 빌드 도구를 쓸지 정하는 게 나중에 생산성에 큰 영향을 줍니다.