우연히 youtube 추천 영상에서 vite를 발견했다.
React를 빠르게? 무엇을 빠르게 한다는 걸까 궁금했다.
이번 게시물에서는 vite와 webpack의 차이점과 vite에서 react 프로젝트를 실행하는 것을 간단하게 알아보려고 한다.
React를 알기 전에 webpack부터 이야기 하자면, webpack은 번들러라고한다.
webpack official site
webpack 초기 파일 보기
npm init
npm install -D webpack webpack-cli번들러는 프로젝트에 포함된 파일(모듈)들을 연결하고 묶어서 브라우저가 실행할 수 있는 파일로 만들어준다. 이를 번들링한다고 한다.
번들링의 특징은 코드 업데이트시 모든 모듈을 번들링하면서 시간이 많이 소요될 수 있다는 점이다.
물론 HMR(Hot Module Replacement)과 같이 효율을 높이는 방법이 적용되기도 하지만 여전히 많은 모듈을 번들링한다고 한다.
React에대해 이야기할 때, 웹 프레임워크가 아니라 라이브러리라고 하는데,
흔히 CRA(Create React App)로 생성하는 React프로젝트는 webpack위에서 돌아가는 것이라 번들기반이다.
필자는 아직 엔터프라이즈급 개발을 해본적이 없지만,
종종 개발 서버를 실행할 때 버벅거린다는 느낌을 받은 적이 있다.
만약 프로젝트의 모듈 수가 수백 수천개가 된다면 프론트 개발 과정에서 멍청한 시간을 보내야 하는 시간이 늘어날거같다. 😅️
vite
vite는 번들 기반이 아니라 Native ESM 기반이라고한다.
해당 차이점이 속도 차이를 낼 수 있다고한다.
이게 무슨 말일까?
vite는 Native ESM을 이용해 소스 코드를 제공하도록 하고 있습니다. 다시말해, 브라우저가 곧 번들러라는 말이죠. vite는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달할 뿐입니다. Vite를 사용해야 하는 이유
vite로 react 실행해보기
참고 자료들 (vite 공식 사이트는 한국어 지원이 된다.)
- vite official site - Getting Start
- github @vitejs/plugin-react
- vite official site - JSX, TSX
- esbuild - JSX
미리 명시하지만, 진짜 빠르고 간편하게 설치할 수 있다.
npm create vite@latest
yarn create vite명령어 실행 후 친절한 인터페이스?들이 나오는데 해당하는 project를 선택하면 적합한 환경으로 세팅된 react 프로젝트가 나온다. (typescript로 선택하면 tsx로 적용된 프로젝트가 나온다)
이때 설치 속도가 상당히 빠르다고 느꼈다.
npm install 초기 vite package.json
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite", << 개발 서버
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"devDependencies": {
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"vite": "^2.9.5"
}
}yarn vite이 상태로 개발서버를 시작해도 index.jsx가 잘돌아가는 것을 확인할 수 있다.
빠른 설치와 개발서버 실행 시간은 배포 파일을 만들 때에도 적용된다고한다.
이게 끝이 아니다.
package.json파일을 포함한 여러 설정 파일들을 보면 알 수 있지만,
아직 너무 날(raw)것이라서 환경 설정을 더 해주어야 한다.
몇몇 거의 필수급 모듈은 vite에서 안내해주고 있다.
npm add -D sass그러나 이 외의 모듈이라든지 프로젝트 구조같은 것들은 직접 만들어보면서 비교할 수 있을거 같다.
new notation
Cold-start : 콜드 스타트 (cold start)는 차량이 정상 작동 온도에 비해 차가울 때 차량 엔진을 시동하려는 시도[위키] 개발에서는 캐싱된 데이터가 없이 최초로 실행하는 경우. 재밌는 비유다
ESM : ECMA Script Module
느낀 점 😎️
사실 React로 개발하면서 번들러에대해 고민해볼 기회는 없었다. 이걸로 만드는거부터가 난관이라서 이 라이브러리가 어떤 식으로 돌아가는지는 궁금하지 않았다.
그러나 시간이 지날수록 이런 지식들이 결국 정확한 에러 지점을 확인할 수 있고 넓은 관점에서 프론트개발을 할 수 있는 힘이라는 것을 직감하고 있다.
// * 피드백은 환영입니다.
