본문으로 건너뛰기
Advertisement

Nuxt.js 기초

Nuxt는 Vue.js 개발자들에게 최상의 개발 경험(DX)을 제공하는 오픈 소스 프레임워크입니다.

1. Nuxt를 쓰는 이유​

  • 자동 설정: 파일 시스템 기반의 라우팅, 컴포넌트 자동 임포팅 등을 제공합니다.
  • 렌더링 모드: SSR(Server-Side Rendering), SSG(Static Site Generation) 등을 손쉽게 설정할 수 있습니다.
  • SEO 최적화: 서버 사이드 렌더링을 통해 검색 엔진에 노출되기 유리한 구조를 가집니다.

2. 디렉토리 구조 기반 라우팅​

pages/ 디렉토리에 파일을 만들면 자동으로 라우트가 생성됩니다.

  • pages/index.vue -> /
  • pages/about.vue -> /about

3. 데이터 페칭 (useFetch)​

<script setup>
const { data, pending, error } = await useFetch('/api/users')
</script>

<template>
  <div v-if="pending">로딩 중...</div>
  <ul v-else>
    <li v-for="user in data" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

4. Nuxt 모듈 생태계​

Tailwind CSS, Google Analytics, Content 관리 등 다양한 기능을 모듈 추가만으로 쉽게 구현할 수 있습니다.

Vue.js 기반의 강력한 웹 어플리케이션을 만들고 싶다면 Nuxt가 좋은 선택이 될 것입니다.

Advertisement
Advertisement