[Nuxt & Vue] Nuxt.js란?

현재 진행 중인 토이 프로젝트에 프론트를 구현하려고 한다.

쉬운 러닝커브로 유명하고 레퍼런스가 많은 Vue.js를 선택했고, 쉽게 개발할 수 있게 도와주는 Nuxt.js를 사용할 것이다.

사용하기전에 간단하게 Nuxt와 Vue가 뭔지 알아보았다.

 

Nuxt.js

- Nuxt.js는 Vue.js 개발을 보다 쉽게 개발할 수 있도록 도와주는 오픈소스 프레임워크

- Vue.js의 SSR (Server Side Rendering) 애플리케이션을 위한 프레임워크

- Vue.js의 설정들이 자동화 되어 초기 프로젝트 설정 비용을 감소할 수 있다.

 

Vue.js

- SPA (Single Page Application) 방식의 웹 애플리케이션을 구축하기 위한 프론트엔드 프레임워크

- MVVM 패턴의 ViewModel 레이어에 해당하는 화면 단 라이브러리

 

Vue.js 특징

- 가볍고 빠르다

- 쉬운 러닝 커브

- 높은 유연성

- 컴포넌트 기반 아키텍처

 

Composition API

- Vue3 부터 컴포지션 API가 추가되었고, 공식문서에서도 Composition API 사용을 권장한다.

- 함수 기반의 API로 컴포넌트 로직을 유연하게 구성할 수 있도록 하여 코드의 재사용성과 가독성을 높인다.

- 기존 Options API에서는 data, methods, computed에 각각 로직이 흩어져 있었지만, 컴포지션 API를 사용하면 로직이 모여진다.

 

Composable

- Vue 앱의 컨텍스트에서 Vue 컴포지션 API를 활용하여 상태 저장 로직을 캡슐화하고 재사용하는 함수이다.

- 여러 컴포넌트에서 동일한 로직을 재사용하기 위해 컴포저블 함수로 재구성 후 외부 파일로 추출 가능하다.