Nuxt.js 3 알아보기

Nuxt.js 3

 

Nuxt.js 란

Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 웹 애플리케이션을 빠르고 간편하게 개발할 수 있도록 도와주는 도구다. 다음은 Nuxt.js의 주요 특징과 사용 이유에 대해 더 자세히 알아보자.

---

특징

1. Universal Application
   • Nuxt.js는 서버 사이드 렌더링(SSR)을 지원하여 초기 로딩 속도와 검색 엔진 최적화(SEO)를 개선할 수 있습니다. SSR을 통해 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.
2. 자동 라우팅
   • 'pages' 디렉토리 내의 파일을 기반으로 자동으로 라우팅을 설정하여 페이지 이동을 간편하게 관리할 수 있습니다. 이를 통해 라우팅 설정에 대한 복잡함을 줄일 수 있습니다.
3. 데이터 사전 로드
   • 'asyncData' 메서드를 활용하여 페이지 렌더링 시에 필요한 데이터를 사전에 가져와 초기 렌더링 성능을 개선할 수 있습니다.
4. 레이아웃 및 페이지 별 설정
   • 'layouts' 디렉토리를 통해 애플리케이션의 전체 레이아웃을 관리하고, 각 페이지마다 다른 설정을 쉽게 적용할 수 있습니다.
5. 플러그인 시스템
   • 다양한 플러그인을 활용하여 필요한 기능을 손쉽게 추가하고 애플리케이션을 확장할 수 있습니다.
6. 정적 사이트 생성
   • Nuxt.js는 애플리케이션을 정적 파일로 빌드하여 배포할 수 있습니다. 이를 통해 웹 사이트의 로딩 속도를 향상시킬 수 있습니다.

사용 이유

Nuxt.js를 사용하는 이유는 다음과 같습니다:

• Vue.js의 강력한 기능과 SSR과 같은 유용한 기능을 결합하여 웹 애플리케이션의 성능과 검색 엔진 최적화를 개선할 수 있습니다.
• 페이지 구조, 라우팅, 데이터 미리 로딩 등을 자동화하여 개발자의 작업 부담을 줄여줍니다.

더 많은 정보와 실제 사용 사례는 공식 문서에서 확인하실 수 있습니다.

---

Nuxt.js 3 에 대해

작년 11월 Nuxt 3 stable 버전이 출시되었다
Vue 3.X 를 지원한다고 한다
내용을 한번 보자

참고

Announcing 3.0 · Nuxt

Nuxt.js 3에 관해서

Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 웹 애플리케이션을 더 쉽고 빠르게 개발할 수 있도록 도와주는 도구입니다. Nuxt.js 3는 이전 버전인 Nuxt.js 2의 업그레이드된 버전으로, 다양한 개선과 새로운 기능을 제공합니다.

---

주요 특징과 변경 사항

1. SSR(서버 사이드 렌더링)과 SEO(검색 엔진 최적화) 개선: Nuxt 3는 초기 로딩 속도와 SEO를 개선하기 위해 SSR을 지원합니다. 이로써 웹 애플리케이션의 사용자 경험과 검색 엔진에서의 가시성이 향상됩니다.
2. 자동 라우팅: 'pages' 디렉토리 내의 파일을 기반으로 자동으로 라우팅을 설정해주어 페이지 이동을 관리하기가 더 간편해집니다. 이로써 라우팅 설정에 대한 복잡함을 줄일 수 있습니다.
   
   
3. 데이터 사전 로드: 'asyncData' 메서드를 통해 페이지 렌더링 시 필요한 데이터를 사전에 가져올 수 있어 초기 렌더링 성능을 개선할 수 있습니다.
   
   
4. 레이아웃과 페이지 설정 관리: 'layouts' 디렉토리를 통해 전체 애플리케이션의 레이아웃을 관리하고, 각 페이지별로 다른 설정을 적용할 수 있습니다.
   
   
5. 플러그인 시스템: 다양한 플러그인을 활용하여 애플리케이션에 필요한 기능을 쉽게 추가하고 확장할 수 있습니다.
   
   
6. 정적 사이트 생성: Nuxt 3는 애플리케이션을 정적 파일로 빌드하여 웹 사이트의 로딩 속도를 개선할 수 있습니다.
   
   
7. 브라우저 및 Node.js 지원: 최신 브라우저를 공식적으로 지원하며, Node.js 14, 16, 18, 19를 지원합니다.

---

프로젝트 생성

 

 1. Node.js 설치: 우선 Node.js와 npm을 알아서 설치하자.

 2. Nuxt CLI설치: Nuxt.js 프로젝트를 생성하려면 Nuxt CLI를 설치해야한다.

npm install -g create-nuxt

 3. 새 프로젝트 생성: 원하는 디렉토리로 이동한 후, 프로젝트를 생성하자.

npx create-nuxt-app my-nuxt3-project

바라는게 많지만 대충 넘어가자

 

프로젝트 구조

?!  App.vue 어디갔어

 

다른 커맨드로 프로젝트 생성해보자

npx nuxi init nuxt3-study

별로 바라는게 없다.

익숙한 구조다
Nuxt 공부하러 가자