[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-note-nuxt4-nuxt-info":195,"-ko-note-nuxt4-nuxt-info-surround":477},[4,124,181],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":27},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,28,42,68,78,88,104,114],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":27},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16],{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":27},"Spring Ai","custom:ai","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai",[22],{"title":23,"path":24,"stem":25,"icon":26},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai\u002F1.spring-ai","lucide:file-text",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[34,38],{"title":35,"path":36,"stem":37,"icon":26},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":39,"path":40,"stem":41,"icon":26},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":27},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[48,52,56,60,64],{"title":49,"path":50,"stem":51,"icon":26},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":53,"path":54,"stem":55,"icon":26},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":57,"path":58,"stem":59,"icon":26},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":61,"path":62,"stem":63,"icon":26},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":65,"path":66,"stem":67,"icon":26},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":27},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[74],{"title":75,"path":76,"stem":77,"icon":26},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":27},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[84],{"title":85,"path":86,"stem":87,"icon":26},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":89,"icon":90,"path":91,"stem":92,"children":93,"page":27},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[94],{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":27},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[100],{"title":101,"path":102,"stem":103,"icon":26},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":105,"icon":106,"path":107,"stem":108,"children":109,"page":27},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[110],{"title":111,"path":112,"stem":113,"icon":26},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":115,"icon":116,"path":117,"stem":118,"children":119,"page":27},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[120],{"title":121,"path":122,"stem":123,"icon":26},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[130],{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[136,140,144,148,152,156,160,164,168,173,177],{"title":137,"path":138,"stem":139,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":141,"path":142,"stem":143,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":145,"path":146,"stem":147,"icon":26},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":149,"path":150,"stem":151,"icon":26},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":153,"path":154,"stem":155,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":157,"path":158,"stem":159,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":161,"path":162,"stem":163,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":165,"path":166,"stem":167,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":169,"path":170,"stem":171,"icon":172},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":174,"path":175,"stem":176,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":178,"path":179,"stem":180,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":182,"icon":183,"path":184,"stem":185,"children":186,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[187],{"title":131,"icon":132,"path":188,"stem":189,"children":190,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[191],{"title":192,"path":193,"stem":194,"icon":26},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":196,"title":49,"body":197,"date":461,"description":462,"extension":463,"links":464,"meta":465,"navigation":472,"path":50,"seo":473,"stem":51,"__hash__":476},"docs_ko\u002Fko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info.md",{"type":198,"value":199,"toc":448},"minimark",[200],[201,202,204,209,222,226,238,241,246,249,268,275,277,281,284,293,299,309,316,320,326,329,331,335,384,386,390,393,436,438,442,445],"u-page-card",{":spotlight":203},"true",[205,206,208],"h1",{"id":207},"nuxt-4를-선택한-이유와-아키텍처-정리","📖 Nuxt 4를 선택한 이유와 아키텍처 정리",[210,211,215],"div",{"className":212},[213,214],"flex","justify-center",[216,217],"img",{"alt":218,"height":219,"src":220,"width":221},"nuxt-thumbnail",350,"\u002Fimages\u002Fnuxt-thumbnail.png",700,[223,224,225],"p",{},"Vue.js로 웹 프로젝트를 하다 보면 자연스럽게 마주하게 되는 벽이 있다. 바로 SEO(검색엔진 최적화)와 초기 로딩 속도 문제다. 클라이언트 사이드 렌더링(CSR) 중심의 SPA 구조에서는 대형 프로젝트나 검색 유입이 중요한 서비스를 만들 때 한계가 명확하다.",[223,227,228,229,233,234,237],{},"이 문제를 해결하기 위해 도입한 ",[230,231,232],"strong",{},"Nuxt",", 그중에서도 최신 버전인 ",[230,235,236],{},"Nuxt 4","를 직접 다루며 파악한 핵심 구조와 생태계 변화, 그리고 실무에서 느낀 점들을 정리해본다.",[239,240],"hr",{},[242,243,245],"h2",{"id":244},"기존-vue-생태계의-갈증과-nuxt의-등장-배경","🔎 기존 Vue 생태계의 갈증과 Nuxt의 등장 배경",[223,247,248],{},"초창기 Vue는 화면을 빠르게 그릴 수 있는 훌륭한 UI 라이브러리였다. 하지만 프로젝트를 구성하려면 개발자가 직접 판을 짜야 했다.",[250,251,252,265],"ul",{},[253,254,255,256,260,261,264],"li",{},"라우터는 ",[257,258,259],"code",{},"Vue Router",", 상태 관리는 ",[257,262,263],{},"Pinia",", 메타태그 관리는 별도 패키지...",[253,266,267],{},"빌드 최적화와 SSR(서버사이드 렌더링)을 직접 구현하려고 하면 Node.js 서버 세팅부터 시작해 복잡도가 급격히 올라간다.",[223,269,270,271,274],{},"\"",[230,272,273],{},"가장 이상적인 구조를 미리 정의해 둘 테니, 너희는 비즈니스 로직에만 집중해","\"라는 철학으로 나온 프레임워크가 바로 Nuxt다. 라우팅, 데이터 페칭, 빌드 최적화가 하나의 규격 안에 통합되어 있어 개발 생산성을 극대화해 준다.",[239,276],{},[242,278,280],{"id":279},"nuxt-4로-넘어오면서-무엇이-달라졌을까","🧐 Nuxt 4로 넘어오면서 무엇이 달라졌을까?",[223,282,283],{},"최신 Nuxt 4에 이르러서는 프론트엔드와 백엔드의 경계가 더욱 깔끔하게 정돈되었다.",[285,286,288,289,292],"h3",{"id":287},"명확해진-단일-앱-레이어-app-디렉토리","📁 ① 명확해진 단일 앱 레이어 (",[257,290,291],{},"app\u002F"," 디렉토리)",[223,294,295,296,298],{},"과거에는 루트 경로에 컴포넌트, 페이지, 레이아웃 등이 섞여 있어 프로젝트가 커지면 구조가 산만해졌다. Nuxt 4에서는 모든 프론트엔드 자산이 ",[257,297,291],{}," 폴더 안으로 완벽히 응집된다.",[300,301,307],"pre",{"className":302,"code":304,"language":305,"meta":306},[303],"language-text","my-nuxt-project\u002F\n├── app\u002F                  # 💡 프론트엔드 소스코드 집약 (pages, components 등)\n├── server\u002F               # 💡 독립된 백엔드\u002FAPI 레이어 (Nitro 엔진)\n├── nuxt.config.ts\n└── package.json\n","text","",[257,308,304],{"__ignoreMap":306},[223,310,311,312,315],{},"이로 인해 프론트엔드 영역과 서버 영역(",[257,313,314],{},"server\u002F",")의 구분이 명확해져 유지보수할 때 정신 건강에 이롭다.",[285,317,319],{"id":318},"nitro-런타임-엔진","⚡ ② Nitro 런타임 엔진",[223,321,322,323,325],{},"Nuxt 하부에서 서버를 지탱하는 ",[257,324,69],{},"는 개발자가 인프라 환경(Node.js, Vercel, AWS Lambda 등)을 크게 신경 쓰지 않도록 추상화되어 있다.",[223,327,328],{},"코드 한 줄 수정 없이 에지(Edge) 환경에 배포할 수 있으며, 캐싱(ISR, SWR) 설정도 설정 파일 몇 줄로 제어할 수 있어 인프라 비용과 성능을 동시에 잡을 수 있다.",[239,330],{},[242,332,334],{"id":333},"개발하면서-체감하는-nuxt의-강력한-무기들","🔥 개발하면서 체감하는 Nuxt의 강력한 무기들",[250,336,337,359,368,374],{},[253,338,339,342,343,346,347,350,351,354,355,358],{},[230,340,341],{},"설정보다 관습 (Convention over Configuration):"," ",[257,344,345],{},"app\u002Fpages\u002F","에 파일을 만들면 라우팅이 알아서 잡히고, ",[257,348,349],{},"ref",", ",[257,352,353],{},"computed"," 같은 Vue 핵심 API나 컴포넌트를 일일이 ",[257,356,357],{},"import"," 할 필요가 없다. (Auto-imports)",[253,360,361,367],{},[230,362,363,366],{},[257,364,365],{},"useFetch","를 통한 중복 요청 차단 (Payload 직렬화):"," 서버에서 데이터를 가져온 상태(State)를 그대로 브라우저로 넘겨주기 때문에(Hydration), 클라이언트가 켜졌을 때 똑같은 API를 두 번 부르는 상용구 현상을 원천 차단한다.",[253,369,370,373],{},[230,371,372],{},"엔드투엔드 타입 안전성:"," 백엔드 API 레이어(server\u002Fapi\u002F)의 응답 구조가 바뀌면, 프론트엔드에서 데이터를 호출하는 코드까지 실시간으로 타입 추론이 연동되어 런타임 에러를 획기적으로 줄여준다.",[253,375,376,383],{},[230,377,378,379,382],{},"서버 컴포넌트 (",[257,380,381],{},"*.server.vue","):"," 무거운 라이브러리나 마크다운 파서 등을 오직 서버에서만 렌더링하고 브라우저로는 정적 HTML만 보낸다. 덕분에 클라이언트 번들 사이즈를 방어하기 좋다.",[239,385],{},[242,387,389],{"id":388},"️-실무에서-nuxt를-쓸-때-반드시-알아야-할-주의점","⚠️ 실무에서 Nuxt를 쓸 때 반드시 알아야 할 주의점",[223,391,392],{},"막 쓰기에는 편하지만, SPA에만 익숙해져 있다면 몇 가지 삽질 포인트가 있다.",[250,394,395,420,426],{},[253,396,397,407,408,411,412,415,416,419],{},[230,398,399,400,350,403,406],{},"SSR과 브라우저 전역 객체 (",[257,401,402],{},"window",[257,404,405],{},"localStorage"," 등):","\n서버에서 먼저 HTML을 그릴 때는 저런 객체들이 존재하지 않는다. 따라서 렌더링 단계에서 ",[257,409,410],{},"window is not defined"," 에러를 뿜기 십상이다. 브라우저 API는 반드시 ",[257,413,414],{},"onMounted"," 훅 내부나 ",[257,417,418],{},"import.meta.client"," 체크를 거친 뒤에 사용해야 한다.",[253,421,422,425],{},[230,423,424],{},"하이드레이션 미스매치 (Hydration Mismatch):","\n서버에서 그린 HTML 결과물과 브라우저가 처음 실행할 때의 결과물이 미묘하게 다르면 콘솔에 경고창이 가득 찬다. (예: 날짜나 랜덤 값을 그대로 렌더링할 때 발생하기 쉽다.)",[253,427,428,431,432,435],{},[230,429,430],{},"무분별한 SSR은 금물:","\n모든 페이지를 다 SSR로 돌릴 필요는 없다. 동적으로 실시간 데이터를 먹일 필요가 없는 페이지는 ",[257,433,434],{},"routeRules","를 통해 SSG나 ISR로 빼는 설계적 고민이 필요하다.",[239,437],{},[242,439,441],{"id":440},"마치며-프레임워크가-주는-제약-속의-자유","🎯 마치며: 프레임워크가 주는 제약 속의 자유",[223,443,444],{},"Nuxt는 처음에는 \"Vue를 조금 더 편하게 쓰게 해주는 껍데기\"처럼 보이지만, 깊게 팔수록 \"웹 애플리케이션을 어떤 구조로 설계하고 배포해야 하는지\"에 대한 선명한 정답을 제시해주는 프레임워크다.",[223,446,447],{},"처음에는 강력한 규격(Convention)이 답답하게 느껴질 수도 있지만, 이 규격이 주는 안정감과 Nitro 엔진이 가져다주는 인프라의 유연함을 경험하고 나면, 중대형 웹 서비스를 혼자서도 뚝딱 만들어낼 수 있는 가장 강력한 무기임을 깨닫게 된다.",{"title":306,"searchDepth":449,"depth":449,"links":450},2,[451,452,458,459,460],{"id":244,"depth":449,"text":245},{"id":279,"depth":449,"text":280,"children":453},[454,457],{"id":287,"depth":455,"text":456},3,"📁 ① 명확해진 단일 앱 레이어 (app\u002F 디렉토리)",{"id":318,"depth":455,"text":319},{"id":333,"depth":449,"text":334},{"id":388,"depth":449,"text":389},{"id":440,"depth":449,"text":441},"2026-07-07","Vue 생태계에서 Nuxt가 등장한 배경부터 Nuxt 4의 단일 앱 레이어 구조, Auto-imports, SSR 데이터 페칭, 그리고 실무 주의점 정리","md",null,{"tags":466,"image":471},[232,467,468,469,470],"Vue","Frontend","SSR","Architecture","images\u002Fnuxt-thumbnail2.png",{"icon":26},{"title":474,"description":475},"개발자를 위한 Nuxt 4 아키텍처 구조 및 실무 적용 가이드","Nuxt 4의 핵심 아키텍처 변화, Nitro 엔진, SSR 렌더링 원리, 그리고 개발 과정에서 알아야 할 주의점과 SEO 최적화 팁","ERo0Pema7is1XyxvelRXj2bv50Ratp4jzrhe0_xsw-4",[478,480],{"title":39,"path":40,"stem":41,"description":479,"icon":26,"children":-1},"map, filter, some 등 배열 고차 함수의 동작 원리와 filter(Boolean) 패턴을 활용한 데이터 가공 방법 정리",{"title":53,"path":54,"stem":55,"description":481,"icon":26,"children":-1},"Nuxt의 useAsyncData가 SSR 환경에서 데이터 중복 요청을 방지하고 Hydration 성능을 개선하는 원리와 활용 방법 정리",1785305903712]