[Vue] Nuxt.js 시작하기

 

 

- 입사 테스트겸 nuxt.js를 사용해 볼 계기가 생겨 vue2 와 함께 작업을 해보기로 했다.  

 

 

일단 nuxt.js란 무엇일까

nuxt.js란?

nuxt.js는 vue.js를 기반으로 하는 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 렌더링(CSR)을 모두 지원하는 강력한 도구다.

nuxt.js를 사용하면 vue.js로 개발할 때 복잡한 설정을 간소화하고, SEO(검색 엔진 최적화) 및 퍼포먼스를 개선할 수 있다.

 

** nuxt.js의 주요 특징 

1. 서버 사이드 렌더링 (SSR):
   • 기본적으로 서버 사이드 렌더링을 지원하여, 초기 페이지 로딩 시 서버에서 HTML을 미리 렌더링하고 클라이언트에 전송. 이는 SEO(검색 엔진 최적화)와 첫 페이지 로딩 속도 향상에 큰 도움을 줌.
2. 정적 사이트 생성 (SSG):
   • 정적 사이트를 미리 생성하는 기능도 제공. nuxt generate 명령어로 모든 페이지를 정적 HTML 파일로 미리 생성할 수 있으며 이는 블로그, 뉴스 사이트 등에서 유용하게 사용됨.
3. 자동 코드 분할:
   • 각 페이지가 독립적으로 로드되도록 자동으로 코드 분할을 수행하여, 애플리케이션의 로딩 성능을 최적화.
4. 파일 기반 라우팅:
   • vue router를 직접 설정할 필요 없이, pages 디렉토리 내에서 파일을 추가함으로써 자동으로 라우팅이 설정. 파일 시스템을 기반으로 한 라우팅이므로 매우 직관적이고 편리.
5. 플러그인 시스템:
   • vue 플러그인을 쉽게 사용할 수 있는 시스템을 제공. 이를 통해 앱의 초기화 과정에서 공통된 기능들을 설정하거나 라이브러리를 전역적으로 사용할 수 있음.
6. 모듈 시스템:
   • 다양한 기능을 확장할 수 있는 모듈 시스템을 지원. 예를 들어, PWA(Progressive Web App) 모듈, Google Analytics 모듈 등 여러 모듈을 손쉽게 추가 가능.
7. Vuex와의 통합:
   • vuex를 기본적으로 설정, 상태 관리와 관련된 작업을 간소화. nuxt의 store 디렉토리 내에 vuex 상태 관리 파일을 배치하여 애플리케이션의 상태를 관리할 수 있음.
8. SEO 최적화:
   • SSR과 함께, Nuxt.js는 메타 태그, OG 태그, Twitter 카드 등의 SEO 관련 태그를 동적으로 관리하고 쉽게 설정할 수 있도록 함

 

1. nuxt.js 시작하기

18.14.0을 기반으로 한 node.js 환경에서 설치

터미널에서 npx create-nuxt-app 프로젝트명

 

그리고 이어서 환경을 프로젝트 성격에 맞게 설정 - tailwind.css를 사용할 예정이므로, tailwind.CSS를 선택

 

이렇게 환경설정이 끝나면 nuxt.js 프로젝트가 만들어진다.

 

.nuxt 파일이 내장되어있다.

 

tailwind.config.js 파일과 pages, assets 디렉토리는 추후 따로 만든 파일이므로 넘어가도 좋다.

[**pages, assets 디렉토리의 경우 만들어지는 경우가 있던데 본인은 그렇지 않아 따로 생성해주었다. ]

 

여기서 vue와 차이점이 있다면 .nuxt라는 디렉토리가 자동으로 생성되었다는 것.

.nuxt 디렉토리를 클릭하면 클라이언트파일, 서버파일이 함께 생성됨을 알 수 있다.

 

 

 

2. 라우터설정

nuxt.js의 가장 편리했던 점은 라우터를 따로 설정하지 않아도 된다는 것!

pages라는 디렉토리내에 vue파일을 만들면, 자동으로 router.js 파일내에 루트경로가 생성이 된다.

header.vue, card.vue, customs.vue, footer.vue 등의 파일을 생성하니 자동으로 루트경로가 만들어졌다.

component: _숫자 -> nuxt.js 내 router 관련 일련의 변수로 보여진다.(자동으로 생성)

 

router.js 파일

 

 

3. 링크연결과 view

링크로는 기존 vue에서 사용하던 router-link가 아닌, nuxt-link를 사용해준다.

nuxt-link 예시

 

 

router-view 역할을 대신하는 <Nuxt/>

 

그리고 router-view 역할은 layouts 내 default.vue안  <Nuxt/> 가 대신해줌을 알 수 있다.

 

-

일단, 이렇게 nuxt.js 프로젝트 시작 설정을 완료하고 vue와는 살짝 다른 구조 및 사용 명칭을 확인했다.

본인의 경우, nuxt3는 이전 버전만큼 안정화된 것 같지 않아 nuxt2와 vue2를 사용하였다. 버전에 따라 알맞게 모듈을 설치하고 사용해보도록 하자.