우리 팀원 Jakub이 새로운 Nuxt 3 CLI의 DX를 개선하는 데 어떻게 도움이 되었는지!

며칠 전, Nuxt Core Team은 Nuxt의 최신 메이저 에디션(Nuxt 3이라고 함)의 새 버전을 보다 안정적인 릴리스 후보 버전(RC)으로 출시했습니다. 이를 통해 정적 사이트 생성(SSG), 배포 사전 설정, 새로운 미들웨어 등과 같은 여러 기능이 릴리스되었습니다.

Nuxt 3의 새로운 기능에 아직 익숙하지 않다면 Vue Storefront Hackathon에서 최신 Nuxt 버전의 훌륭한 개발자 경험 개선 사항에 대한 강연을 녹음했습니다.



하지만 이 게시물에서는 Nuxi라는 새로운 Nuxt 3 CLI 도구에 초점을 맞추고자 합니다. 프로젝트 생성에서 프로덕션용 빌드에 이르기까지 다양한 작업을 수행할 수 있는 고도로 사용자 지정 가능하고 확장 가능한 명령줄 도구입니다. Nuxi에는 사용할 수 있는 몇 가지 명령이 있으며 오늘은 add라는 명령에 초점을 맞출 것입니다. 내가 개발한 새로운 Add 명령은 실제로 거의 한 달 전에 Nuxt 3에 병합되었으며 이를 핵심 프레임워크에 병합하는 과정은 정말 정말 빨랐습니다. 저는 Nuxt 3 github 저장소에서 토론을 제안했고, 몇 가지 긍정적인 피드백을 받았으며 간단한 개념 증명 솔루션을 만들었습니다(이 시점에서는 주로 서버 엔드포인트 및 컴포저블을 추가하기 위한 것임). Pooya Parsa(Pio)는 이 기능을 정말 좋아했고, 내 코드를 브랜치에 푸시한 지 거의 10분 만에 그는 이미 피드백을 제공했으며 구성 요소, 페이지, 레이아웃 등과 같은 다른 템플릿을 개발하도록 승인했습니다! 나는 제안된 변경 사항을 추가했고 다음날 트위터 게시물 아래를 보았습니다 💚



이 새로운 기능과 나중에 설명할 기사, 비디오 및 모듈과 같은 이전 콘텐츠 덕분에 저는 이제 Nuxt 대사이기도 합니다 🚀

새로운 CLI 추가는 정확히 어떻게 작동합니까?

이 새로운 명령에 대한 영감은 실제로 Nest.js라는 정말 인기 있는 Node.js 백엔드 프레임워크에서 나옵니다. 아직 시도하지 않았다면 정말 잘 구조화되고 설계되었으며 캐싱, 크론 작업, 마이크로 서비스 지원 등과 같은 유용한 기능이 많이 포함되어 있으므로 시도하는 것이 좋습니다.



https://nestjs.com/

강력한 CLI를 사용하여 Nest.js에서 다음 명령을 호출하여 새 컨트롤러, 서비스, 모듈을 쉽게 생성할 수 있습니다.

nest generate controller cat

그러면 다음과 같이 필요한 모든 가져오기를 업데이트하는 새 CatController.ts 파일이 생성됩니다.

import { Controller } from '@nestjs/common';

@Controller('cat')
export class CatController {}

새로운 Nuxi CLIadd 방법은 매우 유사하게 작동합니다.

nuxi add component TheHeader

components 디렉토리에 다음 구성 요소가 생성됩니다.

<script lang="ts" setup></script>

<template>
  <div>
    Component: TheHeader
  </div>
</template>

<style scoped></style>

Nuxt 자동 가져오기 덕분에 구성 요소를 수동으로 가져올 필요가 없습니다. Nuxt가 도와드리겠습니다 :)



명령은 Nuxt 설명서https://v3.nuxtjs.org/api/commands/add에 설명된 Nuxt 페이지의 다른 요소에 대해 매우 유사하게 작동합니다.

보너스

Nuxt로 작업하는 것을 좋아한다면 Nuxt용으로 만들고 있는 콘텐츠에 대한 다음 링크를 확인하는 것이 좋습니다.

Algolia integration module for Nuxt

Storyblok article about Nuxt, Algolia and Storyblok

앞으로 몇 주 안에 Mailchimp, Revue, Buttondown 등과 같은 인기 있는 뉴스레터 제공업체를 Nuxt 앱에 쉽게 통합할 수 있는 뉴스레터 모듈도 출시할 예정입니다.