[{"data":1,"prerenderedAt":1422},["ShallowReactive",2],{"nav-global-ko":3,"doc-/develop/frameworks/nuxt/nuxt3-intro-guide":271,"nav-ko":1338,"surround-/develop/frameworks/nuxt/nuxt3-intro-guide":1419},[4,20,34,132,163,252],{"title":5,"path":6,"stem":7,"children":8,"page":19},"Plan","/plan","1.plan",[9,14],{"title":10,"path":11,"stem":12,"icon":13},"Planning","/plan/_dir","1.plan/_dir","i-heroicons-clipboard-document-list",{"title":15,"path":16,"stem":17,"icon":18},"프로젝트 로드맵 작성 가이드","/plan/project-roadmap","1.plan/project-roadmap","i-heroicons-map",false,{"title":21,"path":22,"stem":23,"children":24,"page":19},"Design","/design","2.design",[25,30],{"title":26,"path":27,"stem":28,"icon":29},"디자인 시스템 구축 가이드","/design/design-system-guide","2.design/1.design-system-guide","i-heroicons-book-open",{"title":21,"path":31,"stem":32,"icon":33},"/design/_dir","2.design/_dir","i-vscode-icons-file-type-design",{"title":35,"path":36,"stem":37,"children":38,"page":19},"Develop","/develop","3.develop",[39,53,74,128],{"title":40,"path":41,"stem":42,"children":43,"page":19},"Markdown","/develop/markdown","3.develop/0.markdown",[44,50],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},"MarkDown","/develop/markdown/_dir","3.develop/0.markdown/_dir","/develop/markdown/markdown","i-vscode-icons-file-type-markdown",{"title":51,"path":48,"stem":52,"icon":49},"Markdown 필수 문법 완전 정복","3.develop/0.markdown/markdown",{"title":54,"path":55,"stem":56,"children":57,"page":19},"Html","/develop/html","3.develop/1.html",[58,71],{"title":59,"path":60,"stem":61,"children":62,"page":19},"References","/develop/html/references","3.develop/1.html/1.references",[63,67],{"title":59,"path":64,"stem":65,"icon":66},"/develop/html/references/_dir","3.develop/1.html/1.references/_dir","i-vscode-icons-file-type-html",{"title":68,"path":69,"stem":70,"icon":66},"HTML이란?","/develop/html/references/html","3.develop/1.html/1.references/html",{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},"/develop/html/_dir","3.develop/1.html/_dir",{"title":75,"path":76,"stem":77,"children":78,"page":19},"Frameworks","/develop/frameworks","3.develop/2.frameworks",[79,88,101,114,124],{"title":80,"path":81,"stem":82,"children":83,"page":19},"Vue","/develop/frameworks/vue","3.develop/2.frameworks/1.vue",[84],{"title":80,"path":85,"stem":86,"icon":87},"/develop/frameworks/vue/_dir","3.develop/2.frameworks/1.vue/_dir","i-logos-vue",{"title":89,"path":90,"stem":91,"children":92,"page":19},"React","/develop/frameworks/react","3.develop/2.frameworks/2.react",[93,97],{"title":89,"path":94,"stem":95,"icon":96},"/develop/frameworks/react/_dir","3.develop/2.frameworks/2.react/_dir","i-logos-react",{"title":98,"path":99,"stem":100,"icon":96},"React 애플리케이션 성능 최적화 기법","/develop/frameworks/react/react-performance-optimization","3.develop/2.frameworks/2.react/react-performance-optimization",{"title":102,"path":103,"stem":104,"children":105,"page":19},"Nuxt","/develop/frameworks/nuxt","3.develop/2.frameworks/3.nuxt",[106,110],{"title":102,"path":107,"stem":108,"icon":109},"/develop/frameworks/nuxt/_dir","3.develop/2.frameworks/3.nuxt/_dir","i-logos-nuxt-icon",{"title":111,"path":112,"stem":113,"icon":87},"Nuxt 3 시작하기 가이드","/develop/frameworks/nuxt/nuxt3-intro-guide","3.develop/2.frameworks/3.nuxt/nuxt3-intro-guide",{"title":115,"path":116,"stem":117,"children":118,"page":19},"Next","/develop/frameworks/next","3.develop/2.frameworks/4.next",[119],{"title":120,"path":121,"stem":122,"icon":123},"Next.js","/develop/frameworks/next/_dir","3.develop/2.frameworks/4.next/_dir","i-logos-nextjs-icon",{"title":75,"path":125,"stem":126,"icon":127},"/develop/frameworks/_dir","3.develop/2.frameworks/_dir","i-heroicons-code-bracket-square",{"title":129,"path":130,"stem":131,"icon":127},"Development","/develop/_dir","3.develop/_dir",{"title":133,"path":134,"stem":135,"children":136,"page":19},"Devops","/devops","4.devops",[137,159],{"title":138,"path":139,"stem":140,"children":141,"icon":143},"Operation System 설정","/devops/os","4.devops/1.os/index",[142,144,154],{"title":138,"path":139,"stem":140,"icon":143},"i-heroicons-cog-8-tooth",{"title":145,"path":146,"stem":147,"children":148,"page":19},"Linux","/devops/os/linux","4.devops/1.os/1.linux",[149],{"title":150,"path":151,"stem":152,"icon":153},"운영 체제 비교 - 윈도우, 리눅스, 맥OS","/devops/os/linux/windows_linux_macos","4.devops/1.os/1.linux/windows_linux_macOS","i-logos-linux-tux",{"title":155,"path":156,"stem":157,"icon":158},"OS","/devops/os/_dir","4.devops/1.os/_dir","i-vscode-icons-folder-type-tools",{"title":160,"path":161,"stem":162,"icon":158},"Env","/devops/_dir","4.devops/_dir",{"title":164,"path":165,"stem":166,"children":167,"page":19},"Ai","/ai","5.ai",[168,192,247],{"title":169,"path":170,"stem":171,"children":172,"page":19},"Prompt","/ai/prompt","5.ai/3.prompt",[173],{"title":174,"path":175,"stem":176,"children":177,"page":19},"Claude","/ai/prompt/claude","5.ai/3.prompt/1.claude",[178],{"title":179,"path":180,"stem":181,"children":182,"page":19},"Claude Code","/ai/prompt/claude/claude-code","5.ai/3.prompt/1.claude/claude-code",[183,187],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},"/ai/prompt/claude/claude-code/_dir","5.ai/3.prompt/1.claude/claude-code/_dir","i-logos-anthropic-icon",{"title":188,"path":189,"stem":190,"icon":191},"Claude Code MCP 서버 자동 실행 설정","/ai/prompt/claude/claude-code/mcp-server-autostart-configuration","5.ai/3.prompt/1.claude/claude-code/mcp-server-autostart-configuration","i-heroicons-server",{"title":193,"path":194,"stem":195,"children":196,"page":19},"Personas","/ai/personas","5.ai/4.personas",[197,202,206,210,214,218,222,226,230,234,238,242],{"title":198,"path":199,"stem":200,"icon":201},"🏗️ System Architect 페르소나","/ai/personas/01-system-architect","5.ai/4.personas/01-system-architect","i-heroicons-cpu-chip",{"title":203,"path":204,"stem":205},"🎨 ui-accessibility-expert persona","/ai/personas/02-ui-accessibility-expert","5.ai/4.personas/02-ui-accessibility-expert",{"title":207,"path":208,"stem":209},"⚙️ Backend API Infrastructure Specialist Persona","/ai/personas/03-backend-api-infrastructure","5.ai/4.personas/03-backend-api-infrastructure",{"title":211,"path":212,"stem":213},"🛡️ Security Threat Modeling Expert System Prompt","/ai/personas/04-security-threat-modeling-expert","5.ai/4.personas/04-security-threat-modeling-expert",{"title":215,"path":216,"stem":217},"⚡ Performance-Optimizer AI Assist Prompt","/ai/personas/05-performance-optimizer","5.ai/4.personas/05-performance-optimizer",{"title":219,"path":220,"stem":221},"🔍 Root Cause Analyzer AI Persona Prompt","/ai/personas/11-root-cause-analyzer","5.ai/4.personas/11-root-cause-analyzer",{"title":223,"path":224,"stem":225},"🧪 QA Testing Expert AI Assistant Prompt","/ai/personas/12-quality-assurance-testing-expert","5.ai/4.personas/12-quality-assurance-testing-expert",{"title":227,"path":228,"stem":229},"🔄 Code Refactoring Specialist AI Assistant Prompt","/ai/personas/13-code-refactoring-specialist","5.ai/4.personas/13-code-refactoring-specialist",{"title":231,"path":232,"stem":233},"🚀 DevOps Infrastructure Expert AI Assistant Prompt","/ai/personas/14-infra-automation-expert","5.ai/4.personas/14-infra-automation-expert",{"title":235,"path":236,"stem":237},"👨‍🏫 Educational-Guidance-Mentor Persona System Prompt","/ai/personas/21-educational-guidance-mentor","5.ai/4.personas/21-educational-guidance-mentor",{"title":239,"path":240,"stem":241},"✍️ Documentation Expert AI Assistant Prompt","/ai/personas/22-technical-documentation-expert","5.ai/4.personas/22-technical-documentation-expert",{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},"AI Personas","/ai/personas/_dir","5.ai/4.personas/_dir","i-heroicons-users",{"title":248,"path":249,"stem":250,"icon":251},"AI","/ai/_dir","5.ai/_dir","i-heroicons-sparkles",{"title":253,"path":254,"stem":255,"children":256,"page":19},"Blog","/blog","6.blog",[257,267],{"title":258,"path":259,"stem":260,"children":261,"page":19},"2024","/blog/2024","6.blog/2024",[262],{"title":263,"path":264,"stem":265,"icon":266},"기록의 중요성","/blog/2024/2024-02-15-blog","6.blog/2024/2024-02-15-blog","i-heroicons-pencil-square",{"title":253,"path":268,"stem":269,"icon":270},"/blog/_dir","6.blog/_dir","i-heroicons-newspaper",{"id":272,"title":111,"authors":273,"body":274,"description":1329,"draft":19,"extension":1330,"head":273,"icon":273,"image":1331,"meta":1332,"navigation":1334,"path":112,"publishedAt":273,"seo":1335,"stem":113,"tags":273,"updatedAt":1336,"__hash__":1337},"docs_ko/3.develop/2.frameworks/3.nuxt/nuxt3-intro-guide.md",null,{"type":275,"value":276,"toc":1312},"minimark",[277,281,286,338,342,346,353,410,414,417,425,429,433,439,520,524,530,536,539,707,710,713,938,941,997,1001,1004,1186,1190,1196,1297,1301,1305,1308],[278,279,280],"p",{},"Nuxt 3는 Vue 3를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트 사이드 네비게이션과 같은 기능을 제공합니다. 이 가이드에서는 Nuxt 3의 기본 개념과 프로젝트 설정 방법을 알아봅니다.",[282,283,285],"h2",{"id":284},"nuxt-3의-주요-특징","Nuxt 3의 주요 특징",[287,288,289,297,303,309,320,326,332],"ul",{},[290,291,292,296],"li",{},[293,294,295],"strong",{},"Vue 3 지원",": Composition API와 같은 Vue 3의 모든 기능 활용",[290,298,299,302],{},[293,300,301],{},"하이브리드 렌더링",": SSR, SSG, CSR을 상황에 맞게 유연하게 사용",[290,304,305,308],{},[293,306,307],{},"자동 가져오기",": 컴포넌트, 컴포지션 API, 헬퍼 함수 자동 임포트",[290,310,311,314,315,319],{},[293,312,313],{},"파일 기반 라우팅",": ",[316,317,318],"code",{},"pages/"," 디렉토리 구조를 기반으로 한 자동 라우팅",[290,321,322,325],{},[293,323,324],{},"서버 API",": Nitro 엔진 기반의 서버 API 엔드포인트 생성",[290,327,328,331],{},[293,329,330],{},"모듈 시스템",": 재사용 가능한 모듈로 기능 확장",[290,333,334,337],{},[293,335,336],{},"TypeScript 지원",": 기본 TypeScript 지원",[282,339,341],{"id":340},"프로젝트-설정","프로젝트 설정",[343,344,345],"h3",{"id":345},"설치",[278,347,348,349,352],{},"Nuxt 3 프로젝트를 시작하는 가장 쉬운 방법은 ",[316,350,351],{},"nuxi"," CLI를 사용하는 것입니다:",[354,355,360],"pre",{"className":356,"code":357,"language":358,"meta":359,"style":359},"language-bash shiki shiki-themes github-light github-dark","npx nuxi init my-nuxt-app\ncd my-nuxt-app\nnpm install\nnpm run dev\n","bash","",[316,361,362,381,390,399],{"__ignoreMap":359},[363,364,367,371,375,378],"span",{"class":365,"line":366},"line",1,[363,368,370],{"class":369},"sScJk","npx",[363,372,374],{"class":373},"sZZnC"," nuxi",[363,376,377],{"class":373}," init",[363,379,380],{"class":373}," my-nuxt-app\n",[363,382,384,388],{"class":365,"line":383},2,[363,385,387],{"class":386},"sj4cs","cd",[363,389,380],{"class":373},[363,391,393,396],{"class":365,"line":392},3,[363,394,395],{"class":369},"npm",[363,397,398],{"class":373}," install\n",[363,400,402,404,407],{"class":365,"line":401},4,[363,403,395],{"class":369},[363,405,406],{"class":373}," run",[363,408,409],{"class":373}," dev\n",[343,411,413],{"id":412},"프로젝트-구조","프로젝트 구조",[278,415,416],{},"기본적인 Nuxt 3 프로젝트 구조는 다음과 같습니다:",[354,418,423],{"className":419,"code":421,"language":422},[420],"language-text","my-nuxt-app/\n├── .nuxt/                # 빌드된 파일 (자동 생성)\n├── app.vue               # 앱의 진입점\n├── assets/               # 전역 자산 (이미지, 폰트 등)\n├── components/           # Vue 컴포넌트\n├── composables/          # 컴포지션 함수\n├── content/              # 콘텐츠 (Nuxt Content 모듈 사용 시)\n├── layouts/              # 레이아웃 컴포넌트\n├── middleware/           # 라우트 미들웨어\n├── pages/                # 라우트를 생성하는 페이지\n├── plugins/              # Vue 플러그인\n├── public/               # 정적 파일\n├── server/               # 서버 API 엔드포인트 및 미들웨어\n├── .gitignore            # Git 무시 파일\n├── app.config.ts         # 앱 런타임 구성\n├── nuxt.config.ts        # Nuxt 구성 파일\n├── package.json          # 프로젝트 의존성 및 스크립트\n└── tsconfig.json         # TypeScript 구성\n","text",[316,424,421],{"__ignoreMap":359},[282,426,428],{"id":427},"기본-개념","기본 개념",[343,430,432],{"id":431},"앱-진입점-appvue","앱 진입점 (app.vue)",[278,434,435,438],{},[316,436,437],{},"app.vue","는 애플리케이션의 진입점입니다. 기본 레이아웃과 페이지를 렌더링하는 역할을 합니다:",[354,440,444],{"className":441,"code":442,"language":443,"meta":359,"style":359},"language-vue shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLayout>\n      \u003CNuxtPage />\n    \u003C/NuxtLayout>\n  \u003C/div>\n\u003C/template>\n","vue",[316,445,446,459,469,479,490,500,510],{"__ignoreMap":359},[363,447,448,452,456],{"class":365,"line":366},[363,449,451],{"class":450},"sVt8B","\u003C",[363,453,455],{"class":454},"s9eBZ","template",[363,457,458],{"class":450},">\n",[363,460,461,464,467],{"class":365,"line":383},[363,462,463],{"class":450},"  \u003C",[363,465,466],{"class":454},"div",[363,468,458],{"class":450},[363,470,471,474,477],{"class":365,"line":392},[363,472,473],{"class":450},"    \u003C",[363,475,476],{"class":454},"NuxtLayout",[363,478,458],{"class":450},[363,480,481,484,487],{"class":365,"line":401},[363,482,483],{"class":450},"      \u003C",[363,485,486],{"class":454},"NuxtPage",[363,488,489],{"class":450}," />\n",[363,491,493,496,498],{"class":365,"line":492},5,[363,494,495],{"class":450},"    \u003C/",[363,497,476],{"class":454},[363,499,458],{"class":450},[363,501,503,506,508],{"class":365,"line":502},6,[363,504,505],{"class":450},"  \u003C/",[363,507,466],{"class":454},[363,509,458],{"class":450},[363,511,513,516,518],{"class":365,"line":512},7,[363,514,515],{"class":450},"\u003C/",[363,517,455],{"class":454},[363,519,458],{"class":450},[343,521,523],{"id":522},"페이지와-라우팅","페이지와 라우팅",[278,525,526,527,529],{},"Nuxt 3는 ",[316,528,318],{}," 디렉토리의 구조를 기반으로 자동으로 라우트를 생성합니다:",[354,531,534],{"className":532,"code":533,"language":422},[420],"pages/\n├── index.vue         # / 라우트\n├── about.vue         # /about 라우트\n└── users/\n    ├── index.vue     # /users 라우트\n    └── [id].vue      # /users/:id 동적 라우트\n",[316,535,533],{"__ignoreMap":359},[278,537,538],{},"페이지 컴포넌트 예시:",[354,540,542],{"className":441,"code":541,"language":443,"meta":359,"style":359},"\u003Cscript setup lang=\"ts\">\nconst route = useRoute();\nconst { data } = await useFetch(`/api/users/${route.params.id}`);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>사용자 정보\u003C/h1>\n    \u003Cpre>{{ data }}\u003C/pre>\n  \u003C/div>\n\u003C/template>\n",[316,543,544,565,583,630,638,644,652,660,675,689,698],{"__ignoreMap":359},[363,545,546,548,551,554,557,560,563],{"class":365,"line":366},[363,547,451],{"class":450},[363,549,550],{"class":454},"script",[363,552,553],{"class":369}," setup",[363,555,556],{"class":369}," lang",[363,558,559],{"class":450},"=",[363,561,562],{"class":373},"\"ts\"",[363,564,458],{"class":450},[363,566,567,571,574,577,580],{"class":365,"line":383},[363,568,570],{"class":569},"szBVR","const",[363,572,573],{"class":386}," route",[363,575,576],{"class":569}," =",[363,578,579],{"class":369}," useRoute",[363,581,582],{"class":450},"();\n",[363,584,585,587,590,593,596,598,601,604,607,610,613,616,619,621,624,627],{"class":365,"line":392},[363,586,570],{"class":569},[363,588,589],{"class":450}," { ",[363,591,592],{"class":386},"data",[363,594,595],{"class":450}," } ",[363,597,559],{"class":569},[363,599,600],{"class":569}," await",[363,602,603],{"class":369}," useFetch",[363,605,606],{"class":450},"(",[363,608,609],{"class":373},"`/api/users/${",[363,611,612],{"class":450},"route",[363,614,615],{"class":373},".",[363,617,618],{"class":450},"params",[363,620,615],{"class":373},[363,622,623],{"class":450},"id",[363,625,626],{"class":373},"}`",[363,628,629],{"class":450},");\n",[363,631,632,634,636],{"class":365,"line":401},[363,633,515],{"class":450},[363,635,550],{"class":454},[363,637,458],{"class":450},[363,639,640],{"class":365,"line":492},[363,641,643],{"emptyLinePlaceholder":642},true,"\n",[363,645,646,648,650],{"class":365,"line":502},[363,647,451],{"class":450},[363,649,455],{"class":454},[363,651,458],{"class":450},[363,653,654,656,658],{"class":365,"line":512},[363,655,463],{"class":450},[363,657,466],{"class":454},[363,659,458],{"class":450},[363,661,663,665,668,671,673],{"class":365,"line":662},8,[363,664,473],{"class":450},[363,666,667],{"class":454},"h1",[363,669,670],{"class":450},">사용자 정보\u003C/",[363,672,667],{"class":454},[363,674,458],{"class":450},[363,676,678,680,682,685,687],{"class":365,"line":677},9,[363,679,473],{"class":450},[363,681,354],{"class":454},[363,683,684],{"class":450},">{{ data }}\u003C/",[363,686,354],{"class":454},[363,688,458],{"class":450},[363,690,692,694,696],{"class":365,"line":691},10,[363,693,505],{"class":450},[363,695,466],{"class":454},[363,697,458],{"class":450},[363,699,701,703,705],{"class":365,"line":700},11,[363,702,515],{"class":450},[363,704,455],{"class":454},[363,706,458],{"class":450},[343,708,709],{"id":709},"레이아웃",[278,711,712],{},"레이아웃은 여러 페이지에서 공통으로 사용되는 UI 요소를 포함합니다:",[354,714,716],{"className":441,"code":715,"language":443,"meta":359,"style":359},"\u003C!-- layouts/default.vue -->\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cheader>\n      \u003Cnav>\n        \u003CNuxtLink to=\"/\">홈\u003C/NuxtLink>\n        \u003CNuxtLink to=\"/about\">소개\u003C/NuxtLink>\n        \u003CNuxtLink to=\"/users\">사용자\u003C/NuxtLink>\n      \u003C/nav>\n    \u003C/header>\n    \n    \u003Cmain>\n      \u003Cslot />\n    \u003C/main>\n    \n    \u003Cfooter>\n      \u003Cp>© 2024 My Nuxt App\u003C/p>\n    \u003C/footer>\n  \u003C/div>\n\u003C/template>\n",[316,717,718,724,732,740,749,758,781,801,821,830,838,843,853,867,876,881,891,911,920,929],{"__ignoreMap":359},[363,719,720],{"class":365,"line":366},[363,721,723],{"class":722},"sJ8bj","\u003C!-- layouts/default.vue -->\n",[363,725,726,728,730],{"class":365,"line":383},[363,727,451],{"class":450},[363,729,455],{"class":454},[363,731,458],{"class":450},[363,733,734,736,738],{"class":365,"line":392},[363,735,463],{"class":450},[363,737,466],{"class":454},[363,739,458],{"class":450},[363,741,742,744,747],{"class":365,"line":401},[363,743,473],{"class":450},[363,745,746],{"class":454},"header",[363,748,458],{"class":450},[363,750,751,753,756],{"class":365,"line":492},[363,752,483],{"class":450},[363,754,755],{"class":454},"nav",[363,757,458],{"class":450},[363,759,760,763,766,769,771,774,777,779],{"class":365,"line":502},[363,761,762],{"class":450},"        \u003C",[363,764,765],{"class":454},"NuxtLink",[363,767,768],{"class":369}," to",[363,770,559],{"class":450},[363,772,773],{"class":373},"\"/\"",[363,775,776],{"class":450},">홈\u003C/",[363,778,765],{"class":454},[363,780,458],{"class":450},[363,782,783,785,787,789,791,794,797,799],{"class":365,"line":512},[363,784,762],{"class":450},[363,786,765],{"class":454},[363,788,768],{"class":369},[363,790,559],{"class":450},[363,792,793],{"class":373},"\"/about\"",[363,795,796],{"class":450},">소개\u003C/",[363,798,765],{"class":454},[363,800,458],{"class":450},[363,802,803,805,807,809,811,814,817,819],{"class":365,"line":662},[363,804,762],{"class":450},[363,806,765],{"class":454},[363,808,768],{"class":369},[363,810,559],{"class":450},[363,812,813],{"class":373},"\"/users\"",[363,815,816],{"class":450},">사용자\u003C/",[363,818,765],{"class":454},[363,820,458],{"class":450},[363,822,823,826,828],{"class":365,"line":677},[363,824,825],{"class":450},"      \u003C/",[363,827,755],{"class":454},[363,829,458],{"class":450},[363,831,832,834,836],{"class":365,"line":691},[363,833,495],{"class":450},[363,835,746],{"class":454},[363,837,458],{"class":450},[363,839,840],{"class":365,"line":700},[363,841,842],{"class":450},"    \n",[363,844,846,848,851],{"class":365,"line":845},12,[363,847,473],{"class":450},[363,849,850],{"class":454},"main",[363,852,458],{"class":450},[363,854,856,858,861,865],{"class":365,"line":855},13,[363,857,483],{"class":450},[363,859,860],{"class":454},"slot",[363,862,864],{"class":863},"s7hpK"," /",[363,866,458],{"class":450},[363,868,870,872,874],{"class":365,"line":869},14,[363,871,495],{"class":450},[363,873,850],{"class":454},[363,875,458],{"class":450},[363,877,879],{"class":365,"line":878},15,[363,880,842],{"class":450},[363,882,884,886,889],{"class":365,"line":883},16,[363,885,473],{"class":450},[363,887,888],{"class":454},"footer",[363,890,458],{"class":450},[363,892,894,896,898,901,904,907,909],{"class":365,"line":893},17,[363,895,483],{"class":450},[363,897,278],{"class":454},[363,899,900],{"class":450},">",[363,902,903],{"class":386},"©",[363,905,906],{"class":450}," 2024 My Nuxt App\u003C/",[363,908,278],{"class":454},[363,910,458],{"class":450},[363,912,914,916,918],{"class":365,"line":913},18,[363,915,495],{"class":450},[363,917,888],{"class":454},[363,919,458],{"class":450},[363,921,923,925,927],{"class":365,"line":922},19,[363,924,505],{"class":450},[363,926,466],{"class":454},[363,928,458],{"class":450},[363,930,932,934,936],{"class":365,"line":931},20,[363,933,515],{"class":450},[363,935,455],{"class":454},[363,937,458],{"class":450},[278,939,940],{},"페이지에서 레이아웃 사용:",[354,942,944],{"className":441,"code":943,"language":443,"meta":359,"style":359},"\u003Cscript setup lang=\"ts\">\ndefinePageMeta({\n  layout: 'custom', // custom.vue 레이아웃 사용\n});\n\u003C/script>\n",[316,945,946,962,970,984,989],{"__ignoreMap":359},[363,947,948,950,952,954,956,958,960],{"class":365,"line":366},[363,949,451],{"class":450},[363,951,550],{"class":454},[363,953,553],{"class":369},[363,955,556],{"class":369},[363,957,559],{"class":450},[363,959,562],{"class":373},[363,961,458],{"class":450},[363,963,964,967],{"class":365,"line":383},[363,965,966],{"class":369},"definePageMeta",[363,968,969],{"class":450},"({\n",[363,971,972,975,978,981],{"class":365,"line":392},[363,973,974],{"class":450},"  layout: ",[363,976,977],{"class":373},"'custom'",[363,979,980],{"class":450},", ",[363,982,983],{"class":722},"// custom.vue 레이아웃 사용\n",[363,985,986],{"class":365,"line":401},[363,987,988],{"class":450},"});\n",[363,990,991,993,995],{"class":365,"line":492},[363,992,515],{"class":450},[363,994,550],{"class":454},[363,996,458],{"class":450},[343,998,1000],{"id":999},"데이터-가져오기","데이터 가져오기",[278,1002,1003],{},"Nuxt 3는 서버와 클라이언트 사이드에서 모두 사용할 수 있는 데이터 가져오기 유틸리티를 제공합니다:",[354,1005,1007],{"className":441,"code":1006,"language":443,"meta":359,"style":359},"\u003Cscript setup lang=\"ts\">\n// 서버 사이드에서 데이터 가져오기\nconst { data: products } = await useFetch('/api/products');\n\n// 컴포저블 함수로 로직 추출\nconst useProducts = () => {\n  return useFetch('/api/products', {\n    transform: (response) => response.data,\n    watch: false, // URL 변경 시 다시 가져오지 않음\n  });\n};\n\n// 컴포저블 함수 사용\nconst { data: products, refresh } = await useProducts();\n\u003C/script>\n",[316,1008,1009,1025,1030,1059,1063,1068,1086,1100,1119,1132,1137,1142,1146,1151,1178],{"__ignoreMap":359},[363,1010,1011,1013,1015,1017,1019,1021,1023],{"class":365,"line":366},[363,1012,451],{"class":450},[363,1014,550],{"class":454},[363,1016,553],{"class":369},[363,1018,556],{"class":369},[363,1020,559],{"class":450},[363,1022,562],{"class":373},[363,1024,458],{"class":450},[363,1026,1027],{"class":365,"line":383},[363,1028,1029],{"class":722},"// 서버 사이드에서 데이터 가져오기\n",[363,1031,1032,1034,1036,1039,1041,1044,1046,1048,1050,1052,1054,1057],{"class":365,"line":392},[363,1033,570],{"class":569},[363,1035,589],{"class":450},[363,1037,592],{"class":1038},"s4XuR",[363,1040,314],{"class":450},[363,1042,1043],{"class":386},"products",[363,1045,595],{"class":450},[363,1047,559],{"class":569},[363,1049,600],{"class":569},[363,1051,603],{"class":369},[363,1053,606],{"class":450},[363,1055,1056],{"class":373},"'/api/products'",[363,1058,629],{"class":450},[363,1060,1061],{"class":365,"line":401},[363,1062,643],{"emptyLinePlaceholder":642},[363,1064,1065],{"class":365,"line":492},[363,1066,1067],{"class":722},"// 컴포저블 함수로 로직 추출\n",[363,1069,1070,1072,1075,1077,1080,1083],{"class":365,"line":502},[363,1071,570],{"class":569},[363,1073,1074],{"class":369}," useProducts",[363,1076,576],{"class":569},[363,1078,1079],{"class":450}," () ",[363,1081,1082],{"class":569},"=>",[363,1084,1085],{"class":450}," {\n",[363,1087,1088,1091,1093,1095,1097],{"class":365,"line":512},[363,1089,1090],{"class":569},"  return",[363,1092,603],{"class":369},[363,1094,606],{"class":450},[363,1096,1056],{"class":373},[363,1098,1099],{"class":450},", {\n",[363,1101,1102,1105,1108,1111,1114,1116],{"class":365,"line":662},[363,1103,1104],{"class":369},"    transform",[363,1106,1107],{"class":450},": (",[363,1109,1110],{"class":1038},"response",[363,1112,1113],{"class":450},") ",[363,1115,1082],{"class":569},[363,1117,1118],{"class":450}," response.data,\n",[363,1120,1121,1124,1127,1129],{"class":365,"line":677},[363,1122,1123],{"class":450},"    watch: ",[363,1125,1126],{"class":386},"false",[363,1128,980],{"class":450},[363,1130,1131],{"class":722},"// URL 변경 시 다시 가져오지 않음\n",[363,1133,1134],{"class":365,"line":691},[363,1135,1136],{"class":450},"  });\n",[363,1138,1139],{"class":365,"line":700},[363,1140,1141],{"class":450},"};\n",[363,1143,1144],{"class":365,"line":845},[363,1145,643],{"emptyLinePlaceholder":642},[363,1147,1148],{"class":365,"line":855},[363,1149,1150],{"class":722},"// 컴포저블 함수 사용\n",[363,1152,1153,1155,1157,1159,1161,1163,1165,1168,1170,1172,1174,1176],{"class":365,"line":869},[363,1154,570],{"class":569},[363,1156,589],{"class":450},[363,1158,592],{"class":1038},[363,1160,314],{"class":450},[363,1162,1043],{"class":386},[363,1164,980],{"class":450},[363,1166,1167],{"class":386},"refresh",[363,1169,595],{"class":450},[363,1171,559],{"class":569},[363,1173,600],{"class":569},[363,1175,1074],{"class":369},[363,1177,582],{"class":450},[363,1179,1180,1182,1184],{"class":365,"line":878},[363,1181,515],{"class":450},[363,1183,550],{"class":454},[363,1185,458],{"class":450},[343,1187,1189],{"id":1188},"서버-api-엔드포인트","서버 API 엔드포인트",[278,1191,1192,1195],{},[316,1193,1194],{},"server/api/"," 디렉토리에 API 엔드포인트를 정의할 수 있습니다:",[354,1197,1201],{"className":1198,"code":1199,"language":1200,"meta":359,"style":359},"language-ts shiki shiki-themes github-light github-dark","// server/api/products.ts\nexport default defineEventHandler(async (event) => {\n  // 데이터베이스 또는 외부 API에서 데이터 가져오기\n  const products = await db.getProducts();\n  \n  return {\n    data: products,\n    count: products.length,\n  };\n});\n","ts",[316,1202,1203,1208,1236,1241,1261,1266,1272,1277,1288,1293],{"__ignoreMap":359},[363,1204,1205],{"class":365,"line":366},[363,1206,1207],{"class":722},"// server/api/products.ts\n",[363,1209,1210,1213,1216,1219,1221,1224,1227,1230,1232,1234],{"class":365,"line":383},[363,1211,1212],{"class":569},"export",[363,1214,1215],{"class":569}," default",[363,1217,1218],{"class":369}," defineEventHandler",[363,1220,606],{"class":450},[363,1222,1223],{"class":569},"async",[363,1225,1226],{"class":450}," (",[363,1228,1229],{"class":1038},"event",[363,1231,1113],{"class":450},[363,1233,1082],{"class":569},[363,1235,1085],{"class":450},[363,1237,1238],{"class":365,"line":392},[363,1239,1240],{"class":722},"  // 데이터베이스 또는 외부 API에서 데이터 가져오기\n",[363,1242,1243,1246,1249,1251,1253,1256,1259],{"class":365,"line":401},[363,1244,1245],{"class":569},"  const",[363,1247,1248],{"class":386}," products",[363,1250,576],{"class":569},[363,1252,600],{"class":569},[363,1254,1255],{"class":450}," db.",[363,1257,1258],{"class":369},"getProducts",[363,1260,582],{"class":450},[363,1262,1263],{"class":365,"line":492},[363,1264,1265],{"class":450},"  \n",[363,1267,1268,1270],{"class":365,"line":502},[363,1269,1090],{"class":569},[363,1271,1085],{"class":450},[363,1273,1274],{"class":365,"line":512},[363,1275,1276],{"class":450},"    data: products,\n",[363,1278,1279,1282,1285],{"class":365,"line":662},[363,1280,1281],{"class":450},"    count: products.",[363,1283,1284],{"class":386},"length",[363,1286,1287],{"class":450},",\n",[363,1289,1290],{"class":365,"line":677},[363,1291,1292],{"class":450},"  };\n",[363,1294,1295],{"class":365,"line":691},[363,1296,988],{"class":450},[282,1298,1300],{"id":1299},"상태-관리","상태 관리",[343,1302,1304],{"id":1303},"usestate","useState",[278,1306,1307],{},"Nuxt 3는 서버와 클라이언트 간에 공",[1309,1310,1311],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":359,"searchDepth":383,"depth":383,"links":1313},[1314,1315,1319,1326],{"id":284,"depth":383,"text":285},{"id":340,"depth":383,"text":341,"children":1316},[1317,1318],{"id":345,"depth":392,"text":345},{"id":412,"depth":392,"text":413},{"id":427,"depth":383,"text":428,"children":1320},[1321,1322,1323,1324,1325],{"id":431,"depth":392,"text":432},{"id":522,"depth":392,"text":523},{"id":709,"depth":392,"text":709},{"id":999,"depth":392,"text":1000},{"id":1188,"depth":392,"text":1189},{"id":1299,"depth":383,"text":1300,"children":1327},[1328],{"id":1303,"depth":392,"text":1304},"Nuxt 3의 주요 기능과 프로젝트 설정 방법에 대한 포괄적인 가이드","md","/images/content/3.develop/2.frameworks/3.nuxt/nuxt3-guide.png",{"createdAt":1333},"2024-02-05",{"icon":87},{"title":111,"description":1329},"2024-02-25","QuaIYZMgPSl4QSq1ILX1YJ-1JMTkbd2WTHNBQBViLqQ",[1339,1343,1347,1378,1388,1413],{"title":5,"path":6,"stem":7,"children":1340,"page":19},[1341,1342],{"title":10,"path":11,"stem":12,"icon":13},{"title":15,"path":16,"stem":17,"icon":18},{"title":21,"path":22,"stem":23,"children":1344,"page":19},[1345,1346],{"title":26,"path":27,"stem":28,"icon":29},{"title":21,"path":31,"stem":32,"icon":33},{"title":35,"path":36,"stem":37,"children":1348,"page":19},[1349,1353,1360,1377],{"title":40,"path":41,"stem":42,"children":1350,"page":19},[1351,1352],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},{"title":51,"path":48,"stem":52,"icon":49},{"title":54,"path":55,"stem":56,"children":1354,"page":19},[1355,1359],{"title":59,"path":60,"stem":61,"children":1356,"page":19},[1357,1358],{"title":59,"path":64,"stem":65,"icon":66},{"title":68,"path":69,"stem":70,"icon":66},{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},{"title":75,"path":76,"stem":77,"children":1361,"page":19},[1362,1365,1369,1373,1376],{"title":80,"path":81,"stem":82,"children":1363,"page":19},[1364],{"title":80,"path":85,"stem":86,"icon":87},{"title":89,"path":90,"stem":91,"children":1366,"page":19},[1367,1368],{"title":89,"path":94,"stem":95,"icon":96},{"title":98,"path":99,"stem":100,"icon":96},{"title":102,"path":103,"stem":104,"children":1370,"page":19},[1371,1372],{"title":102,"path":107,"stem":108,"icon":109},{"title":111,"path":112,"stem":113,"icon":87},{"title":115,"path":116,"stem":117,"children":1374,"page":19},[1375],{"title":120,"path":121,"stem":122,"icon":123},{"title":75,"path":125,"stem":126,"icon":127},{"title":129,"path":130,"stem":131,"icon":127},{"title":133,"path":134,"stem":135,"children":1379,"page":19},[1380,1387],{"title":138,"path":139,"stem":140,"children":1381,"icon":143},[1382,1383,1386],{"title":138,"path":139,"stem":140,"icon":143},{"title":145,"path":146,"stem":147,"children":1384,"page":19},[1385],{"title":150,"path":151,"stem":152,"icon":153},{"title":155,"path":156,"stem":157,"icon":158},{"title":160,"path":161,"stem":162,"icon":158},{"title":164,"path":165,"stem":166,"children":1389,"page":19},[1390,1398,1412],{"title":169,"path":170,"stem":171,"children":1391,"page":19},[1392],{"title":174,"path":175,"stem":176,"children":1393,"page":19},[1394],{"title":179,"path":180,"stem":181,"children":1395,"page":19},[1396,1397],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},{"title":188,"path":189,"stem":190,"icon":191},{"title":193,"path":194,"stem":195,"children":1399,"page":19},[1400,1401,1402,1403,1404,1405,1406,1407,1408,1409,1410,1411],{"title":198,"path":199,"stem":200,"icon":201},{"title":203,"path":204,"stem":205},{"title":207,"path":208,"stem":209},{"title":211,"path":212,"stem":213},{"title":215,"path":216,"stem":217},{"title":219,"path":220,"stem":221},{"title":223,"path":224,"stem":225},{"title":227,"path":228,"stem":229},{"title":231,"path":232,"stem":233},{"title":235,"path":236,"stem":237},{"title":239,"path":240,"stem":241},{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},{"title":248,"path":249,"stem":250,"icon":251},{"title":253,"path":254,"stem":255,"children":1414,"page":19},[1415,1418],{"title":258,"path":259,"stem":260,"children":1416,"page":19},[1417],{"title":263,"path":264,"stem":265,"icon":266},{"title":253,"path":268,"stem":269,"icon":270},[1420,1421],{"title":102,"path":107,"stem":108,"icon":109,"children":-1},{"title":120,"path":121,"stem":122,"icon":123,"children":-1},1773760863581]