“ 당신은 소프트웨어 품질을 추구할 수도 있고, 포인터 연산을 할 수도 있다. 그러나 두 개를 동시에 할 수는 없다. ”
이번에 소개드릴 내용은 Nuxt3입니다.
한 1~2년 정도 Nuxt2로 프로젝트를 진행했었는데요.
Nuxt3 가 작년에 안정화가 됐더라도 아직은 시기상조라고 생각해서
그동안 Nuxt2에서만 프로젝트를 진행했었습니다
vue2문법으로 vuex 등 이렇게 쓰다가 vue3문법 사용해보고 싶어서
브리지도 설치해 봤는데 제가 설정을 잘 못한 건지 오류가 자꾸 나서 임시방편으로
Nuxt2에 Composition API 설치해 보고
Pinia 상태관리 모듈 한번 써보고, 컴포저블 여러 개 만들어보고 하다 보니
Nuxt3가 점점 업데이트되었더라고요. 올해에 vue2 수명 종료된다니..
이번기회에 한번 Nuxt3로 환경설정부터 차근차근 진행하면서 포스팅을 써볼까 합니다.
2023.07.17일 기준) Nuxt 3.6 버전입니다.
아래 공식 사이트에서 기사나 레퍼런스 문서 한번 읽어보세요!.
Nuxt: The Intuitive Web Framework
nuxt.com
간략 설명
1. 파일 기반 라우팅
2. SSR 기능 내장 (서버 렌더링)
3. Auto import
4. TypeScript 지원
5. Vite 빌드 도구 사용 / 핫 모듈 교체(HMR) 지원
Nuxt3 설치하기
- Node.js 16.10.0 이상
npx nuxi@latest init <project-name>
명령어로 터미널에 입력하여 진행하시면 아래와 같이 나옵니다.
이제 아래 프로젝트 폴더로 진입하셔서 "cd <project-name>"
npm install 하여 설치하시면 됩니다.
※ 혹시 npm install 오류가 난다면 node --version으로 버전 확인해 보시기 바랍니다. 꼭 16.10.0 이상 버전에서 설치하셔야 합니다.
Nuxt3 폴더구조
npm install까지 진행하셨으면 아래처럼 폴더구조가 보일 것입니다.
Nuxt2와는 다르게 폴더가 생성되어있지 않습니다. 그러면 아래의 이미지에서 폴더를 추가해 보겠습니다.
먼저 root 경로에 있는 app.vue를 한번 아래처럼 수정해 보겠습니다.
레이아웃과 페이지 구성을 위해 아래와 같이 레이아웃 안에 페이지가 구성되게 설정합니다.
<template>
<div>
<NuxtLayout>
<NuxtPage/>
</NuxtLayout>
</div>
</template>
<script setup lang="ts">
</script>
Layout 폴더를 생성하여 default.vue 파일을 생성합니다.
Nuxt2에서는 <nuxt/> 컴포넌트를 사용해서 페이지 콘텐츠를 레이아웃에 삽입하였습니다.
그런데 Nuxt3는 composition API 기반의 레이아웃 시스템이 새롭게 도입되어 <slot>을 사용하는 방식으로 변경되었습니다.
<template>
<div>
<slot/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
Pages 폴더를 생성하여 index.vue 파일을 생성합니다.
<template>
<div>
여기가 index 페이지입니다.
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
이어서 나머지 추후에 사용될 기본적인 폴더들도 생성해 봅니다. 아래의 이미지를 참고하시면 됩니다.
Nuxt3 실행
아래 명령어로 실행하여 pages/index.vue가 제대로 잘 나오는지 확인해 봅니다.
npm run dev
Nuxt3 package.json 명령어 간략 설명
npm run build : 애플리케이션 빌드 - 소스 코드 번들로 패키징하고 최적화된 정적파일 생성합니다.
npm run dev : 개발 모드에서 애플리케이션 실행하는 데 사용, 소스코드가 실시간으로 변경될 때마다 자동으로 다시 빌드됩니다.
npm run generate : 정적 사이트 생성(SSG)을 위해 애플리케이션을 빌드하는 데 사용합니다.
npm run preview : 정적 사이트 생성 시 미리 보기 기능을 제공 - generate 명령어로 생성된 정적 파일을 로컬 서버에서 미리 확인합니다.
npm run postinstall : 이 명령어는 Nuxt와 관련된 의존성 패키지를 설치하고 프로젝트를 미리 설정하는 데 사용됩니다. 주로 npm install 명령어 후에 자동으로 실행되며, 일반적으로 필요한 환경 설정이나 추가적인 작업을 수행하기 위해 사용될 수 있습니다.
간단하게 Nuxt3 설치와 기본적인 폴더구조를 알아보았습니다.
다음 포스팅에서는 ESLint와 tsconfig.json 설정을 한번 해보고 주로 사용되는 라이브러리 설치를 진행해 볼까 합니다.
원래 EsLint든 tsconfig.json이든 각자 프로젝트 성격과 스타일마다 다르긴 하지만 제가 자주 사용하는 방식에 대해서
프로젝트 설정을 해보고 나머지 설정들을 진행해 보겠습니다.
