Nuxt 공식 홈페이지 에서 보면 Nuxt 는 상용 서비스가 가능한 풀스택 프레임워크라고 소개되어 있다. 통상 API 서버가 Java Spring 으로 구성되고, Nuxt 혹은 Nextjs 는 프런트만 담당하는 경우가 흔하다. 이는 기존에 Vue, React 등이 프런트만 담당하고, Nuxt, Next 와 같은 메타 프레임워크는 나중에 출시되어서 이기도 하고, 이미 잘 구축되어 있는 레거시를 바꿀 필요가 없기에 관심이 덜 가기 때문이기도하다. Nuxt 는 풀스택 프레임워크이기 때문에 JAVA 같은 다른 기술이나, Spring, NestJS 같은 다른 프렘임워크를 이용하지 않고도, 처음 구축하는 어플리케이션이면서 단일 기술로 풀스택을 구축하고 싶은 경우 좋은 선택지가 될 수 있을 것이다. API 서버를 구..

데이터 통신과 관련한 거의 모든 내용은 "Nuxt-개요 > 데이터 가져오기" 에 담겨있다. 이번 장에서 간단하게 실습한 후 위 내용을 참고하면 이해에 더 도움이 될 것이다. useFetch 컴포저블을 사용하는 것이 적절하지 않은 경우가 있다 (예: CMS 또는 자체적으로 API 통신 레이어를 제공해야 하는 경우). 이 경우 useAsyncData 를 사용하여 호출을 래핑하면서도 컴포저블에서 제공하는 이점을 계속 유지할 수 있다. 앞 장에서 useFetch 컴포저블을 이용한 todos 의 예를 useAsyncData 로 바꿔보자. 데이터를 캐싱하는데 필요한 문자열 키가 필요하다. 키가 주어지지 않으면 파일명과 해당 소스라인으로 자동으로 구성된 키가 할당된다. /pages/todos.vue ID Title ..

데이터 통신과 관련한 거의 모든 내용은 "Nuxt-개요 > 데이터 가져오기" 에 담겨있다. 이번 장에서 간단하게 실습한 후 위 내용을 참고하면 이해에 더 도움이 될 것이다. useFetch 컴포저블은 SSR 을 지원하는 컴포넌트이다. 서버 측, 클라어언트 측 모두에서 사용할 수 있으며, Nuxt 에서 제공하는 내장 컴포저블이다. 이를 통하면 개발자의 개입없이 네트워크 중복 호출을 피할 수 있다. 데이터 호출과 관련해서 Nuxt 에서 제공하는 컴포저블 및 함수에는, useFetch 이외에도 useLazyFetch, useAsyncData, useLazyAsyncData, $fetcch 가 있다. useFetch 컴포저블은 setup 함수에서 데이터를 가져올 때 사용할 수 있는 가장 간단한 방법이다. 간단한..

Vue 2.x 버전을 썼던 사용자라면 Vuex 상태관리 라이브러리를 알 것이다. Nuxt 에서 SSR이 제공되고 Vue 3 에서는 Composite API 가 사용되면서 새로운 라이브러리로 대체되었다. 복잡한 어플리케이션을 작성하다보면 컴포넌트 혹은 페이지간 동일한 상태(값)에 대한 접근이 필요할 때가 있다. Nuxt 는 useState 라는 SSR 친화적인 상태관리 컴포저블을 제공하고 있다. 자세한 내용은 Nuxt-개요 > 11. 상태관리 를 참고하자. 전역 상태 정의하기 useState 는 상태 참조를 키 값을 통해서 한다. 여기서는 userState 를 이용해 사용자 정의 상태관리자를 생성한다. 프로젝트 루트에서 /composable/states.ts 파일을 생성하고 아래와 같이 코딩한다. /com..

Nuxt 는 경로가 바뀔 때 수행되는 미들웨어를 제공한다. 글로벌 미들웨어는 middleware/ 디렉터리에 .global 접미사를 가진 소스파일로 정의하고 인라인 미들웨어는 각 페이지 내 definePageMeta 유틸 함수로 정의한다. 자세한 내용은 Nuxt-Directory > middleware 을 참고한다. 도메인에 공통적으로 처리할 수 있는 미들웨어는 인증/인가 부분에서 라우팅 경로를 리다이렉션 해주는 경우를 생각해 볼 수 있다. 예를 들어 로그인 후 정해진 랜딩페이지로 리다이렉션 하거나, 로그아웃 전에 상태값을 지우거나, 자원을 초기화 하는 작업 등의 예가 있을 수 있다. 사용자 정의 미들웨어 생성 프로젝트 루트에 middleware/ 디렉토리를 생성한다. 해당 디렉토리에 auth.globa..

Nuxt 는 Nuxt 혹은 Vue 앱이 생성될때 앱을 확장할 수 있는 플러그인 시스템을 갖추고 있다. Nuxt 는 /pages, /components, /layouts 및 /composables 디렉터리를 자동으로 임포트 하는 것처럼 자동으로 /plugins 디렉터리를 자동으로 등록한다. 서버에서 쓰일 때는 .server, 클라이언트에서 쓰일때는 .client 접미사를 쓰면 된다. plugins/ 하위 디렉터리를 이용할 때는 nuxt.config.ts 에 plugins 속성에 해당 디렉터리 명을 배열로 등록한다. 자세한 내용은 이 곳을 참고하면 된다. 사용자 플러그인 작성 먼저 프로젝트 루트에서 /plugins 디렉토리를 생성한다. 해당 디렉토리에 myPlugin.ts 파일을 생성한다. plugin 선언..