[{"data":1,"prerenderedAt":845},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brolog-vercel-deploy2-error-analyze":181,"-ko-project-brolog-vercel-deploy2-error-analyze-surround":840},[4,114,167],{"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],{"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},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[120],{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[126,130,134,138,142,146,150,154,159,163],{"title":127,"path":128,"stem":129,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":131,"path":132,"stem":133,"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":135,"path":136,"stem":137,"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":139,"path":140,"stem":141,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":143,"path":144,"stem":145,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":147,"path":148,"stem":149,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":151,"path":152,"stem":153,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":155,"path":156,"stem":157,"icon":158},"[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":160,"path":161,"stem":162,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":164,"path":165,"stem":166,"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":168,"icon":169,"path":170,"stem":171,"children":172,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[173],{"title":121,"icon":122,"path":174,"stem":175,"children":176,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[177],{"title":178,"path":179,"stem":180,"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":182,"title":164,"body":183,"date":825,"description":826,"extension":827,"links":828,"meta":829,"navigation":835,"path":165,"seo":836,"stem":166,"__hash__":839},"docs_ko\u002Fko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze.md",{"type":184,"value":185,"toc":819},"minimark",[186,815],[187,188,190,195,199,211,214,222,225,253,256,259,263,266,273,276,283,290,293,323,330,333,335,343,349,352,355,362,365,372,375,381,383,387,393,411,414,417,424,427,434,437,440,445,448,450,454,457,464,467,472,475,489,491,495,498,509,511,515,518,521,523,527,536,539,541,545,558,563,566,573,576,579,590,593,600,602,606,618,623,625,632,635,637,648,651,653,657,660,727,755,758,765,768,770,774,777,780,787,793,796,799,806,812],"u-page-card",{":spotlight":189},"true",[191,192,194],"h1",{"id":193},"build-error를-이해하기-위한-nuxt-실행-구조-분석","🔍 Build Error를 이해하기 위한 Nuxt 실행 구조 분석",[196,197,198],"p",{},"1편의 배포 과정에서 가장 처음 마주했던 문제는 다음 오류였다.",[200,201,208],"pre",{"className":202,"code":204,"filename":205,"language":206,"meta":207},[203],"language-text","layer\u002F.nuxt\u002Ftsconfig.app.json not found\n","Error Log","text","",[209,210,204],"code",{"__ignoreMap":207},[196,212,213],{},"처음에는 단순히 Vercel 설정 문제라고 생각했다.",[196,215,216,217,221],{},"하지만 문제를 해결하기 위해 과정을 따라가면서 확인해보니, 핵심 원인은 단순한 배포 설정이 아니라 ",[218,219,220],"strong",{},"Nuxt가 프로젝트를 준비하고 빌드하는 과정 자체에 대한 이해 부족","이었다.",[196,223,224],{},"특히 이번 문제를 이해하기 위해서는 다음 개념들을 다시 확인할 필요가 있었다.",[226,227,228,232,238,245,250],"ul",{},[229,230,231],"li",{},"Nuxt Multi Layer 구조",[229,233,234,237],{},[209,235,236],{},"nuxi prepare","가 생성하는 결과물",[229,239,240,241,244],{},"Nuxt ",[209,242,243],{},"build"," 과정",[229,246,240,247,244],{},[209,248,249],{},"generate",[229,251,252],{},"SSR과 SSG의 차이",[196,254,255],{},"이번 글에서는 배포 과정에서 발생한 오류를 기준으로 Nuxt Build Pipeline이 실제로 어떻게 동작하는지 정리한다.",[257,258],"hr",{},[191,260,262],{"id":261},"_1-nuxt-multi-layer-구조-이해","1. Nuxt Multi Layer 구조 이해",[196,264,265],{},"Brolog 프로젝트는 Nuxt Docus 기반으로 구성되어 있으며,\nDocus 내부 구조에서 사용하는 Nuxt Layer 구조를 그대로 활용하고 있다.",[196,267,268,269,272],{},"Docus는 문서 사이트 제작을 위한 테마 레이어를 제공하고,\n실제 서비스 영역인 ",[209,270,271],{},"docs"," 프로젝트는 해당 Layer를 확장하는 형태로 동작한다.",[196,274,275],{},"이를 통해 기본 제공되는 컴포넌트, Layout, Middleware 등을 그대로 사용하면서,\n필요한 경우 동일한 경로에 파일을 생성하여 프로젝트 단위로 Override할 수 있다.",[200,277,281],{"className":278,"code":279,"filename":280,"language":206,"meta":207},[203],"Nuxt Content + Theme + Layer Architecture\n","Architecture",[209,282,279],{"__ignoreMap":207},[200,284,288],{"className":285,"code":286,"filename":287,"language":206,"meta":207},[203],"Nuxt\n ├── Nuxt Content (Markdown\u002FData)\n │\n └── Docus (문서 사이트 프레임워크)\n       └── Nuxt Layer 사용\n","Layer Structure",[209,289,286],{"__ignoreMap":207},[196,291,292],{},"Nuxt에서는 다음과 같은 방식으로 Layer를 확장한다.",[200,294,299],{"className":295,"code":296,"filename":297,"language":298,"meta":207,"style":207},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","nuxt build docs --extends ..\u002Flayer\n","Terminal","bash",[209,300,301],{"__ignoreMap":207},[302,303,306,310,314,317,320],"span",{"class":304,"line":305},"line",1,[302,307,309],{"class":308},"sBMFI","nuxt",[302,311,313],{"class":312},"sfazB"," build",[302,315,316],{"class":312}," docs",[302,318,319],{"class":312}," --extends",[302,321,322],{"class":312}," ..\u002Flayer\n",[196,324,325,326,329],{},"여기서 중요한 점은 ",[209,327,328],{},"layer","가 단순히 파일을 가져오는 폴더가 아니라는 것이다.",[196,331,332],{},"Nuxt는 빌드 과정에서 Layer 정보를 분석하고, 현재 애플리케이션과 병합하는 준비 과정이 필요하다.",[257,334],{},[191,336,338,339,342],{"id":337},"_2-nuxt-디렉토리의-역할","2. ",[209,340,341],{},".nuxt"," 디렉토리의 역할",[196,344,345,346,348],{},"Nuxt 프로젝트를 개발하다 보면 ",[209,347,341],{},"라는 디렉토리가 생성된다.",[196,350,351],{},"Nuxt가 프로젝트 구조를 분석하고 자동 생성하는 빌드 준비 결과물이다.",[196,353,354],{},"대표적으로 포함되는 내용은 다음과 같다.",[200,356,360],{"className":357,"code":358,"filename":359,"language":206,"meta":207},[203],".nuxt\n\n├── tsconfig.app.json\n├── imports.d.ts\n├── components.d.ts\n├── nuxt.config.mjs\n└── generated files\n",".nuxt Directory",[209,361,358],{"__ignoreMap":207},[196,363,364],{},"이 파일들은 다음 과정에서 활용된다.",[200,366,370],{"className":367,"code":368,"filename":369,"language":206,"meta":207},[203],"소스 코드 분석\n\n↓\n\nNuxt 내부 메타데이터 생성\n\n↓\n\nTypeScript 설정 생성\n\n↓\n\nAuto Import 정보 생성\n\n↓\n\nVite 빌드 준비\n","Prepare Flow",[209,371,368],{"__ignoreMap":207},[196,373,374],{},"로컬 환경에서는 개발 서버 실행 과정에서 이미 생성되어 있기 때문에 문제가 보이지 않았다.",[196,376,377,378,380],{},"하지만 Vercel은 항상 새로운 환경에서 프로젝트를 설치하기 때문에 기존 ",[209,379,341],{}," 결과물이 존재하지 않는 상태에서 빌드가 시작된다.",[257,382],{},[191,384,386],{"id":385},"_3-nuxi-prepare의-역할","3. nuxi prepare의 역할",[196,388,389,390,392],{},"이번 오류를 해결하는 핵심은 ",[209,391,236],{},"였다.",[200,394,396],{"className":295,"code":395,"filename":297,"language":298,"meta":207,"style":207},"npx nuxi prepare ..\u002Flayer\n",[209,397,398],{"__ignoreMap":207},[302,399,400,403,406,409],{"class":304,"line":305},[302,401,402],{"class":308},"npx",[302,404,405],{"class":312}," nuxi",[302,407,408],{"class":312}," prepare",[302,410,322],{"class":312},[196,412,413],{},"이 명령어는 빌드 이전 단계에서 Nuxt 프로젝트를 분석하고 필요한 파일을 생성하는 준비 과정이다.",[196,415,416],{},"대략적인 흐름은 다음과 같다.",[200,418,422],{"className":419,"code":420,"filename":421,"language":206,"meta":207},[203],"Nuxt Layer 분석\n\n↓\n\nModule 초기화\n\n↓\n\nAuto Import 분석\n\n↓\n\nType 정의 생성\n\n↓\n\n.nuxt 디렉토리 생성\n","Prepare Process",[209,423,420],{"__ignoreMap":207},[196,425,426],{},"즉:",[200,428,432],{"className":429,"code":430,"filename":431,"language":206,"meta":207},[203],"prepare 실행 전\n\nlayer\u002F.nuxt 없음\n\n\nprepare 실행 후\n\nlayer\u002F.nuxt 생성\n","Prepare Result",[209,433,430],{"__ignoreMap":207},[196,435,436],{},"이 된다.",[196,438,439],{},"처음 발생했던 오류:",[200,441,443],{"className":442,"code":204,"filename":205,"language":206,"meta":207},[203],[209,444,204],{"__ignoreMap":207},[196,446,447],{},"는 결국 Layer에 대한 prepare 과정이 먼저 실행되지 않았기 때문에 발생한 문제였다.",[257,449],{},[191,451,453],{"id":452},"_4-nuxt-build-pipeline-흐름","4. Nuxt Build Pipeline 흐름",[196,455,456],{},"Nuxt Build의 전체 흐름은 다음과 같다.",[200,458,462],{"className":459,"code":460,"filename":461,"language":206,"meta":207},[203],"Source Code\n\n↓\n\nnuxi prepare\n\n↓\n\n.nuxt 생성\n\n↓\n\nVite Compile\n\n↓\n\nVue 코드 변환\n\n↓\n\nNitro Build\n\n↓\n\nDeployment Output 생성\n","Build Pipeline",[209,463,460],{"__ignoreMap":207},[196,465,466],{},"각 단계별 역할은 다음과 같다.",[468,469,471],"h2",{"id":470},"prepare-단계","① Prepare 단계",[196,473,474],{},"프로젝트 구조와 설정을 분석한다.",[226,476,477,480,483,486],{},[229,478,479],{},"Layer 병합",[229,481,482],{},"Module 등록",[229,484,485],{},"Auto Import 생성",[229,487,488],{},"TypeScript 설정 생성",[257,490],{},[468,492,494],{"id":493},"compile-단계","② Compile 단계",[196,496,497],{},"Vite를 통해 실제 애플리케이션 코드를 변환한다.",[226,499,500,503,506],{},[229,501,502],{},"Vue SFC 변환",[229,504,505],{},"TypeScript 처리",[229,507,508],{},"Bundle 생성",[257,510],{},[468,512,514],{"id":513},"nitro-단계","③ Nitro 단계",[196,516,517],{},"Nuxt의 서버 엔진인 Nitro가 배포 환경에 맞는 결과물을 생성한다.",[196,519,520],{},"SSR 방식에서는 이 단계에서 서버 실행 결과물이 만들어진다.",[257,522],{},[191,524,526],{"id":525},"_5-build와-generate의-차이","5. build와 generate의 차이",[196,528,529,530,532,533,535],{},"이번 배포 과정에서 가장 고민했던 부분은 ",[209,531,243],{},"와 ",[209,534,249],{},"의 차이였다.",[196,537,538],{},"둘은 비슷해 보이지만 결과적으로 배포 방식이 다르다.",[257,540],{},[191,542,544],{"id":543},"nuxt-build","nuxt build",[200,546,548],{"className":295,"code":547,"filename":297,"language":298,"meta":207,"style":207},"nuxi build\n",[209,549,550],{"__ignoreMap":207},[302,551,552,555],{"class":304,"line":305},[302,553,554],{"class":308},"nuxi",[302,556,557],{"class":312}," build\n",[196,559,560,562],{},[209,561,243],{},"는 서버 실행 환경을 포함한 애플리케이션을 생성한다.",[196,564,565],{},"흐름:",[200,567,571],{"className":568,"code":569,"filename":570,"language":206,"meta":207},[203],"사용자 요청\n\n↓\n\nNitro Server 실행\n\n↓\n\n페이지 생성\n\n↓\n\nHTML Response 반환\n","SSR Flow",[209,572,569],{"__ignoreMap":207},[196,574,575],{},"대표적으로 SSR(Server Side Rendering) 방식이다.",[196,577,578],{},"적합한 서비스:",[226,580,581,584,587],{},[229,582,583],{},"로그인 기반 서비스",[229,585,586],{},"실시간 데이터 서비스",[229,588,589],{},"사용자별 페이지",[196,591,592],{},"결과물:",[200,594,598],{"className":595,"code":596,"filename":597,"language":206,"meta":207},[203],".output\u002F\n","Output",[209,599,596],{"__ignoreMap":207},[257,601],{},[191,603,605],{"id":604},"nuxt-generate","nuxt generate",[200,607,609],{"className":295,"code":608,"filename":297,"language":298,"meta":207,"style":207},"nuxi generate\n",[209,610,611],{"__ignoreMap":207},[302,612,613,615],{"class":304,"line":305},[302,614,554],{"class":308},[302,616,617],{"class":312}," generate\n",[196,619,620,622],{},[209,621,249],{},"는 빌드 시점에 페이지를 미리 생성한다.",[196,624,565],{},[200,626,630],{"className":627,"code":628,"filename":629,"language":206,"meta":207},[203],"Build Time\n\n↓\n\n페이지 생성\n\n↓\n\nHTML 파일 생성\n\n↓\n\nStatic Hosting 배포\n","SSG Flow",[209,631,628],{"__ignoreMap":207},[196,633,634],{},"대표적으로 SSG(Static Site Generation) 방식이다.",[196,636,578],{},[226,638,639,642,645],{},[229,640,641],{},"블로그",[229,643,644],{},"문서 사이트",[229,646,647],{},"기술 아카이브",[196,649,650],{},"Brolog 역시 개발 기록과 기술 문서를 제공하는 목적이기 때문에 정적 생성 방식이 적합했다.",[257,652],{},[191,654,656],{"id":655},"_6-csr-ssr-ssg-isr-차이","6. CSR, SSR, SSG, ISR 차이",[196,658,659],{},"Nuxt에서 렌더링 방식을 이해하기 위해서는 CSR, SSR, SSG, ISR 차이를 이해해야 한다.",[661,662,663,679],"table",{},[664,665,666],"thead",{},[667,668,669,673,676],"tr",{},[670,671,672],"th",{},"방식",[670,674,675],{},"생성 시점",[670,677,678],{},"특징",[680,681,682,694,705,716],"tbody",{},[667,683,684,688,691],{},[685,686,687],"td",{},"CSR",[685,689,690],{},"브라우저 실행 시",[685,692,693],{},"SPA 구조, 초기 JS 로딩 필요",[667,695,696,699,702],{},[685,697,698],{},"SSR",[685,700,701],{},"요청 시 서버",[685,703,704],{},"최신 데이터 제공 가능",[667,706,707,710,713],{},[685,708,709],{},"SSG",[685,711,712],{},"빌드 시점",[685,714,715],{},"빠른 응답, 정적 콘텐츠 적합",[667,717,718,721,724],{},[685,719,720],{},"ISR",[685,722,723],{},"일부 재생성",[685,725,726],{},"SSG + 동적 갱신",[728,729,730,733,739,742,749],"blockquote",{},[196,731,732],{},"📌 추가 정리",[196,734,735,736,738],{},"이번 배포 과정에서는 ",[209,737,249],{},"를 선택하면서 SSG 방식으로 배포하게 되었지만, Nuxt는 하나의 렌더링 방식만 지원하는 프레임워크가 아니다.",[196,740,741],{},"CSR, SSR, SSG, ISR 각각의 차이와 Nuxt에서 이를 어떻게 선택하고 적용하는지는 별도의 글에서 정리한다.",[196,743,744,745],{},"👉 ",[746,747,111],"a",{"href":748},"\u002Fnote\u002Fweb\u002Frendering-modes",[196,750,744,751],{},[746,752,754],{"href":753},"\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","Nuxt 렌더링 방식 이해: SSR, SSG, ISR 구현 방법",[196,756,757],{},"Brolog 프로젝트 기준으로 보면:",[200,759,763],{"className":760,"code":761,"filename":762,"language":206,"meta":207},[203],"기술 블로그\n\n↓\n\nContent 중심 \u002F 변경 빈도 낮음\n\n↓\n\nSEO 중요\n\n↓\n\n정적 페이지 적합\n\n↓\n\nSSG(generate) 선택\n","Decision Flow",[209,764,761],{"__ignoreMap":207},[196,766,767],{},"이라는 판단이 가능했다.",[257,769],{},[191,771,773],{"id":772},"_7-이번-오류를-통해-이해한-nuxt-실행-구조","7. 이번 오류를 통해 이해한 Nuxt 실행 구조",[196,775,776],{},"이번 문제는 단순히 Vercel 설정을 변경해서 해결한 문제가 아니었다.",[196,778,779],{},"실제 원인은 다음 구조였다.",[200,781,785],{"className":782,"code":783,"filename":784,"language":206,"meta":207},[203],"Nuxt Multi Layer\n\n+\n\nVercel 신규 빌드 환경\n\n+\n\nLayer prepare 과정 필요\n","Cause Analysis",[209,786,783],{"__ignoreMap":207},[196,788,789,790,792],{},"로컬에서는 이미 생성되어 있던 ",[209,791,341],{}," 파일이 있었기 때문에 문제가 드러나지 않았다.",[196,794,795],{},"하지만 CI\u002FCD 환경에서는 항상 초기 상태에서 시작하기 때문에 Nuxt가 필요한 준비 과정을 명확하게 지정해야 한다.",[196,797,798],{},"최종 배포 흐름은 다음과 같다.",[200,800,804],{"className":801,"code":802,"filename":803,"language":206,"meta":207},[203],"Vercel Build Start\n\n↓\n\nlayer prepare\n\n↓\n\ndocs + layer 병합\n\n↓\n\nNuxt generate\n\n↓\n\nStatic Deployment\n","Deployment Flow",[209,805,802],{"__ignoreMap":207},[196,807,808,809,811],{},"이번 경험을 통해 Nuxt 프로젝트에서는 단순히 ",[209,810,243],{}," 명령어를 실행하는 것이 아니라,",[196,813,814],{},"프로젝트 구조와 배포 방식에 맞는 Build Pipeline을 이해하는 것이 중요하다는 것을 확인했다.",[816,817,818],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":207,"searchDepth":820,"depth":820,"links":821},2,[822,823,824],{"id":470,"depth":820,"text":471},{"id":493,"depth":820,"text":494},{"id":513,"depth":820,"text":514},"2026-07-22","Nuxt Multi Layer 프로젝트에서 발생한 layer .nuxt 생성 오류를 기반으로 Nuxt 실행 구조, nuxi prepare 과정, build와 generate의 차이를 분석","md",null,{"tags":830,"image":834},[43,831,832,833,698,709],"NuxtLayer","Vercel","BuildPipeline","\u002Fimages\u002Fbro-build-thumbnail.png",{"icon":26},{"title":837,"description":838},"Nuxt Multi Layer Build Pipeline과 nuxi prepare, build, generate 실행 구조 분석","Vercel 배포 과정에서 발생한 layer .nuxt 오류를 통해 Nuxt Layer 구조와 Build Pipeline, nuxi prepare, SSR, SSG, generate 동작 방식을 정리합니다.","ZduvCWUVy5SpB_CdG2MXsgLZgUfbf_DRj-ODLEHChkY",[841,843],{"title":160,"path":161,"stem":162,"description":842,"icon":26,"children":-1},"Nuxt Multi Layer 구조로 구성된 Brolog 프로젝트를 Vercel에 배포하며 발생한 빌드 오류와 해결 과정을 기록",{"title":178,"path":179,"stem":180,"description":844,"icon":26,"children":-1},"제한된 네트워크 환경에서 발생한 Nuxt Icon 모듈 오류 원인을 분석하고 Custom Collection을 활용해 로컬 아이콘 환경을 구성한 과정 정리",1785297529338]