본문으로 이동

Nuxt

위키백과, 우리 모두의 백과사전.
Nuxt.js
원저자Alexandre Chopin, Sebastien Chopin, Pooya Parsa
개발자NuxtLabs
발표일2016년 10월 26일(9년 전)(2016-10-26)[1]
안정화 버전
4.2.2[2] 위키데이터에서 편집하기 / 2025년 12월 9일(30일 전)(2025년 12월 9일)
저장소github.com/nuxt/nuxt
프로그래밍 언어자바스크립트, Vue.js
플랫폼크로스 플랫폼
크기57 KB (운영용)
종류자유 소프트웨어, 자바스크립트 라이브러리, 자바스크립트 프레임워크, 라이브러리
라이선스MIT 라이선스[3]
웹사이트nuxt.com

Nuxt는 Vue.js, Nitro, Vite를 기반으로 하는 자유-오픈 소스 자바스크립트 라이브러리이다. Nuxt는 Vue 대신 리액트를 기반으로 하는 유사한 웹 프레임워크인 Next.js에서 영감을 받았다.[4]

Nuxt가 단독으로 Vue를 사용하는 것에 비해 갖는 주요 장점은 유니버설 렌더링 시스템이다. 이 프레임워크는 브라우저 내 싱글 페이지 애플리케이션 (SPA)과 서버 렌더링된 정적 웹 페이지로 작동하며, 서버 렌더링된 페이지가 로드된 후 완전한 SPA로 "하이드레이팅"된다. 이를 통해 웹사이트는 클라이언트 렌더링 애플리케이션의 인터랙티비티 외에도 서버 렌더링 사이트의 검색 엔진 최적화 및 성능 이점을 가질 수 있다.[5][6] Nuxt는 서버 렌더링 기능을 개발자로부터 크게 추상화하며, 따라서 Vue의 단일 파일 컴포넌트 (SFC) 시스템을 사용하는 전통적인 SPA와 유사한 개발 경험을 가질 수 있다.[7]

주요 유니버설 렌더링 메커니즘 외에도 Nuxt는 경로 기반 라우팅, 핫 모듈 리플레이스먼트 (HMR), 기본 제공 타입스크립트 지원, 미들웨어 및 서버 로직과 같은 많은 다른 이점과 편의 기능을 제공한다.[8]

기능

[편집]

경로 기반 라우팅

[편집]

일반적으로 모든 경로를 수동으로 등록해야 하는 일반 Vue.js 애플리케이션과 달리, Nuxt는 경로 기반 라우팅을 사용하여 애플리케이션의 모든 경로를 자동으로 등록한다.[9]

페이지는 pages/ 폴더에 선언되며, 페이지 파일의 이름이 경로의 이름이 된다. 동적 매개변수는 대괄호를 사용하여 추가할 수 있으며, 캐치올 경로는 자바스크립트의 배열 전개 구문과 매우 유사하게 세 개의 점과 대괄호를 사용하여 추가할 수 있다.[10]

  • /pages/about.vue - /about과 일치한다.
  • /pages/user/[id].vue - /user 바로 아래의 모든 경로와 일치한다.
  • /pages/posts/[...slug].vue - /posts 아래의 모든 경로와 일치한다.
  • /pages/admin/[[page]].vue - /admin과 그 바로 아래의 모든 경로와 일치한다.

자동 임포트

[편집]

Nuxt는 대부분의 Vue 컴포지션 API 함수와 composables/ 및 utils/ 폴더의 모든 헬퍼 함수를 자동으로 임포트한다.[11]

<script setup>
    // ref는 자동으로 임포트됩니다.
    const count = ref(0);
    // useRoute도 자동으로 임포트됩니다.
    const route = useRoute();
</script>

<template>
    <span>{{ count }}</span>
</template>

레이아웃

[편집]

Nuxt는 SSR 친화적인 레이아웃을 기본으로 지원하며, 이를 통해 유사한 페이지가 헤더 및 푸터와 같은 동일한 기본 템플릿을 사용할 수 있다. 레이아웃은 layouts/ 폴더에 선언되며, 네이티브 Vue 슬롯을 사용하여 작동한다.

Nuxt 프로젝트에서 레이아웃을 활성화하려면, 애플리케이션의 엔트리 포인트인 app.vue가 각 페이지의 레이아웃을 전환하는 NuxtLayout 컴포넌트를 포함해야 한다.[12]

<!-- sample app.vue 파일 내용 -->
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
</template>

기본 레이아웃은 layouts/default.vue에 위치하며, 페이지 콘텐츠를 위한 슬롯을 포함해야 한다.

<!-- sample layout 파일 내용 -->
<template>
    <CustomNavbar />
    <slot />
    <CustomFooter />
</template>

페이지는 설정 함수 또는 블록에서 definePageMeta 헬퍼를 사용하여 사용자 정의 레이아웃을 사용할 수 있다.[13]

<script setup>
definePageMeta({
    layout: "custom",
});
</script>

<template>
    <!-- 이제 사용자 정의 레이아웃의 슬롯을 채웁니다 -->
</template>

미들웨어

[편집]

Nuxt는 애플리케이션에 미들웨어 지원을 추가하여, 내비게이션 변경 사이에 서버 로직을 실행할 수 있도록 한다. 전역 및 페이지별 미들웨어 파일이 모두 지원된다.[14]

미들웨어는 middleware/ 폴더에 선언되며, 현재 및 이전 경로를 매개변수로 받는 함수를 내보낸다. 여기에서 abortNavigation 및 navigateTo와 같은 전역적으로 사용 가능한 헬퍼를 사용하여 내비게이션을 제어할 수 있다.[15][16] 

export default defineNuxtMiddleware((to, from) => {
    // 내비게이션 로직
    if (to.params.id === "0")
        return abortNavigation();
    return navigateTo(`/users/${to.params.id}`);
});

서버 API

[편집]

Nuxt는 server/ 폴더를 사용하여 서버 API 경로 및 핸들러를 생성할 수도 있다. server/api에 배치된 모든 파일은 API 경로가 되고, server/routes에 배치된 모든 파일은 경로 파일이 된다. 차이점은 최종 파일 위치(server/api는 경로에 api 접두사를 추가한다)이다.[17]

// server/api/hello.ts
export default defineEventHandler((event) => {
    return {
        some: "data here",
    };
});

이는 이제 useFetch 컴포저블을 사용하여 컴포넌트에서 호출할 수 있다.

<script setup>
const { data } = await useFetch('/api/hello')
</script>

<template>
  <pre>{{ data }}</pre>
</template>

같이 보기

[편집]

각주

[편집]
  1. ↑ “Nuxt.js First Public Release”. 《Npm》. 
  2. ↑ “Release 4.2.2”. 2025년 12월 9일. 2025년 12월 10일에 확인함. 
  3. ↑ “nuxt.js/LICENSE.md”. 《GitHub》. 2018년 6월 18일에 원본 문서에서 보존된 문서. 2018년 6월 18일에 확인함. 
  4. ↑ “Nuxt First Public Release” (미국 영어). 《Npm》. 2017년 3월 23일에 확인함. 
  5. ↑ Omole, Olayinka (2019년 3월 18일). “Nuxt: A Universal Vue.js Application Framework” (미국 영어). 《Sitepoint》. 2020년 6월 18일에 확인함. 
  6. ↑ Berning, Dave (2018년 4월 16일). “Getting Started with Server-Side Rendering Using Nuxt” (미국 영어). 《Alligator.io》. 2018년 7월 2일에 확인함. 
  7. ↑ “Vue.js Development · Nuxt Concepts” (영어). 《Nuxt》. 2025년 2월 9일에 확인함. 
  8. ↑ “Introduction · Get Started with Nuxt” (영어). 《Nuxt》. 2025년 2월 9일에 확인함. 
  9. ↑ “Routing · Get Started with Nuxt” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  10. ↑ “pages/ · Nuxt Directory Structure” (영어). 《Nuxt》. 2023년 8월 19일에 원본 문서에서 보존된 문서. 2025년 3월 6일에 확인함. 
  11. ↑ “Auto-imports · Nuxt Concepts” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  12. ↑ “Views · Get Started with Nuxt” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  13. ↑ “layouts/ · Nuxt Directory Structure” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  14. ↑ “middleware/ · Nuxt Directory Structure” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  15. ↑ “abortNavigation · Nuxt Utils” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  16. ↑ “navigateTo · Nuxt Utils” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 
  17. ↑ “server/ · Nuxt Directory Structure” (영어). 《Nuxt》. 2025년 3월 6일에 확인함. 

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=Nuxt&oldid=41014394"