Dev

Nuxt.js

Aiden(에이든) 2022. 3. 23. 16:11

 Nuxt.js는 웹 개발을 간단하고 강력하게 만드는 오픈 소스 프레임워크로 Vue.js 애플리케이션을 손쉽게 만들 수 있습니다. Vue.js, Node.js, Webpack 및 Babel.js를 기반으로 하는 무료 오픈 소스 JavaScript 라이브러리입니다. Nuxt는 React.js를 기반으로 하는 프레임워크인 Next.js에서 영감을 받아 진행된 프로젝트입니다.

 

NuxtJS

 공식 홈페이지는 https://nuxtjs.org/ 으로 한국어를 지원하지 않고, 영어, 프랑스어, 일본어만 지원합니다. 하지만 다양한 정보들이 있으니 한번 보시는 것을 추천합니다.

 

 

The Intuitive Vue Framework

Build your next Vue.js application with confidence using Nuxt. An open source framework making web development simple and powerful.

nuxtjs.org

 

 메뉴는 5개로 Discover, Learn, Explore, Community, Partners로 구성되어 있습니다.

 

Discover

 Nuxt로 구축된 다양한 웹사이트를 소개한 Showcases, Nuxt를 사용하여 제품을 구축한 회사들의 Nuxt를 도입하는 과정에서 겪었던 다양한 프로젝트들의 문제와 이점을 들어볼 수 있는 Case studies(사례연구), 전문가들이 이야기하는 Nuxt 장점을 소개한 Testimonials(사용후기)로 구성되어 있습니다.

 

Nuxt Showcases

 

Learn

 빠르게 웹사이트를 쉽게 생성할 수 있도록 도움을 주는 문서(Get started, Concepts, Features, Directory Structure, Configuraton Glossary, Internal Glossary, Components Glossary)들을 제공하는 Docs, Nuxt 이해하는데 도움을 주는 다양한 예제(Routing, Data Fetching, Assets Management, Transitions, Seo, Loading, Miscellaneous, Middlewares, Plugins, Modules)들이 있는 Examples, Nuxt 커뮤니티에서 만든 튜토리얼이 담긴 Tutorials, 유료 전문가 강의가 있는 Master courses가 있습니다.

 

Nuxt Examples

Explore

 여러가지 서비스(AWS, Azure Portal, Dokku, GitHub Pages, Google App Engine 등)에 Nuxt 애플리케이션을 배포하는 방법을 설명한 Deployments, Nuxt 프로젝트를 강화하기 위한 다양한 모듈(현재 197개)을 찾아볼 수 있는 Modules, 파트너가 구축한 유료 테마를 소개한 Themes, 무료 또는 유료 동영상 과정이 있는 Video Courses가 있습니다.

Nuxt Modules

 

Community

 Nuxt 팀의 최신 뉴스가 소개된 Announcements, Nuxt 팀 소개 페이지인 Teams, Nuxt 릴리스 정보 소개 페이지인 Release Notes, Nuxt를 후원하는 스폰서 소개 페이지인 Sponsors로 구성되어 있습니다.

 

Partners

 Nuxt의 웹 에이전시나 기술지원 파트너 업체들을 소개하는 페이지입니다.

 

 NuxtJS 버전 3.0이 개발자에 의해 발표된 내용으로

 프레임워크를 통해 사용자는 콘텐츠 또는 콘텐츠의 일부를 서버에서 완전히 사전 렌더링하고 정적 사이트 생성기 방식으로 제공할 수 있습니다. 이 접근 방식의 이점은 클라이언트 측 JavaScript가 실행되기 전에 각 페이지의 전체 콘텐츠가 웹 서버에서 제공되기 때문에 SPA에 비해 상호 작용 시간이 단축되고 SEO가 향상된다는 것입니다. 또는 기존의 서버 측 렌더링 HTML 페이지의 이점과 향상된 상호 작용 및 SPA의 고급 사용자 인터페이스를 모두 유지할 수 있습니다. 
 Nuxt.js 프레임워크 자체의 핵심 이점은 애플리케이션 개발자에게 이러한 애플리케이션의 구성 및 설정을 간소화하고 매끄럽게 만들어준다는 것입니다. 

참고자료

728x90

'Dev' 카테고리의 다른 글

[NextJS] Context and Helpers  (0) 2022.04.22
[NextJS] Views  (0) 2022.04.12
[NuxtJS] Directory Structure  (0) 2022.04.04
npm(Node Package Manager)  (0) 2022.03.21
Vue.js 시작하기 전에 준비  (0) 2021.05.12