조금의 배경
저는 몇 년간 Vue 개발자로 활동해 왔어요. 이전 버전(특히 Vue 2.x)과 몇 번의 Nuxt 2 실험을 거쳤지만, Nuxt 2를 주요 도구로 사용하기를 망설였어요. (제 개인적인 의견이지만) 그 중에서 제가 좋아하지 않는 부분들이 있어서, Nuxt를 꼭 필요한 경우를 제외하고는 기본 Vue에 충실해왔죠.
그런데 Vue 3가 나오면서(정말 대단하고 멋있어요), Nuxt 3도 안정 버전을 출시하면서 모든것이 바뀌었어요. Nuxt 3로 몇 가지 연습 프로젝트를 해봐서 변경 사항을 정말 이해하고 마음을 바꿀 이유가 있을지 확인했어요. 그리고 결과는 Nuxt 3이 주장하는 모든 것을 만족시켜 주었고, 이제는 다른 방식으로 Vue 앱을 구축할 수 없을 것 같아요.
이 짧은 기사는 특정 순서 없이 Nuxt 3에 대해 좋아하는 모든 것을 강조하며, Vue와 함께 작업하는 이유를 더욱 강화합니다.
주의!
Nuxt 2부터 존재한 기능을 언급할 수도 있고 안 할 수도 있으니, Nuxt 커뮤니티 여러분, 제가 여러분들의 게임을 잘 몰랐다는 점 양해해 주세요.
이 글이란
이 글은 Nuxt 3에 대한 내가 가장 좋아하는 점들에 대해 자세히 알아보는 글이에요. Nuxt 3를 통해 왜 놀라운지, 그리고 나는 왜 그것에 흥분하는지에 대한 개인적인 견해를 담고 있어요.
이 글이 아닌 것
이 글은 Nuxt 3의 전반적인 최고 기능을 강조하는 것을 목적으로 하지 않았어요. 아마도 따로 다른 글에서 다룰 것 같아요.
눅시, 아름다운 아름다움!
Nuxt 3은 프로젝트를 생성하기가 훨씬 쉬워지도록 하는 강력한 CLI를 소개합니다. 귀하의 사용 사례에 따라 빠르게 프로젝트를 시작하거나 사용 가능한 다양한 템플릿 중에서 선택하여 빠르게 보일러플레이트를 선택할 수 있습니다. 그러나 여기에 멈추지 않습니다! 새 프로젝트 및 보일러플레이트를 생성하는 능력 외에도, Nuxt 모듈(새롭게 업그레이드된!)을 쉽게 추가하거나 레이아웃, 페이지, 컴포넌트, 플러그인 및 미들웨어를 상대적으로 쉽게 CLI에서 생성할 수 있습니다. 초기 보일러플레이트를 사용하여 빠르게 시작할 수 있어 불필요한 많은 수동 작업을 줄이고 시간을 절약할 수 있습니다.
물론 TypeScript
우리는 모두 TypeScript가 최근 몇 년 동안 웹 개발에 있어 가장 좋은 일 중 하나라고 생각할 수 있습니다. Vue 3에 추가되면서 Nuxt로 가기는 당연한 발전이었습니다. 하지만 그게 전부가 아닙니다 — Nuxt 3에서 TypeScript가 기본값인 것을 사랑합니다. Nuxt 내에서 JavaScript에서 TypeScript로 전환하는 과정은 구성이 필요하지 않아 매끄럽습니다. Nuxt 내에서 TypeScript의 모든 훌륭한 기능을 활용할 수 있기 때문에 경험이 더욱 좋아지는 것 같습니다.
Vite! Vite!! Vite!!!
Nuxt 3는 기본적으로 Vite를 사용합니다. 이미 알고 있을지 모르겠지만, Vite를 사용하면 경험이 훨씬 좋아집니다. Vue의 창시자 인 Evan You가 개발한 Vite는 개발 속도와 빌드 성능과 관련된 Webpack과 같은 전통적인 번들러의 제한 사항을 해결하기 위해 설계되었습니다. 그래서 Nuxt에서는 추가 구성 없이 Vite에서 제공하는 모든 기능을 기본으로 제공받는 것입니다.
'x'에서 가져오기...그만큼 쉬워요!
Vue 3의 주요 추가 기능 중 하나는 Composition API인데, 이 기능을 완전히 활용하려면 기본 Vue 3에서 많은 수동 가져오기가 필요합니다. 그러나 Nuxt 3는 이 과정을 상당히 간소화했습니다.
Nuxt 3에서는 Composition API의 기능을 사용할 수 있습니다. 계산된 속성, 반응형 변수, ref 및 컴포저블을 생성할 수 있습니다. 이들을 수동으로 가져오지 않아도 됩니다. Nuxt 3에는 자동으로 일반적으로 사용되는 API 및 컴포넌트를 가져오는 차세대 자동 입력이 포함되어 있어서 보일러플레이트 코드를 줄이고 개발을 더 원활하게 만듭니다.
모듈에 대해 이야기해봐요
앱에서 특정 기능을 구축하기 위해 추가 라이브러리와 모듈이 필요한 경우가 흔합니다. Nuxt 3는 모듈의 개념을 한 단계 더 높여 개발을 단순화하고 Nuxt에 특화된 래퍼를 쉽게 찾을 수 있도록 했습니다.
Nuxt 팀이 만든 Nuxt UI(와우! 이것을 정말 좋아합니다)나 Nuxt Image와 같은 모듈부터 인증, SEO, 데이터베이스 관리, UI, 애니메이션 등을 돕는 외부 모듈까지 Nuxt 3는 새로운 가능성을 열어줍니다.
제가 좋아하는 몇 가지 모듈들에 대해 자세히 설명하겠습니다. 다른 기사에서 자세히 이야기해야 할 것 같네요.
Nuxt UI, 사랑해요!
Nuxt 3에는 Nuxt UI가 함께 제공됩니다. 간단히 말해 Vue와 Nuxt 내에서 인터페이스를 구축하는 최고의 방법입니다. Nuxt UI는 Nuxt 모듈로, 현대적인 어떤 종류의 인터페이스라도 만들 수 있는 대부분의 기능을 제공합니다. 놀라운 그리고 매우 사용자 정의 가능한 컴포넌트들이 포함되어 있어 개발 시간을 최대 80%까지 단축할 수 있습니다. 이에 관해 얼마나 놀라운 지를 강조한 별도의 기사를 작성할 예정입니다.
넥스트 콘텐츠가 더 좋아졌어요!
넥스트 콘텐츠가 업그레이드되었어요! 이미 알고 계셨다면, 넥스트 콘텐츠는 넉스트에 직접 내장된 파일 기반 CMS입니다. .yml, .json, .md 및 .csv 파일을 사용하여 동적 페이지를 간편하고 빠르게 구축할 수 있는 간단한 방법을 제공합니다.
이 업그레이드는 코드 하이라이팅, 견고한 쿼리 빌더, 그리고 매우 주목할만한 기능인 MDC 구문과 같은 놀라운 기능을 탑재했습니다. MDC 구문을 사용하면 마크다운 파일 내에서 Vue 컴포넌트를 사용할 수 있어, 정말 멋지죠! 또한 넥스트 콘텐츠는 기존의 구성 요소와 컴포저블을 활용하여 어플리케이션을 더 간단하게 구축할 수 있도록 대규모로 재작성되었습니다.
Nuxt Studio!
요즘 Nuxt Content가 이미 인상적이었지만, Nuxt 팀이 Nuxt Studio로 무엇을 선보였습니다!
사용자 정의 컴포넌트, 실시간 협업, 지속적인 배포, 미리보기 링크, 초안 등과 같은 정말 멋진 기능들이 포함되어 있습니다!
결론
Vue 개발자(또는 어떤 종류의 프론트엔드 개발자든)라면, Nuxt 3는 삶을 편하게 만들어줍니다! 마치 코딩을 더 부드럽고 즐겁게 만들어주는 초능력을 가진 것 같죠. Nuxt 4가 다가오고 있다면, 먼저 다음 번 멋진 기술 이야기 세션을 기대할 수밖에 없습니다. 더 많은 흥미로운 소식을 기대해주세요!
결론
Vue 개발자이면서 (혹은 어떤 프론트엔드 개발자라도) Nuxt 3은 삶을 편하게 만들어 줍니다! 코딩하는 과정이 더욱 원활해지고 즐거워집니다. Nuxt 4가 다가오는데, 다음에 또 에픽한 기술 토론을 하러 돌아올 것만 같네요. 더 많은 흥미로운 소식을 기대해 주세요!
PS: Nuxt를 꾸준히 사용하는 경우 Nuxtr을 꼭 살펴보세요. 이것은 Nuxt를 VS Code에서 사용하는 방식을 혁신시키는 확장 프로그램입니다. 이 글은 유료 홍보가 아니지만, 꼭 한 번 시도해보길 강력히 추천합니다!