Nuxt3로 전환하게 된 이유

Nuxt3가 정식 릴리즈 후보에 오름에 따라 많은 관심이 생겼었습니다. 현재는 3.0.0-rc버전이 아닌 정식 3.0.0 버전으로 시작할 수 있게 되었습니다. 어떤 흥미로운 기능과 개발 환경에 대한 개선 사항이 포함되어있는지 이 게시글에서 이야기해보겠습니다.

주요 변경 사항

TypeScript 기반

Nuxt 3는 더 쉬운 유지 관리 및 기본 제공 TypeScript 지원을 위해 Typescript로 처음부터 다시 작성 되었습니다. 요즘은 자바스크립트 프레임워크 보다 타입스크립트에 흥미를 가지는 개발자들이 늘어나고있는 추세이기도 합니다. 특히 요즘은 신입 개발자들도 Typescript로 바로 시작하는 경우도 종종 보았습니다. 개발자들이 이렇게 타입스크립트에 흥미를 가지는데는 그럴만한 이유가 있는 것 같습니다. 정적 애플리케이션이 성장함에 따라 잠재적인 런타임 오류를 방지하는데 도움이 될 수도 있기 때문입니다. 빌드에 Typescript를 계속 채택함에 따라 Typescript의 인기가 계속 높아지는 이유도 있습니다. 그렇다고 해서 Typescript로 Nuxt App을 작성하는 것이 의무는 아닙니다. 여전히 Javascript, 일반적으로 개발해왔던 환경으로 개발도 가능하며 여전히 잘 동작하게 한 점도 좋으나, Nuxt 개발 스택에 Typescript를 추가하기에 적절한 부분인 듯 합니다.

이제 nuxt.config.ts와 tsconfig.json은 기본 구성 파일이 되었으며, package.json에서도 단지 nuxt: 3.0.0이라는 개발의존성만 설치하면 끝입니다.

Vue 3 및 Vite 지원

Nuxt 3가 Vue 3 기능을 지원하도록 개발되었습니다. Vue 3는 2020년 10월에 출시되어 이후 Vue 커뮤니티에서 많은 찬양을 받았습니다. Vue 3에서 Nuxt 3를 작성하면 Composition API와 전 보다 더 나은 모듈 import 및 전반적으로 향상된 앱 성능과 같은 기능을 확인할 수 있습니다.

Nuxt 3는 Nuxt 2와 역호환되는 Vite지원과 함께 제공됩니다. Vite는 최신 프로젝트에 더 빠르고 간결한 개발 경험을 제공하도록 도와주는 빌드 도구입니다. Vite가 수행하는 사전 번들링이 다른 JS 번들러에 비해 페이지 로딩 속도를 몇 십배 증가시키는 주장도 있습니다.

새로운 서버 엔진

Nuxt Nitro 라는 Nuxt 3 서버 엔진은 Nuxt 런타임 종속성이 없는 가벼운 서버입니다. Nuxt 앱에서 직접 페이지를 생성하는 것처럼 API 경로를 생성할 수 있도록 하여 Nuxt에 대한 새로운 전체 스택 기능을 잠금 해제합니다. Nextjs로 작업해보았다면 친숙한 이야기라고 합니다. Nuxt Nitro는 시작이 빠르고 edge-side-rendering(네트워크 호출 대기 시간이 짧은 성능이 뛰어난 유형의 렌더링)에 적합하며 어디에나 배포할 수 있다는 점입니다. 이는 Nuxt 애플리케이션을 가볍고 빠르게 만들며, Vercel, Netlify, Cloudflare 등과 같은 다양한 프론트의 클라우드 배포에 쉽게 올릴 수 있는 서버입니다.

Nuxt Nitro 덕분에 Nuxt를 배포할 수 있는 플랫폼

하지만 Vue 2, Nuxt 2버전에서 개발했던 프로젝트를 마이그레이션하거나 섣불리 전환할 수 없다는 점도 있습니다. 이유는 Nuxt 3가 한국에서는 커뮤니케이션이 활달하지 못하고, Vue 2와 Nuxt 2에서만 지원하는 모듈들이 Nuxt 3에서 호환되지 않는 경우도 많기 때문입니다. 때문에 최신 프로젝트에 고려할 모듈들이 있다면 이 점을 간과하지 말아야합니다.

Typescript 기술 스택을 쌓을 수 있는 좋은 기회이지만서도 아직 확신이 없기 때문에 망설여지지만, 기존보다 혁신적인 기능들이 추가되었고 많은 개선점이 있어서 좋은 개발 경험이 될 것입니다.