드디어 2021.10 월 Nuxt.js v3 beta 가 released 되었다. 😍
(그리고 오랜만에 글 작성🙌😁)
The Hybrid Vue Framework
Build your next application with Vue 3 and experience hybrid rendering, powerful data fetching and new features. Nuxt 3 is an open source framework making web development simple and powerful.
하이브리드 Vue 프레임워크
당신의 애플리케이션을 Vue3 로 구축하고 하이브리드 렌더링, 강력한 데이터 가져오기 등과 같은 새로운 기능을 경험하세요. Nuxt3 는 웹 개발을 단순하고 강력하게 만드는 오픈 소스 프레임워크입니다.
이전에는 하이브리드 vue 프레임워크라는 이야기는 하지 않았다.
The Intuitive Vue Framework
Build your next Vue.js application with confidence using Nuxt.
An open source framework making web development simple and powerful.
직관적인(이해하기 쉬운) Vue 프레임워크
Nuxt 를 사용하여 안심하고 다음 Vue.js 애플리케이션을 구축하세요. 웹 개발을 단순하고 강력하게 만드는 오픈 소스 프레임워크입니다.
Nuxt.js v2 는 Vue.js 를 이용하여 개발환경을 쉽게 구성하고 다양한 라이브러리를 기본으로 탑재하여 개발자로 하여금 조금 더 빠르고 쉽게 개발이 가능한 환경을 제공해주고있다.
Nuxt.js v3 에 와서는 Hybrid(혼종, 혼합물, 잡종)라고 표현을 하고있다.
👨🏫 이것은 문서를 보면서 추측해보건대 새로운 기능에 Hybrid Rendering 이라는것이 눈에 뛰었다. 이 기능이 추가되면서 그렇게 표현을 하는거 아닌가 추측을 하고있다.
- Nuxt.js v3 기능들
1. 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.
개발환경에서 사용하는 도구들도 업그레이드가 이루어졌다고 설명을 하고있다.
2. Nuxt 3 supports ES Modules or ESM and TypeScript
3. Nuxt 3 is Vue 3-based
4. Hybrid Rendering
5. API Routes
6. Nitro Engine
7. Cross-Platform Support
8. Nuxt Bridge(Nuxt Bridge 를 통해 Nuxt.js v2 에서 v3 에 기능을 활용이 가능하게 해준다고 한다. 이는 마이그레이션 계획이 없는 프로젝트에서 좋은 대안이 될거같다) 다 살펴보면 좋은데, 여기서 Nitro Engine 만 보도록 하겠다.
Nitro Engine 은 Nuxt.js v3 에서 사용하는 새로운 서버엔진이다. 쉽게 생각하면 새로운 서버사이드 렌더러라고 이해를 해도좋을거같다.
해당엔진은 Rollup.js 와 h3(https://github.com/unjs/h3) 라는 모듈을 이용하여 기반이 되어있다고 설명이 되어있다.
https://github.com/nuxt/framework/tree/main/packages/nitro
https://www.npmjs.com/package/@nuxt/nitro-edge
기능들이 많이 추가 및 개선이 되고 새로운 시도들을 하였으나, 위 표를 살펴보면 아직 beta 이기도 하고 안정적이지 않기때문에 바로 사용은 어려워보인다.
nuxt.js v3 를 한번 hello world 를 보도록 하겠다.
일단 설정전에 node.js 가 당연히 설치가 되어있어야 하고 문서에는 v14 버전 이상을 사용하라고 되어있다.
(If you already have Node.js installed, check with node --version that you are using v14 or v16.)
npx nuxi init nuxt3-app
cd nuxt3-app
npm i
npm run dev -- -o
node.js 버전이 딱 14버전 이상이면 안되는거같다. 경고가 나온다.
정상적으로 실행이 된다. 프로젝트 구조를 살펴보자.
👀 package.json
{
"private": true,
"scripts": {
"dev": "nuxt dev",
"build": "nuxt build",
"start": "node .output/server/index.mjs"
},
"devDependencies": {
"nuxt3": "latest"
}
}
개발환경은 vite 로 구동이 되는거같으며, 서버는 Nitro 엔진이 열일을 해주는거같다.
프로젝트 구조를 살펴보면, Nuxt.js v2 와 비교했을때 아무것도 없다.(나중에 버저닝 업데이트 되면서 바뀔지는 모르겠다)
app.vue 에는 NuxtWelcome 컴포넌트가 보이는데, 이거는 내부에 HelloWorld 처럼 제공이 되어지는 컴포넌트인거같다.
문서를 살펴보면, 간단한 사용법이 설명된 예제들이 있다.
pages, components, layouts 패키지를 생성하고 한번 진행을 해보았다.
pages 는 Nuxt.js v2 와 마찬가지로 자동으로 Vue-Router 의 경로를 설정해주며, 동적 라우팅도 지원을해준다.
<template>
<div>
<!-- Remove this component to get started! -->
<!-- <NuxtWelcome /> -->
<NuxtPage/>
</div>
</template>layouts 에 default.vue 를 생성하면 모든 pages 에 해당하는 컴포넌트에 레이아웃을 동일하게 적용이 가능하다고 설명이 되어있다. 그런데 진짜 모든 컴포넌트가 레이아웃이 동일하면 위에 app.vue 를 사용해도 된다고도 설명이 되어있다. app.vue 는 Nuxt.js v3 에서 main component 라고 소개가 되어있다.(root 같은 존재인듯)
간단하게 해보니 잘 동작을 한다. vue3 에 새롭게 추가된 composition api 도 지원해주고 TS 도 따로 별도 설정이 없는데 사용이 가능했다.
그리고 data fetch 를 useAsyncData 를 사용하여 가볍게 해보았다. (문서에는 useAsyncData / useFetch 를 제공해주고있다)
<template>
<div>
<h1>About Page</h1>
<p>
{{ $route.query }}
</p>
<div>
{{datas}}
</div>
<NuxtLink to="/"> Index page </NuxtLink>
</div>
</template>
<script>
export default {
name: 'about',
async setup() {
const { data: resultData } = await useAsyncData('mountain', () => {
return $fetch('https://api.github.com/search/users?q=zero86&per_page=50');
}, {});
return {
datas: [...resultData.value.items],
}
},
}
</script>
<style scoped>
</style>일단 이렇게 Nuxt.js v3 를 맛만보았다. 이후에 문서가 좀 더 상세해지면 또 다시 살펴보도록 하겠다.
그리고 하면서 궁금했던점은, Nuxt.js v2 에서 나는 watchQuery 를 활용하여, 다시 asyncData() 훅을 실행시켜서 데이터를 가져오기도 하였는데 v3 에서는 어떻게 구현해야하는지 좀 궁금하다.
그리고 좀 아쉬운점은 컴포넌트를 작성하는데, 하나는 ts 하나는 그냥 기본으로 작성을 하였다. 이를 강제하는 옵션이 있다면 좋을거같다.(일관성 유지를 위해)
