Vue.js와 함께 사용하는 Nuxt.js 프레임워크 소개

10 Nov 2023

javascript

Nuxt.js는 Vue.js 프레임워크를 기반으로 한 SSR(Server Side Rendering) 및 정적 웹 사이트 생성을 위한 프레임워크입니다. Vue.js의 생태계를 토대로 구축되어 개발자에게 보다 편리한 개발 경험을 제공합니다. 이번 글에서는 Nuxt.js의 주요 기능과 사용법에 대해 알아보겠습니다.

주요 기능

Server Side Rendering (SSR): Nuxt.js는 SSR을 지원하기 위해 Vue.js를 기반으로 한다는 특징이 있습니다. 이를 통해 검색 엔진 최적화(SEO) 및 초기 로딩 성능 향상을 이룰 수 있습니다.
정적 웹 사이트 생성: Nuxt.js는 정적 웹 사이트 생성을 지원하기 때문에 별도의 서버가 필요 없고, 정적 파일로 배포할 수 있습니다.
확장성: Nuxt.js는 Vue.js의 생태계를 그대로 이어받아 다양한 플러그인, 미들웨어, 확장 기능 등을 활용할 수 있습니다.

사용법

Nuxt.js 설치: Nuxt.js를 사용하기 위해서는 npm 또는 yarn을 통해 Nuxt.js를 설치해야 합니다. 아래의 명령어를 실행하여 설치할 수 있습니다.
```
$ npm install -g create-nuxt-app
# 또는
$ yarn create nuxt-app
```
프로젝트 생성: Nuxt.js를 사용하여 프로젝트를 생성하기 위해서는 create-nuxt-app 명령어를 사용합니다. 필요한 설정을 선택하고 프로젝트 정보를 입력해주면 자동으로 프로젝트 파일이 생성됩니다.
```
$ create-nuxt-app 프로젝트이름
```
디렉토리 구조: Nuxt.js 프로젝트의 디렉토리 구조는 다음과 같습니다.

.
├── assets
├── components
├── layouts
├── node_modules
├── pages
├── plugins
├── static
├── store
├── .nuxt
├── nuxt.config.js
├── package.json
└── README.md

라우터 설정: Nuxt.js는 pages 디렉토리 안에 있는 파일들을 기반으로 자동으로 라우터를 설정합니다. 파일 이름에 index.vue가 포함되어 있는 경우 해당 폴더의 index 페이지로 설정됩니다.
컴포넌트 생성: Vue.js의 컴포넌트 생성과 동일하게 components 디렉토리 안에 Vue 파일을 생성하여 컴포넌트를 작성할 수 있습니다.

API 호출: Nuxt.js에서 API 호출을 위해서는 asyncData 메서드를 사용합니다. 이 메서드는 서버에서 데이터를 미리 가져와서 렌더링할 때 사용하는 기능입니다. 아래는 API 호출 예시입니다.

export default {
  asyncData() {
 return axios.get('https://api.example.com/data')
   .then((response) => {
     return {
       data: response.data
     }
   })
   .catch((error) => {
     console.error(error)
   })
  }
}

Nuxt.js는 Vue.js와 함께 사용하기 위한 강력한 프레임워크입니다. Vue.js의 생태계를 활용하여 빠르고 편리한 웹 애플리케이션 개발을 할 수 있습니다. 자세한 내용은 공식 홈페이지를 참고해주세요.

#Vue.js #Nuxt.js