nuxt.js 개요

(해당 글은 version3.13 기준으로 작성되었습니다.)

소개

Nuxt의 목표는 웹 개발을 직관적이고 성능이 뛰어나게 만들며, 뛰어난 개발자 경험을 집중하는는 것입니다. Nuxt는 Vue.js를 사용하여 타입 안전하고, 성능이 뛰어나며, 프로덕션 급의 풀스택 웹 애플리케이션과 웹사이트를 만들기 위한 직관적이고 확장 가능한 무료 오픈 소스 프레임워크입니다. Nuxt는 개발 초기부터 .vue 파일을 작성하는 것을 가능하게 하여 개발 중에는 핫 모듈 교체를 가능하게 했으며, 프로덕션에서는 기본적으로 서버 사이드 렌더링을 통해 성능 좋은 애플리케이션을 사용할 수 있도록 했습니다. Nuxt는 벤더 종속성을 없애 모든 곳에 애플리케이션을 배포할 수 있게 합니다. 브라우저에서 Nuxt를 사용해 보고 싶다면, 온라인 샌드박스 중 하나에서 시도해 볼 수 있습니다.

자동화 및 컨벤션

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

• 파일 기반 라우팅: pages/ 디렉토리의 구조를 기반으로 라우트를 정의합니다. 이를 통해 애플리케이션을 조직하고 수동 라우트 설정의 필요성을 줄일 수 있습니다.
• 코드 분할: Nuxt는 코드를 자동으로 더 작은 청크로 나누어 애플리케이션의 초기 로드 시간을 줄이는 데 도움을 줍니다.
• 기본 제공 서버 사이드 렌더링: Nuxt에는 내장 SSR 기능이 있어 별도의 서버를 설정할 필요가 없습니다.
• 자동 가져오기: Vue 컴포저블과 컴포넌트를 해당 디렉토리에 작성하고 개발자가 직접 가져오지 않고도 사용할 수 있으며, 트리 쉐이킹 및 최적화된 JS 번들의 이점을 누릴 수 있습니다.
• 데이터 가져오기 유틸리티: Nuxt는 SSR 호환 데이터 가져오기를 처리하는 컴포저블과 다양한 전략을 제공합니다.
• 제로 구성 TypeScript 지원: auto-generated types 및 tsconfig.json을 사용하여 TypeScript를 배우지 않고도 타입 안전한 코드를 작성할 수 있습니다. (tsconfig.json)
• 구성된 빌드 도구: 기본적으로 Vite를 사용하여 개발 중 핫 모듈 교체(HMR)를 지원하며, 최고의 관행이 내장된 상태로 프로덕션을 위한 코드 번들을 만듭니다. Nuxt는 이러한 작업을 처리하고 프론트엔드 및 백엔드 기능을 제공하므로 웹 애플리케이션을 만드는 것에 집중할 수 있습니다.

서버 사이드 렌더링

Nuxt는 기본적으로 서버 사이드 렌더링(SSR) 기능을 내장하고 있어 별도의 서버를 설정할 필요가 없습니다. 이는 웹 애플리케이션에 여러 가지 이점을 제공합니다:

• 더 빠른 초기 페이지 로드 시간: Nuxt는 완전히 렌더링된 HTML 페이지를 브라우저에 보내고, 이는 즉시 표시될 수 있습니다. 이는 특히 느린 네트워크나 장치에서 사용자가 인지하는 페이지 로드 시간을 더 빠르게 하고, 더 나은 사용자 경험(UX)을 제공합니다.
• 향상된 SEO: 검색 엔진은 HTML 콘텐츠가 즉시 제공되기 때문에 SSR 페이지를 더 잘 인덱싱할 수 있습니다. 이는 클라이언트 측에서 콘텐츠를 렌더링하기 위해 JavaScript를 요구할 필요가 없습니다.
• 저전력 장치에서의 더 나은 성능: 클라이언트 측에서 다운로드되고 실행되어야 할 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, Serverless, Workers, Edge-side 렌더링 또는 순수 정적을 지원하는 모든 시스템에 배포할 수 있습니다.

프로덕션 준비 완료

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

모듈화

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

아키텍처

Nuxt는 다양한 핵심 패키지로 구성됩니다:

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

각 개념을 읽어 Nuxt의 기능과 각 패키지의 범위를 완전히 이해할 것을 권장합니다.