vite가 뭐야?

lionloopy·2024년 11월 19일

오늘의 공부

목록 보기

12/22

vite란?

빠르고 간결한 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구

자바스크립트 모듈을 기반으로 함
웹팩보다 더 빠르게 개발하고 배포할 수 있음
vite는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 바로 서버가 구동됨

번들러란?
애플리케이션을 구성하는 파일의 양이 많을수록 사용자가 필요한 기능을 동작시키고 데이터를 받아오는데 시간이 오래 걸림
→ 하나의 js 파일에 모든 코드를 작성하기엔 최악
⇒ module과 같은 방식으로 여러개의 파일을 나눠서 개발을 하고 모든 파일을 하나로 합쳐서 하나의 번들로 만들어내는 것이 번들러! (webpack, rollup 등)
그러나 번들러의 문제점은 속도가 느리다는 것
파일을 하나로 만들어주는 선행 작업이 생겼기에, 수정 시 매번 새로운 빌드가 필요하고, 이 빌드는 느림

vite vs next.js

	SSR	CSR	라우팅	데이터 통신	호환성	개발 환경과 설정
vite	👍🏼	👍🏼	👍🏼	👍🏼
next.js		👍🏼			👍🏼	👍🏼

SSR:
- next.js: 서버에서 완전히 렌더링 된 HTML 페이지를 생성하고 제공함.
  초기 페이지 로드와 SEO, 향상된 성능
- vite.js: 별도 플러그인 필요. 지원하더라도 저수준
CSR:
- next.js: 자바스크립트를 사용해 CSR도 지원함
- vite.js: 프론트엔드 프레임워크와 통합을 통해 CSR 지원함
라우팅:
- next.js: 구성을 단순화 하는 강력한 라우팅 시스템을 제공함. 파일 시스템 기반
- vite.js: 내장 라우팅 시스템을 제공하지 않음. react router와 같은 라이브러리 사용 가능
데이터 통신:
- next.js: 데이터 통신을 위해 여러 옵션을 제공함
- vite.js: 빌드 최적화에 중점을 두기 때문에 특정 데이터 가져오기 기능을 제공하지 않음
호환성:
- next.js: react 생태계에 최적화되어 있음
- vite.js: react뿐만 아니라 vue, svelte 등 지원하며 더 유연함
개발 환경과 설정:
- next.js: 설정이 대부분 자동화 되어 있음. 파일 기반 라우팅 등 구조적인 개발 방식 강제됨
- vite.js: 설정이 더 유연하며 빠르고 간단함

⇒ 동적 라우팅, SEO 최적화, SSR에 중점을 둔다면 next.js
⇒ 빠른 배포와 빌드를 원한다면 vite.js

마이그레이션

next.js -> vite.js
사용하고자 하는 템플릿이 next.js의 의존성이 강한 상태
-> next.js가 적용된 템플릿을 vite로 변경하고자 할 때

라우팅 관련 변경
- vite는 기본 라우팅이 없으므로 React Router를 사용해 수동으로 설정 필요함
데이터 패칭 및 API 핸들링 방식 변경
- next.js는 서버리스 API 라우트 지원하지만, vite는 별도 구성 필요
SSR 지원 여부 확인
- vite는 플러그인 사용해서 구현 필요
package.json 수정
vite.config.ts 추가
tsconfig.json 추가 (typescript가 vite에 대해 인식할 수 있도록)
index.html 수정 (추가적인 번들링 과정 없이 index.html 파일이 앱의 진입점이 되게끔)
ESLint, prettier 설정 필요
- next.js의 ESLint가 아닌 별도 구성 필요. 협업을 위해서는 필요하다고 생각
mui/material-nextjs 사용 못함
- next.js에 특화된 meterail-ui지만 사용되는 부분이 거의 없음
- approuter 방식에서 사용함
이미지 최적화 대체 필요
- next/image로 이미지 최적화가 되고 있는데, 별도 라이브러리 필요
- 이미지가 많이 사용되지 않을 것 같긴 함

도전과제

모더나이즈 템플릿의 next.js 의존도가 강함
파일 기반 라우팅 구조 잃음
별도의 설정들이 필요하므로 초기 학습하는데 시간이 걸릴 것이라고 예상
속도 하나를 위해 next.js의 편한 기능 및 안정적인 구조를 잃는 느낌

결론

	빌드 속도	초기 구성	라우팅	데이터 통신	학습 시간 소요
next.js		👍🏼	👍🏼	👍🏼	👍🏼
vite	👍🏼

정해진 일정과 모더나이즈 템플릿 사용을 고려하면 굳이 vite를 쓸 필요가 속도 장점 말고는 없다고 생각함

끝으로

vite를 선호하는 사람들은

"이렇게 속도가 빠른데 vite를 왜 안 써 ??????"

next.js를 선호하는 사람들은

"속도 말고 vite 장점 없음. next.js 쓰자"

조사하면서 가장 크게 느낀점이다 ..! 사실 애초에 next.js와 vite를 위주로 비교하기 위해 조사를 시작하긴 했지만, 그래도 vite의 속도 이외 장점을 찾지 못한 느낌이라 아쉬웠다. next.js에서는 개인적으로 편한 라우팅 방식을 너무 좋아했는데 vite를 아직 안 써봐서 그런건지.. 조사 단계에서는 속도 말고 장점을 못 느꼈지만, 속도가 10분의 1로 줄어드는 것을 보고 언젠간 써 보고 싶다는 느낌? 정도!로 마무리 한다.