런타임 앱 컨텍스트는 넉스트 앱의 전체적인 동작원리에 대한 이해가 수반될수록 깊게 이해하게 되는 주제입니다. 전체적인 내용을 모두 다루기는 어려우니, 대표적인 내용을 정리하도록 하겠습니다.
NuxtApp
NuxtApp은 Nuxt 3에서 제공하는 런타임 애플리케이션 컨텍스트입니다. NuxtApp은 애플리케이션의 전역 상태와 기능에 접근할 수 있도록 도와주며 애플리케이션 전반에서 공통된 상태와 유틸리티, 플러그인 등을 관리하는 역할을 합니다.
NuxtApp으로 전역 상태 사용하기
아래와 같이 defineNuxtPlugin 함수를 사용해 상태를 정의할 수 있습니다.
export default defineNuxtPlugin (nuxtApp => {
nuxtApp.provide('myGlobal', () => 'Hello, Nuxt!')
})이렇게 주입된 상태는 아래와 같이 사용할 수 있습니다.
<template>
<div>{{ $myGlobal() }}</div>
</template>
<script setup>
const myGlobal = useNuxtApp().$myGlobal
</script>NuxtApp으로 훅을 사용하기
전역 상태와 마찬가지로 훅도 defineNuxtPlugin 함수를 이용해 정의 가능합니다.
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.hook('page:finish', () => {
console.log('페이지가 로드되었습니다!')
})
})이 훅은 Nuxt 페이지 탐색이 완료될 때 호출되며, 페이지가 로드된 후에 실행할 코드를 넣을 수 있습니다. page:finish 부분을 app:mounted 등으로 바꾸어가며 특정 상황에 실행될 함수를 만들 수 있습니다.
useNuxtApp
useNuxtApp 내장 composable 함수를 이용하면 런타임 앱 컨텍스트에 액세스할 수 있습니다.
app.vue에서 아래와 같이 코드를 작성하여
콘솔출력을 확인해 보면
위 캡처에서 볼 수 있듯이 굉장히 많은 데이터가 들어 있음을 볼 수 있습니다.
