Nuxt 앱은 Node.js 서버, 사전 렌더링된 스태틱 호스팅, 혹은 서버리스 또는 엣지(CDN) 환경에 배포될 수 있다. 참고) 호스트 제공자들 Node.js 서버 모든 Node 호스팅에 배포할 수 있도록 Nitro가 포함된 Node.js 서버는... 아무것도 지정되지 않거나 자동 감지되는 경우 기본 출력 형식 최적의 콜드 스타트 타이밍에 대한 요청을 렌더링하는데 필요한 청크만 로드한다. 모든 Node.js 호스팅에 Nuxt 앱을 배포하는 데 유용. 진입 지점 노드 서버 사전 설정을 사용 하여 실행하면 nuxt build 결과는 즉시 실행 가능한 노드 서버를 시작하는 진입점이 된다. 터미널) node .output/server/index.mjs 위 명령은 3000번 포트를 기본으로 Nuxt 서버를 기..

Nuxt 3의 핵심 기능 중 하나는 레이어와 확장 지원이다. 기본 Nuxt 애플리케이션을 확장하여 구성 요소, 유틸리티 및 구성을 재사용할 수 있다. 레이어 구조는 표준 Nuxt 애플리케이션과 거의 동일하므로 작성 및 유지 관리가 쉽다. 사용 사례 nuxt.config 및 app.config 를 사용하여 프로젝트 전체에서 재사용 가능한 구성 사전 설정을 공유한다. components/ 디렉터리를 사용하여 컴포넌트 라이브러리 만들기 composables/ 및 utils/ 디렉터리를 사용하여 유틸리티 및 구성 가능한 라이브러리 만들기 Nuxt 모듈 사전 생성 프로젝트 전체에서 표준 설정 공유 Nuxt 테마 만들기 용법 nuxt.config.ts 파일에 확장 속성을 추가하여 레이어를 확장할 수 있다. // n..

Nuxt의 서버는 Nitro 입니다. 원래는 Nuxt용으로 만들어졌지만 이제는 UnJS 의 일부 이며 다른 프레임워크에도 개방되어 있으며 자체적으로도 사용할 수 있다. Nuxt 에 포함된 Nitro 의 능력은 다음과 같다: 앱의 서버 측 부분을 완전히 제어한다. 모든 공급자에 대한 범용 배포(많은 zero config) 하이브리드 렌더링 Nitro는 내부적으로 고성능과 이식성을 위해 구축된 최소 H(TTP) 프레임워크인 h3 을 사용하고 있다 . 서버 엔드포인트 및 미들웨어 API 엔드포인트에서 미들웨어까지 Nuxt 앱의 서버 전용 부분을 쉽게 관리할 수 있다. 엔드포인트와 미들웨어는 모두 다음과 같이 정의할 수 있다. server/api/test.ts export default defineEventHa..

Nuxt 3는 풀 스택 프레임워크이다. 즉, 다양한 상황에서 발생할 수 있는 예방할 수 없는 사용자 런타임 오류의 원인이 여러 가지 있다는 의미다. Vue 렌더링 수명 주기 중 오류(SSR 및 CSR) Nitro 서버 수명 주기 중 오류(server/ 디렉토리) 서버 및 클라이언트 시작 오류(SSR + CSR) JS 청크 다운로드 중 오류 발생 Vue 렌더링 수명주기 onErrorCaptured 를 사용하여 Vue 오류를 연결할 수 있다 . 또한 Nuxt는 오류가 최상위 수준까지 전파되는 경우 호출되는 후크 vue:error 를 제공한다. 오류 보고 프레임워크를 사용하는 경우, vueApp.config.errorHandler 를 통해 전역 처리기를 제공할 수 있다 . 처리되더라도 모든 Vue 오류를 수신..

Nuxt는 구성 요소 전체에 반응적이고 SSR 친화적인 공유 상태를 생성할 수 있는 useState 컴포저블을 제공한다. useState 는 SSR 친화적인 ref 대체품이다. 해당 값은 서버 측 렌더링 후(클라이언트 측 하이드레이션 중) 유지되며 고유 키를 사용하여 모든 구성 요소에서 공유된다. useState 내부 데이터는 JSON으로 직렬화되기 때문에 클래스, 함수, 심볼 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다. 베스트 프랙티스 const state = ref() 를 Counter: {{ counter }} + - 참고) 라이브 참조 Docs > Examples > Features > State Management 고급 사용법 이 예에서는 HTTP 요청 헤더에서 사용자의 기본 ..

Nuxt에는 브라우저 또는 서버 환경에서 데이터 가져오기를 수행하기 위한 두 개의 컴포저블 useFetch, useAsyncData 와 내장 라이브러리 $fetch 가 함께 제공된다. 간단히 말해서: useFetch 는 컴포저블은 컴포넌트에 셋업 함수에서 데이터 가져오는 가장 간단한 방법이다. $fetch 는 사용자 상호 작용을 기반으로 네트워크 요청을 할때 좋다. useAsyncData 와 $fetch 를 결합하면 더욱 세밀한 제어가 가능하다. 두 가지 useFetch, useAsyncData 모두 마지막 섹션에서 공통 옵션 및 패턴 세트와 함께 자세히 설명하겠다. 그 전에 먼저 이러한 컴포저블이 존재하는 이유를 아는 것이 중요하다. 특정 컴포저블을 사용하는 이유는 무엇일까? 클라이언트와 서버 환경 모..