⛈️vite🪁 알아보기

탕크 한판. 위너.

나야나나야나

---

⛈️vite🪁

Vite

 

[Vue + Vite] 근데 Vite는 뭔가요?

Vite는 모던 프론트엔드 도구 : 번들러

파일들을 빠르게 변환하고 모듈을 관리해 주는 역할

 

Webpack 업그레이드 버전!

주요 두 가지 기능

• Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능
• Build : Production 배포를 위한 소스코드 번들링 기능

주요 특징

1. 빠른 개발 서버: ES 모듈(ESM)을 사용하여 브라우저가 필요한 모듈만 요청하게 함으로써, 초기 로드 시간을 대폭 줄여줌
2. 핫 모듈 교체(HMR : hot module replacement): 코드 변경 사항이 실시간으로 반영되어, 전체 페이지를 리로드하지 않고도 UI를 업데이트할 수 있음
3. 프로덕션 최적화: 프로덕션 빌드에는 Rollup을 사용하여 필요한 최적화를 수행하고, 효율적인 코드 분할을 지원

이점

• 개발 속도 향상: 빠른 서버 시작과 HMR 기능으로 개발 피드백 루프가 매우 빨라짐
• 현대적인 자바스크립트 지원: 최신 JavaScript 기능을 원활하게 사용할 수 있으며, 다양한 프레임워크와 호환
• 간단한 설정: Vite는 대부분의 상황에서 사전 설정된 환경을 제공하여 복잡한 설정 없이도 쉽게 사용할 수 있음

 

ESM(ES 모듈)

• ES6에 도입된 모듈 시스템
• import, export를 사용해 분리된 자바스크립트 파일끼리 서로 접근할 수 있음

그래서 번들링이 필요가 없고 브라우저에서 필요한 모듈의 소소코드를 import할때 이것을 전달만 하면 됨!

HMR

코드 수정하고 다시 빌드하지 않아도 바로 보이는 게 이거!

 

---

⛈️Next.js ve vite🪁

Next.js

 

• 서버 사이드 렌더링(SSR): Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있도록 지원. 이는 SEO(검색 엔진 최적화) 및 초기 로딩 성능 개선에 유리
• 정적 사이트 생성(SSG): 빌드 타임에 페이지를 생성하여 배포할 수 있어, 로딩 속도가 빠르고, 서버 부담을 줄일 수 있음
• 파일 기반 라우팅: 페이지를 자동으로 라우팅하며, 파일 구조에 따라 URL 경로가 자동으로 설정
• API 라우트: API 서버를 별도로 구축하지 않고, Next.js 프로젝트 내에서 API 라우트를 쉽게 설정할 수 있음

SEO(Search Engine Optimization, 검색 엔진 최적화)

웹사이트가 검색 엔진에서 더 높은 순위를 차지할 수 있도록 최적화하는 과정

Vite

• 빠른 개발 시작: Vite는 개발 모드에서 매우 빠른 핫 모듈 교체(HMR)를 제공하여, 변경 사항이 즉시 반영
• 모듈 번들링: Vite는 개발 중에는 번들링하지 않고, 빌드 시에만 Rollup을 통해 효율적인 번들링을 수행
• 플러그인 시스템: 다양한 플러그인을 통해 기능을 확장할 수 있으며, 사용자 정의 설정이 용이
• 다양한 프레임워크 지원: React, Vue, Svelte 등 다양한 프론트엔드 프레임워크와 함께 사용할 수 있음

선택 기준

• SSR이나 SEO가 중요한 경우: Next.js 선택
• 개발 속도와 핫 리로딩의 우수성을 중요시하는 경우: Vite 선택
• 간단한 SPA(Single Page Application) 또는 프로토타입 개발 시: Vite가 더 효율적일 수 있음
• 풀 스택 애플리케이션을 개발하고자 할 때: Next.js의 API 라우트를 활용할 수 있음

포트폴리오 웹사이트는 vite가 맞겠다~

next는 다음에~~