오늘은 vite를 이용하여 three.js boilarplate를 구성해봤습니다.
vite란 무엇일까요?
브라우저에서 ESM(ES Modules)을 지원하기 전까지, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 그리하여 번들링이라는 해결 방법이 제시되어서 지금까지 Webpack을 사용했습니다.
기존의 번들러 기반으로 개발을 진행하면, 코드를 업데이트 하게 되면 번들링 과정을 다시 진행하였습니다. 따라서 서비스가 커질수록 갱신 시간 또한 매우 증가하게 됩니다.
이러한 문제를 해결책을 제시한 vite!
Vite는 기존의 번들러 대비 10-100배 빠른 속도를 제공한다고 합니다.
3D 관련 작업을 하기 위해서는 성능을 생각하지 않을 수 없다고 생각합니다. 최대한 좋은 번들러를 활용하여 개발 해보겠습니다!
한 번 시작해보겠습니다!
npm create vite위의 코드를 활용하여 vanilla three.js boilerplate를 작성해보겠습니다.
터미널에서 위의 코드를 실행하게 된다면, 프로젝트 이름을 지을 수 있게 됩니다.
많은 프레임워크들이 보이는걸 알 수 있습니다. vanilla를 선택 후 javascript를 선택하겠습니다.
해당 디렉토리를 확인하게 된다면 node의 package와 main.js, index.html 등을 확인할 수 있습니다.
HTML 코드를 볼 수 있습니다. HTML의 script 부분을 확인 후,
main.js의 코드를 모두 삭제하여 프로젝트를 진행할 준비를 마치게 됩니다.
다음은 three.js의 scene과 camera, geometry를 통해 프로젝트를 시작하겠습니다.
