Nuxt 3.
What is nuxt 3
하이브리드 Vue 프레임워크
아래 Spec 을 보면 어떻게 구성되어있는지 알 수 있습니다.
그중 [ Hybrid, devtools] 는 예정입니다 :) .
Step 1)
시작하기 전에 권장 설정을 설치했는지 확인해주세요.
Node.js * (최신 LTS 버전) 👉 다운로드
비주얼 스튜디오 코드 👉 다운로드
Volar 확장 👉 다운로드
terminal, 혹은 cmd 창에서 node version 이 14 버전인지 확인.
node --version v14또는 v16
Step 2)
1. $ npx nuxi init [Project Name]
2. $ code -r nuxt3-app
3. npm or yarn install ( npm 과 yarn 중 택1 )
4. npm run dev (혹은) yarn dev
...!!? 거의 키자마자 local 3000 이 열리네요 ..!
구동이 nuxt 2 보다 훨~씬 빠르다는것을 알 수 있다.
프로젝트를 새로 만들었으니 당연 빠른게 아닌가? 라고 생각 할 수도 있지만.
정확히 "VITE" 가 한 몫을 톡톡히 하네요.
( 원문 발췌 )
개발 서버를 콜드 스타트할 때 번들러 기반 빌드 설정은 서비스를 제공하기 전에 전체 애플리케이션을 열심히 크롤링하고 빌드해야 합니다.
- Vite는 먼저 애플리케이션의 모듈을 종속성 과 소스 코드의 두 가지 범주로 나누어 개발 서버 시작 시간을 개선합니다 .
- 종속성 은 대부분 개발 중에 자주 변경되지 않는 일반 JavaScript입니다. 일부 큰 종속성(예: 수백 개의 모듈이 있는 구성 요소 라이브러리)도 처리하는 데 비용이 많이 듭니다. 종속성은 다양한 모듈 형식(예: ESM 또는 CommonJS)으로 제공될 수도 있습니다.
- Vite는 esbuild를 사용하여 종속성 을 미리 묶 습니다 . Esbuild는 Go로 작성되었으며 JavaScript 기반 번들러보다 "10~100" 배 더 빠르게 종속성을 사전 번들링합니다.
nuxt 비교 스펙
- General Optimizations(Nuxt.js v2 보다 성능이 20% 증가)
There are other tooling parts upgrades, too, and Webpack 5, ESBuild, Vite, PostCSS 8, etc., support is also available. This makes both production builds and development extremely fast.- Nuxt 3 supports ES Modules or ESM and TypeScript
- Nuxt 3 is Vue 3-based
- Hybrid Rendering
- API Routes
- Nitro Engine
- Cross-Platform Support
- Nuxt Bridge
그런데 아직 얼리 베타 단계 인데 사용해도 되는것이냐 .. 라고 생각하신다면
-> 아직 베타 버전인게 맞습니다. 그러나 수정 및 배포가 매우 빠르게 진행 되고 있습니다, (아래 스크린샷 참조)
무엇보다 vue 점유율이 좋아 v3 의 관심과 기대가 큰만큼 안정화버전이 곧 올것으로 예상되고, 대형 OpenSource 프로젝트에 걸맞게 많은 커뮤니티에서 Bug fix 를 할 수 있을거라는 확신으로 사용해도 괜찮을 것 같다 라는게 제 생각입니다. 조금 위험하지 않냐 ~ 라고 생각 하실 수 있지만.
-> "늘 그렇듯 개발자는 문제를 해결할 것입니다".
공식문서에서 새로운 Data Fetching, 기존 nuxt 2 에서 변경된점 을 확인해보세요 :)
-> https://v3.nuxtjs.org/docs/usage/data-fetching
