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
'개발 > vue' 카테고리의 다른 글
3. Nuxt 에 대한 학습 내용 (2) | 2024.12.20 |
---|---|
2. Nuxt 에 대한 학습 내용 (0) | 2024.12.20 |
1. Nuxt 에 대한 학습 내용 (0) | 2024.12.20 |
React vs Vue, Quasar, VitePress, naive ui (2) | 2024.10.25 |