Ch 01. 핵심 내용 총정리

긴 여정이었습니다. 처음에는 낯설었던 Nuxt의 파일 기반 라우팅, useFetch, Nitro 서버가 이제는 자연스럽게 손에 익었기를 바랍니다. 각 파트에서 무엇을 배웠는지 한 번 더 짚어봅니다.

PART별 핵심 포인트

자주 쓰는 Nuxt 패턴 모음

실제로 개발하다 보면 반복적으로 마주치는 패턴들이 있습니다. 막힐 때 이 목록을 참고합니다.

SSR에서 브라우저 API 사용. window, document, localStorage는 서버에서 실행되지 않습니다. 브라우저 전용 코드는 <ClientOnly> 컴포넌트로 감싸거나 onMounted 훅 안에서 호출합니다.

<ClientOnly>
  <BrowserOnlyComponent />
</ClientOnly>

전역 상태 관리. 여러 컴포넌트에서 공유해야 하는 상태는 Pinia store를 만들고, 컴포넌트에서는 storeToRefs로 반응형을 유지하며 꺼냅니다.

const store = usePostStore()const { posts, loading } = storeToRefs(store)

서버 에러 처리. Nitro API 라우트에서 에러를 던질 때는 createError를 사용합니다. 클라이언트에 상태 코드와 메시지가 정확하게 전달됩니다.

throw createError({ statusCode: 404, statusMessage: '게시글을 찾을 수 없습니다.' })

환경변수 접근. 서버 전용 값은 runtimeConfig의 루트에, 클라이언트에도 노출할 값은 public 안에 넣습니다. 운영 환경에서는 NUXT_ 접두사를 붙인 환경변수로 덮어씁니다.

const config = useRuntimeConfig()const secret = config.jwtSecret        // 서버 전용const appName = config.public.appName  // 서버 + 클라이언트

데이터 가져오기. 페이지 컴포넌트에서는 useFetch나 useAsyncData로 SSR 친화적으로 데이터를 불러옵니다. 컴포넌트 내부 이벤트 핸들러에서는 $fetch를 사용합니다.