🌳 고급 인프라
빌드(Build)가 뭔가요?
쉽게 이해하기
요리책(코드)을 보고 실제로 요리(실행 가능한 파일)를 만드는 과정이에요. TypeScript를 JavaScript로 바꾸고, 여러 파일을 하나로 합치고, 용량을 줄이는 등 배포 전 준비 작업을 빌드라고 해요.
핵심 정리
개발자가 쓴 코드를 브라우저나 서버가 실행할 수 있는 형태로 변환하는 과정이에요
자세히 알아보기
빌드(Build)는 개발할 때 쓴 코드를 실제로 실행 가능한 형태로 바꾸는 과정이에요. 왜 필요할까요?
첫째, 브라우저는 TypeScript를 못 읽어요. 개발자는 TypeScript로 코드를 쓰지만, 브라우저는 JavaScript만 이해하니까 빌드 과정에서 변환(Transpile)해야 해요. 마찬가지로 최신 JavaScript 문법도 옛날 브라우저에서 돌아가게 하려면 변환이 필요하죠.
둘째, 성능 최적화예요. 개발할 때는 파일을 기능별로 나눠서 쓰지만, 실제 서비스에서는 파일 수가 많으면 느려져요. 빌드 과정에서 여러 파일을 하나로 합치고(번들링), 불필요한 공백이나 주석을 제거하고(압축), 용량을 줄여요. 100개 파일이 1개로 합쳐지고, 1MB가 200KB로 줄어들기도 해요.
셋째, 이미지나 CSS 같은 자원도 최적화해요. 이미지를 WebP로 바꾸거나, CSS를 압축하거나, 사용하지 않는 코드를 제거하는(Tree Shaking) 작업도 빌드 과정에 포함돼요.
실무에서는 npm run build 명령어로 빌드해요. Next.js는 .next 폴더에, Vite는 dist 폴더에 빌드 결과물이 생겨요. 이 폴더를 Vercel이나 Netlify에 올리면 배포가 끝나죠. 빌드 시간이 5초에서 5분까지 걸릴 수 있는데, 프로젝트 크기에 따라 달라요.