docs: update wiki with new pages and content
- Removed `.claude/` from .gitignore - Updated index.md to reflect the addition of 7 new wiki pages, increasing total pages to 11 - Added detailed summaries for new pages including rendering modes, lifecycle, routing, data fetching, state management, auto imports, layers, performance, and runtime config - Created nuxt-runtime-config.md to document runtime configuration and environment variable handling - Updated log.md to include entries for newly created wiki pages
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1,4 +1,3 @@
|
||||
.DS_Store
|
||||
node_modules/
|
||||
.obsidian/
|
||||
.claude/
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Nuxt 개발 지식 위키 — 전체 목차
|
||||
|
||||
> **마지막 업데이트:** 2026-05-13
|
||||
> **총 페이지:** 4개 | **총 raw 자료:** 6개
|
||||
> **총 페이지:** 11개 | **총 raw 자료:** 6개
|
||||
|
||||
---
|
||||
|
||||
@@ -11,7 +11,13 @@ _Nuxt 라이프사이클, 렌더링 모드, 라우팅, 레이어 등 Nuxt의 근
|
||||
|
||||
| 페이지 | 요약 |
|
||||
|---|---|
|
||||
| _(아직 없음)_ | |
|
||||
| [[nuxt-rendering-modes]] | Universal SSR, CSR, Hybrid, Prerendering, Edge-Side Rendering 비교와 routeRules 설정 |
|
||||
| [[nuxt-lifecycle]] | 서버·클라이언트 라이프사이클 순서, 실행 환경 분기, 하이드레이션 주의사항 |
|
||||
| [[nuxt-routing]] | 파일 기반 라우팅, 동적 라우트, 미들웨어 3종류, validate, definePageMeta |
|
||||
| [[nuxt-data-fetching]] | $fetch·useFetch·useAsyncData 비교, lazy/server/watch/pick 옵션, 캐시 key 전략 |
|
||||
| [[nuxt-state-management]] | useState 패턴, callOnce 초기화, Pinia 통합, 공유 상태 composable |
|
||||
| [[nuxt-auto-imports]] | 자동 임포트 대상·제약·설정, 서드파티 패키지 임포트, 명시적 임포트 |
|
||||
| [[nuxt-layers]] | 레이어 설정·우선순위·오버라이드, DDD 모듈화, npm·GitHub 레이어 확장 |
|
||||
|
||||
---
|
||||
|
||||
@@ -54,7 +60,8 @@ _번들 최적화, 캐싱 전략, CI/CD, 호스팅 환경별 설정_
|
||||
|
||||
| 페이지 | 요약 |
|
||||
|---|---|
|
||||
| _(아직 없음)_ | |
|
||||
| [[nuxt-performance]] | Lazy 컴포넌트·Hydration, NuxtImage·Fonts·Scripts, 하이드레이션 오류 5가지 원인과 해결 |
|
||||
| [[nuxt-runtime-config]] | runtimeConfig 서버/public 분리, 환경 변수 오버라이드 규칙, TypeScript 타입 추가 |
|
||||
|
||||
---
|
||||
|
||||
|
||||
17
wiki/log.md
17
wiki/log.md
@@ -46,4 +46,21 @@ raw 자료 6개를 바탕으로 위키 페이지 4개 생성.
|
||||
|
||||
---
|
||||
|
||||
### 위키 페이지 생성 — Nuxt 공식 문서 정리
|
||||
`reference/` 공식 문서를 바탕으로 핵심 주제별 위키 페이지 7개 생성.
|
||||
|
||||
| 페이지 | 주요 reference 파일 |
|
||||
|---|---|
|
||||
| `nuxt-rendering-modes.md` | 3.guide/1.concepts/1.rendering, 1.getting-started/15.prerendering, 16.deployment |
|
||||
| `nuxt-lifecycle.md` | 3.guide/1.concepts/2.nuxt-lifecycle |
|
||||
| `nuxt-routing.md` | 1.getting-started/07.routing |
|
||||
| `nuxt-data-fetching.md` | 1.getting-started/10.data-fetching, 4.api/2.composables/use-fetch |
|
||||
| `nuxt-state-management.md` | 1.getting-started/11.state-management |
|
||||
| `nuxt-auto-imports.md` | 3.guide/1.concepts/3.auto-imports |
|
||||
| `nuxt-layers.md` | 1.getting-started/14.layers |
|
||||
| `nuxt-performance.md` | 3.guide/2.best-practices/performance, hydration |
|
||||
| `nuxt-runtime-config.md` | 3.guide/6.going-further/10.runtime-config |
|
||||
|
||||
---
|
||||
|
||||
_이후 자료를 넣을 때마다 아래에 추가됩니다._
|
||||
|
||||
159
wiki/nuxt-runtime-config.md
Normal file
159
wiki/nuxt-runtime-config.md
Normal file
@@ -0,0 +1,159 @@
|
||||
# Nuxt Runtime Config & 환경 변수
|
||||
|
||||
> **카테고리:** 성능 & 배포
|
||||
> **최종 수정:** 2026-05-13
|
||||
> **관련:** [[nuxt-lifecycle]], [[nuxt-layers]]
|
||||
|
||||
## 요약
|
||||
|
||||
`runtimeConfig`는 빌드 시 고정되지 않고 런타임에 환경 변수로 덮어쓸 수 있는 설정이다. `runtimeConfig.public`은 클라이언트에도 노출되고, 그 외는 서버 전용.
|
||||
|
||||
---
|
||||
|
||||
## 기본 설정
|
||||
|
||||
```typescript
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
// 서버 전용 (클라이언트 노출 안됨)
|
||||
apiSecret: '123',
|
||||
dbPassword: '',
|
||||
|
||||
// public: 서버·클라이언트 모두 접근 가능
|
||||
public: {
|
||||
apiBase: '/api',
|
||||
appVersion: '1.0.0',
|
||||
},
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 환경 변수로 오버라이드
|
||||
|
||||
### 네이밍 규칙
|
||||
|
||||
`NUXT_` 접두사 + 대문자 + `_`로 구분:
|
||||
|
||||
```ini
|
||||
# .env
|
||||
NUXT_API_SECRET=prod-secret-token
|
||||
NUXT_PUBLIC_API_BASE=https://api.example.com
|
||||
NUXT_DB_PASSWORD=secret123
|
||||
```
|
||||
|
||||
```typescript
|
||||
// 런타임에 자동으로 오버라이드됨
|
||||
runtimeConfig: {
|
||||
apiSecret: '', // → NUXT_API_SECRET
|
||||
dbPassword: '', // → NUXT_DB_PASSWORD
|
||||
public: {
|
||||
apiBase: '/api', // → NUXT_PUBLIC_API_BASE
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
> ⚠️ 주의: `.env` 파일은 개발·빌드·generate 시에만 읽힘. 프로덕션 서버 실행 시에는 **`.env` 미적용**. 환경 변수는 OS 또는 플랫폼에서 직접 설정해야 함.
|
||||
|
||||
---
|
||||
|
||||
## 접근 방법
|
||||
|
||||
### Vue 컴포넌트에서
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
// 클라이언트에서는 public만 접근 가능
|
||||
console.log(config.public.apiBase)
|
||||
|
||||
// 서버에서는 전체 접근 가능
|
||||
if (import.meta.server) {
|
||||
console.log(config.apiSecret)
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
> ⚠️ 주의: 서버 전용 키를 template에 렌더링하거나 `useState`에 저장하면 클라이언트에 노출됨.
|
||||
|
||||
### 플러그인에서
|
||||
|
||||
```typescript
|
||||
// app/plugins/api.ts
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const config = useRuntimeConfig()
|
||||
// config.public.apiBase 사용
|
||||
})
|
||||
```
|
||||
|
||||
### 서버 API 라우트에서
|
||||
|
||||
```typescript
|
||||
// server/api/data.ts
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { apiSecret } = useRuntimeConfig(event) // event 전달 권장
|
||||
const result = await $fetch('https://external-api.com/data', {
|
||||
headers: { Authorization: `Bearer ${apiSecret}` },
|
||||
})
|
||||
return result
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TypeScript 타입 추가
|
||||
|
||||
```typescript
|
||||
// index.d.ts
|
||||
declare module 'nuxt/schema' {
|
||||
interface RuntimeConfig {
|
||||
apiSecret: string
|
||||
dbPassword: string
|
||||
}
|
||||
interface PublicRuntimeConfig {
|
||||
apiBase: string
|
||||
appVersion: string
|
||||
}
|
||||
}
|
||||
export {}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 직렬화 주의사항
|
||||
|
||||
`runtimeConfig`는 Nitro로 전달 전 직렬화됨. 함수, Set, Map, 클래스 인스턴스는 설정하면 안 됨.
|
||||
|
||||
```typescript
|
||||
// ❌ 직렬화 불가
|
||||
runtimeConfig: {
|
||||
myFn: () => 'hello', // 함수 불가
|
||||
}
|
||||
|
||||
// ✅ 플러그인에서 처리
|
||||
// app/plugins/my-plugin.ts
|
||||
export default defineNuxtPlugin(() => {
|
||||
const myFn = () => 'hello'
|
||||
return { provide: { myFn } }
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## `public` vs 일반 설정 비교
|
||||
|
||||
| | `runtimeConfig` | `runtimeConfig.public` | `appConfig` |
|
||||
|---|---|---|---|
|
||||
| 노출 대상 | 서버 전용 | 서버·클라이언트 | 서버·클라이언트 |
|
||||
| 런타임 오버라이드 | ✅ (환경 변수) | ✅ (환경 변수) | ❌ |
|
||||
| 빌드 후 변경 | ✅ | ✅ | ❌ |
|
||||
| 용도 | API 키, 시크릿 | 공개 API URL, 앱 버전 | 테마, UI 설정 |
|
||||
|
||||
---
|
||||
|
||||
## 참고 / 출처
|
||||
|
||||
- `reference/3.guide/6.going-further/10.runtime-config.md`
|
||||
Reference in New Issue
Block a user