[{"data":1,"prerenderedAt":1153},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-note-javascript-destructuring":195,"-ko-note-javascript-destructuring-surround":1148},[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":35,"body":197,"date":1132,"description":1133,"extension":1134,"links":1135,"meta":1136,"navigation":1143,"path":36,"seo":1144,"stem":37,"__hash__":1147},"docs_ko\u002Fko\u002F1.note\u002F1.javascript\u002F1.destructuring.md",{"type":198,"value":199,"toc":1117},"minimark",[200,1113],[201,202,204,209,227,234,237,242,245,350,360,454,456,460,471,482,484,489,497,581,584,593,595,599,602,644,647,654,657,659,663,666,669,736,739,741,745,748,797,800,807,810,812,816,819,869,871,878,881,883,887,890,998,1001,1008,1010,1014,1019,1024,1030,1033,1035,1039,1042,1049,1051,1055,1058,1064,1066,1070,1076,1083,1085,1089,1092,1097,1104,1107],"u-page-card",{":spotlight":203},"true",[205,206,208],"h1",{"id":207},"가독성과-퍼포먼스를-모두-잡는-모던-자바스크립트-비동기-패턴","가독성과 퍼포먼스를 모두 잡는 모던 자바스크립트 비동기 패턴",[210,211,212,221,222,226],"p",{},[213,214],"img",{"alt":215,"className":216,"src":219,"width":220},"자바스크립트 썸네일",[217,218],"mx-auto","mb-10","\u002Fimages\u002Fjavascript_thumbnail.png",450,"\n자바스크립트에서 복수의 비동기 데이터(API, 파일 시스템 등)를 처리할 때 단순히 ",[223,224,225],"code",{},"await","를 순차적으로 나열하는 방식은 동기적 정체를 유발한다.",[210,228,229,230,233],{},"모던 자바스크립트(ES6+)는 ",[223,231,232],{},"Promise.all","과 구조 분해 할당(Destructuring Assignment)을 결합하여, 여러 비동기 요청을 병렬로 처리함과 동시에 결과 배열의 깊은 오브젝트 내부 속성까지 한 줄로 추출하는 강력한 표현력을 제공한다.",[235,236],"hr",{},[238,239,241],"h2",{"id":240},"_1-순차적-await와-병렬-promiseall의-실행-흐름-차이","1. 순차적 await와 병렬 Promise.all의 실행 흐름 차이",[210,243,244],{},"독립적인 비동기 연산 여러 개를 연이어 수행할 때, 직관적으로 작성된 코드는 대개 앞선 연산이 끝나기를 기다리는 병목을 발생시킨다.",[246,247,253],"pre",{"className":248,"code":249,"filename":250,"language":251,"meta":252,"style":252},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\n\u002F\u002F ❌ 순차적 실행: 총 2초 이상 소요되는 비효율적인 패턴\nconst postsResult = await useAsyncData('posts', ...) \u002F\u002F 1초 대기\nconst navResult = await useAsyncData('nav', ...) \u002F\u002F 앞선 연산 종료 후 1초 대기\n","Sequential Async Pattern","js","",[223,254,255,264,271,318],{"__ignoreMap":252},[256,257,260],"span",{"class":258,"line":259},"line",1,[256,261,263],{"emptyLinePlaceholder":262},true,"\n",[256,265,267],{"class":258,"line":266},2,[256,268,270],{"class":269},"sHwdD","\u002F\u002F ❌ 순차적 실행: 총 2초 이상 소요되는 비효율적인 패턴\n",[256,272,274,278,282,286,290,294,297,300,304,306,309,312,315],{"class":258,"line":273},3,[256,275,277],{"class":276},"spNyl","const",[256,279,281],{"class":280},"sTEyZ"," postsResult ",[256,283,285],{"class":284},"sMK4o","=",[256,287,289],{"class":288},"s7zQu"," await",[256,291,293],{"class":292},"s2Zo4"," useAsyncData",[256,295,296],{"class":280},"(",[256,298,299],{"class":284},"'",[256,301,303],{"class":302},"sfazB","posts",[256,305,299],{"class":284},[256,307,308],{"class":284},",",[256,310,311],{"class":284}," ...",[256,313,314],{"class":280},") ",[256,316,317],{"class":269},"\u002F\u002F 1초 대기\n",[256,319,321,323,326,328,330,332,334,336,339,341,343,345,347],{"class":258,"line":320},4,[256,322,277],{"class":276},[256,324,325],{"class":280}," navResult ",[256,327,285],{"class":284},[256,329,289],{"class":288},[256,331,293],{"class":292},[256,333,296],{"class":280},[256,335,299],{"class":284},[256,337,338],{"class":302},"nav",[256,340,299],{"class":284},[256,342,308],{"class":284},[256,344,311],{"class":284},[256,346,314],{"class":280},[256,348,349],{"class":269},"\u002F\u002F 앞선 연산 종료 후 1초 대기\n",[210,351,352,353,355,356,359],{},"반면 ",[223,354,232],{},"은 인자로 전달된 Promise 배열을 동시에 실행하여 병렬 처리한다.\n",[357,358],"br",{},"모든 Promise가 Fulfilled 상태가 되는 시점에 결과값들을 원본 요청 순서에 맞는 배열 형태로 반환한다.",[246,361,364],{"className":248,"code":362,"filename":363,"language":251,"meta":252,"style":252},"\n\u002F\u002F ✨ 병렬 실행: 동시에 요청하여 총 1초 소요\nconst results = await Promise.all([\n  useAsyncData('posts', ...),\n  useAsyncData('nav', ...)\n])\n\u002F\u002F results => [posts의 결과 오브젝트, nav의 결과 오브젝트]\n","Parallel Promise Pattern",[223,365,366,370,375,399,422,442,448],{"__ignoreMap":252},[256,367,368],{"class":258,"line":259},[256,369,263],{"emptyLinePlaceholder":262},[256,371,372],{"class":258,"line":266},[256,373,374],{"class":269},"\u002F\u002F ✨ 병렬 실행: 동시에 요청하여 총 1초 소요\n",[256,376,377,379,382,384,386,390,393,396],{"class":258,"line":273},[256,378,277],{"class":276},[256,380,381],{"class":280}," results ",[256,383,285],{"class":284},[256,385,289],{"class":288},[256,387,389],{"class":388},"sBMFI"," Promise",[256,391,392],{"class":284},".",[256,394,395],{"class":292},"all",[256,397,398],{"class":280},"([\n",[256,400,401,404,406,408,410,412,414,416,419],{"class":258,"line":320},[256,402,403],{"class":292},"  useAsyncData",[256,405,296],{"class":280},[256,407,299],{"class":284},[256,409,303],{"class":302},[256,411,299],{"class":284},[256,413,308],{"class":284},[256,415,311],{"class":284},[256,417,418],{"class":280},")",[256,420,421],{"class":284},",\n",[256,423,425,427,429,431,433,435,437,439],{"class":258,"line":424},5,[256,426,403],{"class":292},[256,428,296],{"class":280},[256,430,299],{"class":284},[256,432,338],{"class":302},[256,434,299],{"class":284},[256,436,308],{"class":284},[256,438,311],{"class":284},[256,440,441],{"class":280},")\n",[256,443,445],{"class":258,"line":444},6,[256,446,447],{"class":280},"])\n",[256,449,451],{"class":258,"line":450},7,[256,452,453],{"class":269},"\u002F\u002F results => [posts의 결과 오브젝트, nav의 결과 오브젝트]\n",[235,455],{},[238,457,459],{"id":458},"_2-구조-분해-할당destructuring의-핵심-메커니즘","2. 구조 분해 할당(Destructuring)의 핵심 메커니즘",[210,461,462,463,466,467,470],{},"구조 분해 할당은 배열 리터럴(",[223,464,465],{},"[ ]",") 또는 객체 리터럴(",[223,468,469],{},"{ }",") 형태를 좌항에 선언하여 우항의 데이터 구조에서 필요한 값만 추출하는 문법이다.",[210,472,473,474,477,478,481],{},"단순히 ",[223,475,476],{},"results[0]","이나 ",[223,479,480],{},"results.data"," 같은 접근 코드를 줄이는 것이 아니라, 데이터 구조 자체를 코드에 표현하는 선언적인 방식이다.",[235,483],{},[485,486,488],"h3",{"id":487},"_2-1-배열-구조-분해-할당의-순서-매핑","📦 2-1) 배열 구조 분해 할당의 순서 매핑",[210,490,491,493,494,496],{},[223,492,232],{},"이 반환하는 결과는 순서가 보장되는 배열이다.\n",[357,495],{},"좌항에 배열 형태를 작성하면 우항 배열의 인덱스 순서에 따라 값이 자동으로 매핑된다.",[246,498,501],{"className":248,"code":499,"filename":500,"language":251,"meta":252,"style":252},"\u002F\u002F 배열의 0번째와 1번째 결과를 각각 변수에 할당\nconst [postsResult, navResult] = await Promise.all([\n  useAsyncData('posts', ...),\n  useAsyncData('nav', ...)\n])\n","Array Destructuring",[223,502,503,508,539,559,577],{"__ignoreMap":252},[256,504,505],{"class":258,"line":259},[256,506,507],{"class":269},"\u002F\u002F 배열의 0번째와 1번째 결과를 각각 변수에 할당\n",[256,509,510,512,515,518,520,523,526,529,531,533,535,537],{"class":258,"line":266},[256,511,277],{"class":276},[256,513,514],{"class":284}," [",[256,516,517],{"class":280},"postsResult",[256,519,308],{"class":284},[256,521,522],{"class":280}," navResult",[256,524,525],{"class":284},"]",[256,527,528],{"class":284}," =",[256,530,289],{"class":288},[256,532,389],{"class":388},[256,534,392],{"class":284},[256,536,395],{"class":292},[256,538,398],{"class":280},[256,540,541,543,545,547,549,551,553,555,557],{"class":258,"line":273},[256,542,403],{"class":292},[256,544,296],{"class":280},[256,546,299],{"class":284},[256,548,303],{"class":302},[256,550,299],{"class":284},[256,552,308],{"class":284},[256,554,311],{"class":284},[256,556,418],{"class":280},[256,558,421],{"class":284},[256,560,561,563,565,567,569,571,573,575],{"class":258,"line":320},[256,562,403],{"class":292},[256,564,296],{"class":280},[256,566,299],{"class":284},[256,568,338],{"class":302},[256,570,299],{"class":284},[256,572,308],{"class":284},[256,574,311],{"class":284},[256,576,441],{"class":280},[256,578,579],{"class":258,"line":424},[256,580,447],{"class":280},[210,582,583],{},"동작 구조:",[246,585,591],{"className":586,"code":588,"filename":589,"language":590,"meta":252},[587],"language-text","\nPromise.all 결과\n\n[\n  posts 결과,\n  nav 결과\n]\n\n↓\n\nconst [\n  postsResult,\n  navResult\n]\n\n↓\n\n각 변수에 순서대로 할당\n","Array Mapping Flow","text",[223,592,588],{"__ignoreMap":252},[235,594],{},[485,596,598],{"id":597},"️-2-2-객체-구조-분해-할당과-키key-매핑","🗂️ 2-2) 객체 구조 분해 할당과 키(Key) 매핑",[210,600,601],{},"객체 구조 분해 할당은 배열과 다르게 순서가 아닌 프로퍼티 Key를 기준으로 값을 찾는다.",[246,603,606],{"className":248,"code":604,"filename":605,"language":251,"meta":252,"style":252},"const {\n  data,\n  pending,\n  error\n} = result\n","Object Destructuring",[223,607,608,615,622,629,634],{"__ignoreMap":252},[256,609,610,612],{"class":258,"line":259},[256,611,277],{"class":276},[256,613,614],{"class":284}," {\n",[256,616,617,620],{"class":258,"line":266},[256,618,619],{"class":280},"  data",[256,621,421],{"class":284},[256,623,624,627],{"class":258,"line":273},[256,625,626],{"class":280},"  pending",[256,628,421],{"class":284},[256,630,631],{"class":258,"line":320},[256,632,633],{"class":280},"  error\n",[256,635,636,639,641],{"class":258,"line":424},[256,637,638],{"class":284},"}",[256,640,528],{"class":284},[256,642,643],{"class":280}," result\n",[210,645,646],{},"객체 내부 구조:",[246,648,652],{"className":649,"code":650,"filename":651,"language":590,"meta":252},[587],"{\n  data: [...],\n  pending: false,\n  error: null\n}\n\n↓\n\n{\n  data,\n  pending,\n  error\n}\n\n↓\n\n동일한 Key 기준으로 값 추출\n","Object Mapping Flow",[223,653,650],{"__ignoreMap":252},[210,655,656],{},"객체의 순서가 변경되어도 Key 이름만 동일하면 정상적으로 값을 가져온다.",[235,658],{},[238,660,662],{"id":661},"_3-중첩된-객체-구조-분해와-변수명-재정의aliasing","3. 중첩된 객체 구조 분해와 변수명 재정의(Aliasing)",[210,664,665],{},"비동기 데이터 처리 라이브러리는 단순한 데이터만 반환하지 않는다.",[210,667,668],{},"일반적으로 다음과 같은 Wrapper Object 형태를 반환한다.",[246,670,675],{"className":671,"code":672,"filename":673,"language":674,"meta":252,"style":252},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\n{\n  \"data\": [],\n  \"pending\": false,\n  \"error\": null\n}\n","Async Response Structure","json",[223,676,677,681,686,703,717,731],{"__ignoreMap":252},[256,678,679],{"class":258,"line":259},[256,680,263],{"emptyLinePlaceholder":262},[256,682,683],{"class":258,"line":266},[256,684,685],{"class":284},"{\n",[256,687,688,691,694,697,700],{"class":258,"line":273},[256,689,690],{"class":284},"  \"",[256,692,693],{"class":276},"data",[256,695,696],{"class":284},"\"",[256,698,699],{"class":284},":",[256,701,702],{"class":284}," [],\n",[256,704,705,707,710,712,714],{"class":258,"line":320},[256,706,690],{"class":284},[256,708,709],{"class":276},"pending",[256,711,696],{"class":284},[256,713,699],{"class":284},[256,715,716],{"class":284}," false,\n",[256,718,719,721,724,726,728],{"class":258,"line":424},[256,720,690],{"class":284},[256,722,723],{"class":276},"error",[256,725,696],{"class":284},[256,727,699],{"class":284},[256,729,730],{"class":284}," null\n",[256,732,733],{"class":258,"line":444},[256,734,735],{"class":284},"}\n",[210,737,738],{},"이 중 필요한 값만 추출하고 새로운 변수명을 지정할 수 있다.",[235,740],{},[485,742,744],{"id":743},"_3-1-️-변수명-재정의-aliasing","3-1) 🏷️ 변수명 재정의 (Aliasing)",[210,746,747],{},"객체 구조 분해에서는 다음과 같은 문법을 사용할 수 있다.",[246,749,752],{"className":248,"code":750,"filename":751,"language":251,"meta":252,"style":252},"\u002F\u002F data 속성을 posts라는 이름으로 변경\nconst { data: posts } = await useAsyncData('posts', ...)\n","Property Aliasing",[223,753,754,759],{"__ignoreMap":252},[256,755,756],{"class":258,"line":259},[256,757,758],{"class":269},"\u002F\u002F data 속성을 posts라는 이름으로 변경\n",[256,760,761,763,766,770,772,775,777,779,781,783,785,787,789,791,793,795],{"class":258,"line":266},[256,762,277],{"class":276},[256,764,765],{"class":284}," {",[256,767,769],{"class":768},"swJcz"," data",[256,771,699],{"class":284},[256,773,774],{"class":280}," posts ",[256,776,638],{"class":284},[256,778,528],{"class":284},[256,780,289],{"class":288},[256,782,293],{"class":292},[256,784,296],{"class":280},[256,786,299],{"class":284},[256,788,303],{"class":302},[256,790,299],{"class":284},[256,792,308],{"class":284},[256,794,311],{"class":284},[256,796,441],{"class":280},[210,798,799],{},"동작:",[246,801,805],{"className":802,"code":803,"filename":804,"language":590,"meta":252},[587],"\n{\n  data: [...]\n}\n\n↓\n\ndata 추출\n\n↓\n\nposts 변수에 할당\n","Aliasing Flow",[223,806,803],{"__ignoreMap":252},[210,808,809],{},"이를 통해 변수 이름 충돌을 방지하고 현재 Context에 맞는 이름을 사용할 수 있다.",[235,811],{},[485,813,815],{"id":814},"_3-2-️-기본값default-value-지정","3-2) 🛡️ 기본값(Default Value) 지정",[210,817,818],{},"구조 분해 할당에서는 값이 존재하지 않을 경우를 대비해 기본값을 지정할 수 있다.",[246,820,823],{"className":248,"code":821,"filename":822,"language":251,"meta":252,"style":252},"\u002F\u002F data가 undefined인 경우 빈 배열 사용\nconst { data: posts = [] } = await useAsyncData('posts', ...)\n","Default Value",[223,824,825,830],{"__ignoreMap":252},[256,826,827],{"class":258,"line":259},[256,828,829],{"class":269},"\u002F\u002F data가 undefined인 경우 빈 배열 사용\n",[256,831,832,834,836,838,840,842,844,847,849,851,853,855,857,859,861,863,865,867],{"class":258,"line":266},[256,833,277],{"class":276},[256,835,765],{"class":284},[256,837,769],{"class":768},[256,839,699],{"class":284},[256,841,774],{"class":280},[256,843,285],{"class":284},[256,845,846],{"class":280}," [] ",[256,848,638],{"class":284},[256,850,528],{"class":284},[256,852,289],{"class":288},[256,854,293],{"class":292},[256,856,296],{"class":280},[256,858,299],{"class":284},[256,860,303],{"class":302},[256,862,299],{"class":284},[256,864,308],{"class":284},[256,866,311],{"class":284},[256,868,441],{"class":280},[210,870,799],{},[246,872,876],{"className":873,"code":874,"filename":875,"language":590,"meta":252},[587],"\ndata 존재\n\n↓\n\ndata 값 사용\n\n\ndata 없음\n\n↓\n\n[] 기본값 사용\n","Default Value Flow",[223,877,874],{"__ignoreMap":252},[210,879,880],{},"비동기 요청 실패나 초기 렌더링 과정에서 안전하게 데이터를 처리할 수 있다.",[235,882],{},[238,884,886],{"id":885},"_4-최종-형태-복합-중첩-구조-분해","4. 최종 형태: 복합 중첩 구조 분해",[210,888,889],{},"배열 구조 분해 내부에 객체 구조 분해, Alias, 기본값 설정을 함께 적용하면 다음과 같은 형태가 된다.",[246,891,894],{"className":248,"code":892,"filename":893,"language":251,"meta":252,"style":252},"const [\n  { data: posts = [] },\n  { data: navData = [] }\n] = await Promise.all([\n  useAsyncData('main-posts-feed', ...),\n  useAsyncData('main-posts-nav', ...)\n])\n","Nested Destructuring Pattern",[223,895,896,903,921,938,954,975,994],{"__ignoreMap":252},[256,897,898,900],{"class":258,"line":259},[256,899,277],{"class":276},[256,901,902],{"class":284}," [\n",[256,904,905,908,910,912,914,916,918],{"class":258,"line":266},[256,906,907],{"class":284},"  {",[256,909,769],{"class":768},[256,911,699],{"class":284},[256,913,774],{"class":280},[256,915,285],{"class":284},[256,917,846],{"class":280},[256,919,920],{"class":284},"},\n",[256,922,923,925,927,929,932,934,936],{"class":258,"line":273},[256,924,907],{"class":284},[256,926,769],{"class":768},[256,928,699],{"class":284},[256,930,931],{"class":280}," navData ",[256,933,285],{"class":284},[256,935,846],{"class":280},[256,937,735],{"class":284},[256,939,940,942,944,946,948,950,952],{"class":258,"line":320},[256,941,525],{"class":284},[256,943,528],{"class":284},[256,945,289],{"class":288},[256,947,389],{"class":388},[256,949,392],{"class":284},[256,951,395],{"class":292},[256,953,398],{"class":280},[256,955,956,958,960,962,965,967,969,971,973],{"class":258,"line":424},[256,957,403],{"class":292},[256,959,296],{"class":280},[256,961,299],{"class":284},[256,963,964],{"class":302},"main-posts-feed",[256,966,299],{"class":284},[256,968,308],{"class":284},[256,970,311],{"class":284},[256,972,418],{"class":280},[256,974,421],{"class":284},[256,976,977,979,981,983,986,988,990,992],{"class":258,"line":444},[256,978,403],{"class":292},[256,980,296],{"class":280},[256,982,299],{"class":284},[256,984,985],{"class":302},"main-posts-nav",[256,987,299],{"class":284},[256,989,308],{"class":284},[256,991,311],{"class":284},[256,993,441],{"class":280},[256,995,996],{"class":258,"line":450},[256,997,447],{"class":280},[210,999,1000],{},"위 코드는 다음 과정을 한 번에 수행한다.",[246,1002,1006],{"className":1003,"code":1004,"filename":1005,"language":590,"meta":252},[587],"\nPromise.all 실행\n\n↓\n\n[\n  posts Response Object,\n  nav Response Object\n]\n\n↓\n\n첫 번째 객체에서 data 추출\n\n↓\n\nposts 변수 저장\n\n\n두 번째 객체에서 data 추출\n\n↓\n\nnavData 변수 저장\n","Nested Destructuring Flow",[223,1007,1004],{"__ignoreMap":252},[235,1009],{},[485,1011,1013],{"id":1012},"동작-프로세스-분석","🔍 동작 프로세스 분석",[1015,1016,1018],"h4",{"id":1017},"_1-병렬-요청","1. 병렬 요청",[210,1020,1021,1023],{},[223,1022,232],{}," 내부의 비동기 함수들이 동시에 실행된다.",[246,1025,1028],{"className":1026,"code":1027,"language":590,"meta":252},[587],"Request A 시작\n+\nRequest B 시작\n",[223,1029,1027],{"__ignoreMap":252},[210,1031,1032],{},"순차 실행이 아니기 때문에 전체 실행 시간은 가장 오래 걸리는 요청 기준으로 결정된다.",[235,1034],{},[1015,1036,1038],{"id":1037},"_2-결과-배열-생성","2. 결과 배열 생성",[210,1040,1041],{},"모든 Promise가 완료되면 Promise.all은 결과 배열을 반환한다.",[246,1043,1047],{"className":1044,"code":1045,"filename":1046,"language":590,"meta":252},[587],"[\n  Response Object A,\n  Response Object B\n]\n","Promise.all Result",[223,1048,1045],{"__ignoreMap":252},[235,1050],{},[1015,1052,1054],{"id":1053},"_3-배열-분해","3. 배열 분해",[210,1056,1057],{},"좌항의 배열 구조 분해가 실행되어 각각의 결과를 분리한다.",[246,1059,1062],{"className":1060,"code":1061,"language":590,"meta":252},[587],"[\n  Object A,\n  Object B\n]\n\n↓\n\n[\n  first,\n  second\n]\n",[223,1063,1061],{"__ignoreMap":252},[235,1065],{},[1015,1067,1069],{"id":1068},"_4-객체-내부-값-추출","4. 객체 내부 값 추출",[210,1071,1072,1073,1075],{},"각 Object 내부의 ",[223,1074,693],{}," 속성을 찾아 변수에 저장한다.",[246,1077,1081],{"className":1078,"code":1079,"filename":1080,"language":590,"meta":252},[587],"\nObject A.data\n\n↓\n\nposts\n\n\nObject B.data\n\n↓\n\nnavData\n","Final Binding",[223,1082,1079],{"__ignoreMap":252},[235,1084],{},[238,1086,1088],{"id":1087},"정리","📌 정리",[210,1090,1091],{},"복합 구조 분해 할당은 여러 단계에 걸쳐 작성해야 했던 데이터 접근 코드를 하나의 선언으로 표현할 수 있게 해준다.",[210,1093,1094,1096],{},[223,1095,232],{},"과 함께 사용하면 다음과 같은 장점을 얻을 수 있다.",[246,1098,1102],{"className":1099,"code":1100,"filename":1101,"language":590,"meta":252},[587],"\nPromise.all\n\n↓\n\n비동기 요청 병렬 처리\n\n+\n\nDestructuring\n\n↓\n\n필요한 데이터만 추출\n\n+\n\nAliasing\n\n↓\n\n명확한 변수명 사용\n\n+\n\nDefault Value\n\n↓\n\n안정적인 예외 처리\n","Async Pattern Benefits",[223,1103,1100],{"__ignoreMap":252},[210,1105,1106],{},"결과적으로 모던 자바스크립트의 비동기 패턴은 단순히 실행 속도를 개선하는 것을 넘어, 복잡한 데이터 흐름을 더 읽기 쉽고 유지보수 가능한 코드로 표현할 수 있도록 발전했다.",[210,1108,1109,1110,1112],{},"특히 Nuxt와 같은 데이터 페칭 기반 프레임워크에서는 여러 API 요청을 동시에 처리하고 필요한 상태만 추출하는 패턴이 자주 사용되므로, ",[223,1111,232],{},"과 구조 분해 할당 조합은 중요한 개발 패턴으로 활용된다.",[1114,1115,1116],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":252,"searchDepth":266,"depth":266,"links":1118},[1119,1120,1124,1128,1131],{"id":240,"depth":266,"text":241},{"id":458,"depth":266,"text":459,"children":1121},[1122,1123],{"id":487,"depth":273,"text":488},{"id":597,"depth":273,"text":598},{"id":661,"depth":266,"text":662,"children":1125},[1126,1127],{"id":743,"depth":273,"text":744},{"id":814,"depth":273,"text":815},{"id":885,"depth":266,"text":886,"children":1129},[1130],{"id":1012,"depth":273,"text":1013},{"id":1087,"depth":266,"text":1088},"2026-07-10","비동기 요청 결과를 구조 분해하고 객체 형태로 매핑하는 JavaScript 데이터 처리 방식 분석","md",null,{"tags":1137,"image":1142},[1138,1139,1140,1141],"JavaScript","ES6","Asynchronous","Destructuring","images\u002Fjavascript_thumbnail.png",{"icon":26},{"title":1145,"description":1146},"Promise.all 데이터 처리와 JavaScript 객체 매핑 패턴","Promise.all 결과를 구조 분해 할당과 객체 매핑으로 처리하는 효율적인 데이터 가공 방법을 정리합니다.","T3AKq_ikxIDVtdfa0ql6PcU_z839XjtWWTNsl9HCxu0",[1149,1151],{"title":23,"path":24,"stem":25,"description":1150,"icon":26,"children":-1},"Spring AI가 제공하는 AI 서비스 추상화 구조와 LLM, Vector DB 연동 방식, 실무에서 활용되는 주요 개발 패턴 정리",{"title":39,"path":40,"stem":41,"description":1152,"icon":26,"children":-1},"map, filter, some 등 배열 고차 함수의 동작 원리와 filter(Boolean) 패턴을 활용한 데이터 가공 방법 정리",1785305903682]