소개

Nuxt는 직관적이고 확장 가능한 방식으로 타입 안전하고, 성능이 뛰어나며, 프로덕션급 풀스택 웹 애플리케이션과 웹사이트를 Vue.js로 만들 수 있게 해 주는 무료 오픈 소스 프레임워크입니다.

개발 초반부터 .vue 파일을 바로 작성할 수 있도록 모든 것을 준비해 두었으며, 개발 환경에서는 핫 모듈 교체를, 프로덕션 환경에서는 기본값으로 서버 사이드 렌더링이 적용된 고성능 애플리케이션을 누릴 수 있습니다.

Nuxt는 특정 벤더에 종속되지 않으므로, 애플리케이션을 어디든지, 심지어 엣지 환경에도 배포할 수 있습니다.

자동화와 컨벤션

Nuxt는 컨벤션과 의견이 반영된 디렉터리 구조를 사용해 반복 작업을 자동화하고, 개발자가 기능 개발에 집중할 수 있도록 돕습니다. 설정 파일을 통해 기본 동작을 여전히 커스터마이즈하고 오버라이드할 수 있습니다.

• 파일 기반 라우팅: app/pages/ 디렉터리의 구조를 기반으로 라우트를 정의합니다. 이를 통해 애플리케이션을 더 쉽게 구성하고, 수동으로 라우트를 설정해야 하는 필요성을 줄일 수 있습니다.
• 코드 스플리팅: Nuxt는 코드를 자동으로 더 작은 청크로 분할하여, 애플리케이션의 초기 로드 시간을 줄이는 데 도움을 줍니다.
• 기본 제공 서버 사이드 렌더링: Nuxt는 내장된 SSR 기능을 제공하므로, 별도의 서버를 직접 설정할 필요가 없습니다.
• 자동 임포트: Vue 컴포저블과 컴포넌트를 각자의 디렉터리에 작성하기만 하면, 트리 셰이킹과 최적화된 JS 번들의 이점을 유지한 채 임포트 없이 바로 사용할 수 있습니다.
• 데이터 패칭 유틸리티: Nuxt는 SSR과 호환되는 데이터 패칭을 처리하고 다양한 전략을 사용할 수 있는 컴포저블을 제공합니다.
• 제로 설정 TypeScript 지원: 자동 생성 타입과 tsconfig.json 덕분에, TypeScript를 따로 학습하지 않고도 타입 안전한 코드를 작성할 수 있습니다.
• 구성된 빌드 도구: 개발 환경에서 핫 모듈 교체(HMR)를 지원하고, 프로덕션용 코드 번들링 시 모범 사례를 내장한 Vite를 기본으로 사용합니다.

Nuxt는 이러한 부분을 모두 처리하고 프론트엔드와 백엔드 기능을 함께 제공하므로, 여러분은 웹 애플리케이션을 만드는 일에만 집중할 수 있습니다.

서버 사이드 렌더링

Nuxt는 기본값으로 서버를 직접 설정하지 않아도 되는 내장 서버 사이드 렌더링(SSR) 기능을 제공하며, 이는 웹 애플리케이션에 많은 이점을 줍니다:

• 더 빠른 초기 페이지 로드 시간: Nuxt는 완전히 렌더링된 HTML 페이지를 브라우저로 전송하므로, 즉시 표시될 수 있습니다. 이는 특히 느린 네트워크나 기기에서 더 빠른 체감 로드 시간과 더 나은 사용자 경험(UX)을 제공합니다.
• 향상된 SEO: HTML 콘텐츠가 즉시 제공되므로, 검색 엔진이 클라이언트 측에서 JavaScript로 콘텐츠를 렌더링할 필요 없이 SSR 페이지를 더 잘 인덱싱할 수 있습니다.
• 저사양 기기에서의 더 나은 성능: 클라이언트 측에서 다운로드하고 실행해야 하는 JavaScript 양을 줄여, 무거운 JavaScript 애플리케이션을 처리하기 어려운 저사양 기기에 유리합니다.
• 더 나은 접근성: 초기 페이지 로드 시점에 콘텐츠가 즉시 제공되므로, 스크린 리더나 기타 보조 기술에 의존하는 사용자에게 접근성을 향상시킵니다.
• 더 쉬운 캐싱: 페이지를 서버 측에서 캐싱할 수 있어, 콘텐츠를 생성하고 클라이언트로 전송하는 데 걸리는 시간을 줄여 성능을 더욱 향상시킬 수 있습니다.

전반적으로 서버 사이드 렌더링은 더 빠르고 효율적인 사용자 경험을 제공할 뿐 아니라, 검색 엔진 최적화와 접근성도 개선합니다.

Nuxt는 다재다능한 프레임워크이므로, nuxt generate로 전체 애플리케이션을 정적 호스팅용으로 정적으로 렌더링하거나, ssr: false 옵션으로 전역적으로 SSR을 비활성화하거나, routeRules 옵션을 설정해 하이브리드 렌더링을 활용할 수 있습니다.

서버 엔진

Nuxt 서버 엔진 Nitro는 새로운 풀스택 기능을 제공합니다.

개발 환경에서는 서버 코드와 컨텍스트 격리를 위해 Rollup과 Node.js 워커를 사용합니다. 또한 server/api/의 파일을 읽어 서버 API를 생성하고, server/middleware/에서 서버 미들웨어를 생성합니다.

프로덕션 환경에서는 Nitro가 앱과 서버를 하나의 범용 .output 디렉터리로 빌드합니다. 이 출력물은 가볍고, 최소화되어 있으며(폴리필을 제외한) 어떤 Node.js 모듈에도 의존하지 않습니다. 이 출력물은 Node.js, 서버리스, 워커, 엣지 사이드 렌더링 또는 순수 정적 환경 등 JavaScript를 지원하는 어떤 시스템에도 배포할 수 있습니다.

프로덕션 준비 완료

Nuxt 애플리케이션은 Node 또는 Deno 서버에 배포하거나, 정적 환경에 호스팅할 수 있도록 사전 렌더링하거나, 서버리스 및 엣지 제공자에게 배포할 수 있습니다.

모듈식

모듈 시스템을 통해 Nuxt를 사용자 정의 기능과 서드파티 서비스 통합으로 확장할 수 있습니다.

아키텍처

Nuxt는 여러 코어 패키지로 구성됩니다:

• 코어 엔진: nuxt
• 번들러: @nuxt/vite-builder, @nuxt/rspack-builder 및 @nuxt/webpack-builder
• 커맨드 라인 인터페이스: @nuxt/cli
• 서버 엔진: nitro
• 개발 키트: @nuxt/kit

각 개념을 읽어 보면 Nuxt의 전체적인 역량과 각 패키지의 범위를 온전히 이해하는 데 도움이 됩니다.