4. Nuxt 에 대한 학습 내용

 

---

17단계: Nuxt의 최적화 기법

Nuxt는 기본적으로 성능 최적화를 잘 지원하지만, 추가 설정으로 더욱 빠른 앱을 만들 수 있습니다.

1. Lazy Loading (지연 로딩)

Nuxt의 pages/ 파일 기반 라우팅은 기본적으로 코드 분할이 적용됩니다. 하지만 컴포넌트에 대해 명시적으로 지연 로딩을 설정할 수도 있습니다.

예제

<script setup>
const LazyComponent = defineAsyncComponent(() => import('@/components/LazyComponent.vue'));
</script>

<template>
  <LazyComponent />
</template>

---

2. 이미지 최적화

Nuxt Image 모듈을 활용해 이미지를 최적화합니다.

이미지 설정

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    domains: ['example.com'], // 외부 이미지 도메인 허용
    dir: 'assets/images', // 로컬 이미지 디렉토리
  },
});

사용 예제

---

3. PWA 지원

Nuxt PWA 모듈을 사용하면 앱을 프로그레시브 웹 앱으로 변환할 수 있습니다.

설치

npm install @nuxtjs/pwa

설정

nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/pwa'],
  pwa: {
    manifest: {
      name: 'Nuxt PWA',
      short_name: 'NuxtPWA',
      theme_color: '#4DBA87',
      background_color: '#ffffff',
    },
  },
});

---

18단계: 커스텀 플러그인 제작

Nuxt에서 Vue 플러그인을 쉽게 통합할 수 있습니다.

1. 플러그인 생성

plugins/my-plugin.js:

export default defineNuxtPlugin(() => {
  return {
    provide: {
      sayHello: () => 'Hello from plugin!',
    },
  };
});

2. 플러그인 사용

<script setup>
const message = useNuxtApp().$sayHello();
</script>

<template>
  <p>{{ message }}</p>
</template>

---

19단계: 애니메이션 적용

Nuxt는 vue-transition을 사용하여 페이지 전환 애니메이션을 쉽게 적용할 수 있습니다.

1. 전환 설정

nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'fade', mode: 'out-in' },
  },
});

2. CSS 정의

assets/css/transitions.css:

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

사용

App.vue에 스타일 연결:

<template>
  <router-view />
</template>

<script setup>
import '@/assets/css/transitions.css';
</script>

---

20단계: 테스트와 디버깅

Nuxt에서 테스트 및 디버깅을 통해 안정성을 확보합니다.

1. 유닛 테스트

• Vue Test Utils와 Jest를 사용하여 컴포넌트 테스트를 작성합니다.

설치

npm install @vue/test-utils jest vue-jest --save-dev

예제

components/HelloWorld.spec.js:

import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

test('renders props.msg when passed', () => {
  const wrapper = mount(HelloWorld, {
    props: { msg: 'Hello Jest!' },
  });
  expect(wrapper.text()).toContain('Hello Jest!');
});

---

2. E2E 테스트

• Nuxt와 Cypress를 사용하여 전체 흐름 테스트를 작성합니다.

설치

npm install cypress --save-dev

예제

cypress/integration/sample.spec.js:

describe('Home Page', () => {
  it('should load home page', () => {
    cy.visit('/');
    cy.contains('Welcome to Nuxt');
  });
});

---

3. 디버깅 도구

• Nuxt는 브라우저에서 제공하는 DevTools와 통합됩니다.
• Nuxt 프로젝트 실행 시 http://localhost:3000/_nuxt에서 번들 파일을 분석할 수 있습니다.

---

21단계: 배포 전략

Nuxt는 다양한 배포 환경을 지원합니다.

1. 정적 사이트 배포 (SSG)

• npm run generate로 정적 HTML 파일을 생성하고, Netlify, Vercel 등으로 배포.

배포 예제

• dist/ 폴더를 정적 호스팅 서비스에 업로드.

2. 서버 사이드 렌더링 배포 (SSR)

• SSR은 Node.js 서버에서 실행해야 합니다.
• 배포 예제:

  npm run build
  npm run start
  

---