어쩌다보니 내가 메인은 아니지만..
운영중인 VUE 프로젝트를 볼 수 있었다.
근데.. VUE에 대하나 실무 경험은 없다보니 분석을 하다보니 눈에 띄는게 있었다.
NUXT!!
이게 뭘까 검색하다가 VUE와 같이 쓰는 프레임워크 라는 거고 이게 핵심이라는 것 같아서 한번 읽어봤다.
결론은 서버 없는 정적 생성 웹 어플리케이션 을 만들 수 있다는 것이고 NUXT에 대해서는 공식 문서의 내용을 가져와봤다.
What is Nuxt.js?
Nuxt.js는 일반적인 Vue.js 어플리케이션을 만드는 프레임워크 입니다.
주요 범위는 클라이언트/서버 배포를 추상화 하는 동안의 UI rendering 입니다.
우리의 목표는 Node.js 기반의 프로젝트 또는 기본 프로젝트 베이스로 사용할 수 있을 만큼 유연한 프레임워크를 만드는 것 입니다.
Nuxt.js는 Vue.js 애플리케이션 서버 렌더링을 보다 즐겁게 개발하는 데 필요한 모든 구성을 미리 설정합니다.
또한 우리는 nuxt generate 라고 부르는 배포 옵션을 제공하며, 이는 Vue.js 애플리케이션을 정적으로 생성 하는 옵션입니다. 이 옵션이 마이크로 서비스를 지향하는 웹 애플리케이션 개발의 다음 단계가 될 수 있다고 생각합니다.
Nuxt.js 프레임워크는 비동기 데이터, 미들웨어, 레이아웃 등과 같이 클라이언트 측과 서버 측 사이에서 개발하는데 도움되는 많은 기능을 제공합니다.
어떻게 동작합니까?
Nuxt.js는 훌륭한 웹 애플리케이션을 만들기 위해 아래의 기능들을 포함합니다:
- Vue 2
- Vue Router
- Vuex (store 옵션을 사용하는 경우에만 포함)
- Vue Server Renderer (mode: 'spa'를 사용하는 경우에는 제외)
- vue-meta
총 용량이 57kB min+gzip 밖에 되지 않습니다. (53kB Vuex 포함).
vue-loader와 babel-loader와 함께 Webpack을 사용해서 코드를 묶고, 분할하며, 압축합니다.
특징
- Vue 파일 쓰기 (*.vue)
- 코드 분할 자동화
- 서버 사이드 렌더링
- 비동기 데이터 기반의 강력한 라우팅 시스템
- 정적 파일 전송
- ES2015+ 지원
- JS & CSS 코드 번들링 및 압축
- <head> 요소 관리 (<title>, <meta>, 기타.)
- 개발 중 Hot module 대체
- 전 처리기 지원: SASS, LESS, Stylus 등
- HTTP/2 푸시 헤더 준비
- 모듈식 아키텍처 확장
구조
아래의 구조는 <nuxt-link>를 서버가 호출하거나 이를 통해 사용자가 이동한 경우, nuxt.js가 어떻게 동작하는지를 보여줍니다:
서버 렌더링 (범용 SSR)
프로젝트의 모든 UI렌더링을 처리하는 프레임워크로 Nuxt.js를 사용할 수 있습니다.
nuxt를 시작할때 자동으로 서버 렌더링 하도록 구성된 핫 리로드 및 Vue Server Renderer로 개발 서버를 시작합니다.
Single Page Applications (SPA)
어떤 이유로 든 서버 측 렌더링을 사용하지 않거나 애플리케이션에 정적 호스팅이 필요한 경우 nuxt --spa를 사용하여 SPA 모드를 간단하게 사용할 수 있습니다. generate 기능과 함께 Node.js 런타임이나 특수 서버 처리를 사용하지 않고도 강력한 SPA 배포 메커니즘을 제공합니다.
이에 대한 자세한 내용을 명령어에서 확인합니다.
이미 서버가있는 경우 Nuxt.js를 미들웨어로 사용하여 플러그 할 수 있습니다. Nuxt.js를 사용하여 Universal Web Applications을 개발할 때 아무런 제한이 없습니다
정적 생성 (사전 렌더링)
nuxt.js에서 가장 큰 혁신은 아마 nuxt generate 명령어 가 될 것입니다.
이는 애플리케이션을 빌드할 때 모든 라우트를 HTML로 생성하는 명령어 입니다.
예를 들어 다음과 같은 파일 구조가 있습니다:
-| pages/
----| about.vue
----| index.vue아래와 같이 생성됩니다:
-| dist/
----| about/
------| index.html
----| index.html
'개발 > FRONT' 카테고리의 다른 글
| Cookie and JavaScript (1) | 2024.01.03 |
|---|---|
| Json Array에서 공백 배열 찾기 (0) | 2024.01.03 |
| 아이폰(IOS)에서 new Date 포맷 오류 (0) | 2023.12.31 |
| VUE에 대해서 (0) | 2023.12.30 |
| java List 쪼개기 (0) | 2023.12.30 |
