[{"data":1,"prerenderedAt":3758},["ShallowReactive",2],{"blog-post-\u002Fko\u002Fjavascript-higher-order-functions":3,"blog-related-source":3450},{"id":4,"title":5,"body":6,"description":3438,"extension":3439,"meta":3440,"navigation":514,"path":3445,"seo":3446,"sitemap":3447,"stem":3448,"__hash__":3449},"ko\u002Fko\u002Fjavascript-higher-order-functions.md","자바스크립트 고차 함수 완전 정복: map, filter, reduce부터 직접 만드는 once, memoize까지",{"type":7,"value":8,"toc":3407},"minimark",[9,18,22,65,71,79,94,97,101,111,114,164,167,226,228,232,235,386,389,624,637,648,1476,1481,1629,1635,1640,1708,1720,1722,1726,1729,1733,1846,1856,1862,1865,2062,2068,2071,2287,2291,2294,2497,2505,2507,2511,2517,2702,2709,2711,2715,2722,2828,2838,2840,2844,2852,2869,2932,2935,3003,3018,3025,3085,3093,3101,3121,3203,3265,3272,3290,3292,3296,3385,3403],[10,11,13,17],"h2",{"id":12},"_1-2-3mapparseint의-결과는",[14,15,16],"code",{},"['1', '2', '3'].map(parseInt)","의 결과는?",[19,20,21],"p",{},"먼저 퀴즈 하나. 문자열 배열을 숫자로 바꾸려고 이렇게 썼다.",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-js shiki shiki-themes github-light github-dark","[\"1\", \"2\", \"3\"].map(parseInt);\n","js","",[14,30,31],{"__ignoreMap":28},[32,33,36,40,44,47,50,52,55,58,62],"span",{"class":34,"line":35},"line",1,[32,37,39],{"class":38},"sVt8B","[",[32,41,43],{"class":42},"sZZnC","\"1\"",[32,45,46],{"class":38},", ",[32,48,49],{"class":42},"\"2\"",[32,51,46],{"class":38},[32,53,54],{"class":42},"\"3\"",[32,56,57],{"class":38},"].",[32,59,61],{"class":60},"sScJk","map",[32,63,64],{"class":38},"(parseInt);\n",[19,66,67,70],{},[14,68,69],{},"[1, 2, 3]","을 기대했겠지만 실제 결과는 이렇다.",[23,72,77],{"className":73,"code":75,"language":76},[74],"language-text","[1, NaN, NaN]\n","text",[14,78,75],{"__ignoreMap":28},[19,80,81,82,86,87,89,90,93],{},"이유는 글 뒷부분에서 풀어보고, 우선 이 코드의 주인공인 ",[83,84,85],"strong",{},"고차 함수","부터 알아보자. ",[14,88,61],{},"도, 우리가 매일 쓰는 ",[14,91,92],{},"addEventListener","도 전부 고차 함수다.",[95,96],"hr",{},[10,98,100],{"id":99},"고차-함수란","고차 함수란?",[102,103,104],"blockquote",{},[19,105,106,107,110],{},"고차 함수(Higher-Order Function)는 ",[83,108,109],{},"함수를 인자로 받거나, 함수를 반환하는 함수","다.",[19,112,113],{},"자바스크립트에서 이게 가능한 이유는 함수가 일급 객체(First-Class Object)이기 때문이다. 함수를 숫자나 문자열 같은 다른 값과 똑같이 다룰 수 있다는 뜻이다.",[115,116,117,130],"table",{},[118,119,120],"thead",{},[121,122,123,127],"tr",{},[124,125,126],"th",{},"일급 객체의 조건",[124,128,129],{},"자바스크립트 예시",[131,132,133,144,154],"tbody",{},[121,134,135,139],{},[136,137,138],"td",{},"변수에 담을 수 있다",[136,140,141],{},[14,142,143],{},"const greet = () => \"hi\";",[121,145,146,149],{},[136,147,148],{},"다른 함수의 인자로 넘길 수 있다",[136,150,151],{},[14,152,153],{},"button.addEventListener(\"click\", greet);",[121,155,156,159],{},[136,157,158],{},"다른 함수의 반환값이 될 수 있다",[136,160,161],{},[14,162,163],{},"const make = () => () => \"hi\";",[19,165,166],{},"고차 함수는 크게 두 종류로 나뉜다.",[115,168,169,179],{},[118,170,171],{},[121,172,173,176],{},[124,174,175],{},"종류",[124,177,178],{},"예시",[131,180,181,205],{},[121,182,183,190],{},[136,184,185,186,189],{},"함수를 ",[83,187,188],{},"인자로 받는"," 고차 함수",[136,191,192,46,194,46,197,46,200,46,203],{},[14,193,61],{},[14,195,196],{},"filter",[14,198,199],{},"reduce",[14,201,202],{},"setTimeout",[14,204,92],{},[121,206,207,212],{},[136,208,185,209,189],{},[83,210,211],{},"반환하는",[136,213,214,46,217,46,220,46,223],{},[14,215,216],{},"debounce",[14,218,219],{},"once",[14,221,222],{},"memoize",[14,224,225],{},"bind",[95,227],{},[10,229,231],{"id":230},"_1-함수를-인자로-받는-고차-함수-배열-메서드","1. 함수를 인자로 받는 고차 함수: 배열 메서드",[19,233,234],{},"가장 자주 쓰는 고차 함수는 배열 메서드다. 아래 상품 데이터로 연습해보자.",[23,236,238],{"className":25,"code":237,"language":27,"meta":28,"style":28},"const products = [\n  { name: \"키보드\", price: 89000, category: \"전자기기\", inStock: true },\n  { name: \"마우스\", price: 39000, category: \"전자기기\", inStock: false },\n  { name: \"머그컵\", price: 12000, category: \"생활용품\", inStock: true },\n  { name: \"모니터\", price: 259000, category: \"전자기기\", inStock: true },\n  { name: \"텀블러\", price: 25000, category: \"생활용품\", inStock: true },\n];\n",[14,239,240,256,286,310,334,357,380],{"__ignoreMap":28},[32,241,242,246,250,253],{"class":34,"line":35},[32,243,245],{"class":244},"szBVR","const",[32,247,249],{"class":248},"sj4cs"," products",[32,251,252],{"class":244}," =",[32,254,255],{"class":38}," [\n",[32,257,259,262,265,268,271,274,277,280,283],{"class":34,"line":258},2,[32,260,261],{"class":38},"  { name: ",[32,263,264],{"class":42},"\"키보드\"",[32,266,267],{"class":38},", price: ",[32,269,270],{"class":248},"89000",[32,272,273],{"class":38},", category: ",[32,275,276],{"class":42},"\"전자기기\"",[32,278,279],{"class":38},", inStock: ",[32,281,282],{"class":248},"true",[32,284,285],{"class":38}," },\n",[32,287,289,291,294,296,299,301,303,305,308],{"class":34,"line":288},3,[32,290,261],{"class":38},[32,292,293],{"class":42},"\"마우스\"",[32,295,267],{"class":38},[32,297,298],{"class":248},"39000",[32,300,273],{"class":38},[32,302,276],{"class":42},[32,304,279],{"class":38},[32,306,307],{"class":248},"false",[32,309,285],{"class":38},[32,311,313,315,318,320,323,325,328,330,332],{"class":34,"line":312},4,[32,314,261],{"class":38},[32,316,317],{"class":42},"\"머그컵\"",[32,319,267],{"class":38},[32,321,322],{"class":248},"12000",[32,324,273],{"class":38},[32,326,327],{"class":42},"\"생활용품\"",[32,329,279],{"class":38},[32,331,282],{"class":248},[32,333,285],{"class":38},[32,335,337,339,342,344,347,349,351,353,355],{"class":34,"line":336},5,[32,338,261],{"class":38},[32,340,341],{"class":42},"\"모니터\"",[32,343,267],{"class":38},[32,345,346],{"class":248},"259000",[32,348,273],{"class":38},[32,350,276],{"class":42},[32,352,279],{"class":38},[32,354,282],{"class":248},[32,356,285],{"class":38},[32,358,360,362,365,367,370,372,374,376,378],{"class":34,"line":359},6,[32,361,261],{"class":38},[32,363,364],{"class":42},"\"텀블러\"",[32,366,267],{"class":38},[32,368,369],{"class":248},"25000",[32,371,273],{"class":38},[32,373,327],{"class":42},[32,375,279],{"class":38},[32,377,282],{"class":248},[32,379,285],{"class":38},[32,381,383],{"class":34,"line":382},7,[32,384,385],{"class":38},"];\n",[19,387,388],{},"\"재고 있는 상품의 이름 목록\"과 \"재고 있는 상품의 총액\"을 구해보자.",[23,390,392],{"className":25,"code":391,"language":27,"meta":28,"style":28},"\u002F\u002F for 문으로 쓰면\nconst names = [];\nlet total = 0;\nfor (let i = 0; i \u003C products.length; i++) {\n  if (products[i].inStock) {\n    names.push(products[i].name);\n    total += products[i].price;\n  }\n}\n\n\u002F\u002F 고차 함수로 쓰면\nconst inStock = products.filter((p) => p.inStock);\nconst names = inStock.map((p) => p.name); \u002F\u002F ['키보드', '머그컵', '모니터', '텀블러']\nconst total = inStock.reduce((sum, p) => sum + p.price, 0); \u002F\u002F 385000\n",[14,393,394,400,412,429,467,475,486,497,503,509,516,522,551,579],{"__ignoreMap":28},[32,395,396],{"class":34,"line":35},[32,397,399],{"class":398},"sJ8bj","\u002F\u002F for 문으로 쓰면\n",[32,401,402,404,407,409],{"class":34,"line":258},[32,403,245],{"class":244},[32,405,406],{"class":248}," names",[32,408,252],{"class":244},[32,410,411],{"class":38}," [];\n",[32,413,414,417,420,423,426],{"class":34,"line":288},[32,415,416],{"class":244},"let",[32,418,419],{"class":38}," total ",[32,421,422],{"class":244},"=",[32,424,425],{"class":248}," 0",[32,427,428],{"class":38},";\n",[32,430,431,434,437,439,442,444,446,449,452,455,458,461,464],{"class":34,"line":312},[32,432,433],{"class":244},"for",[32,435,436],{"class":38}," (",[32,438,416],{"class":244},[32,440,441],{"class":38}," i ",[32,443,422],{"class":244},[32,445,425],{"class":248},[32,447,448],{"class":38},"; i ",[32,450,451],{"class":244},"\u003C",[32,453,454],{"class":38}," products.",[32,456,457],{"class":248},"length",[32,459,460],{"class":38},"; i",[32,462,463],{"class":244},"++",[32,465,466],{"class":38},") {\n",[32,468,469,472],{"class":34,"line":336},[32,470,471],{"class":244},"  if",[32,473,474],{"class":38}," (products[i].inStock) {\n",[32,476,477,480,483],{"class":34,"line":359},[32,478,479],{"class":38},"    names.",[32,481,482],{"class":60},"push",[32,484,485],{"class":38},"(products[i].name);\n",[32,487,488,491,494],{"class":34,"line":382},[32,489,490],{"class":38},"    total ",[32,492,493],{"class":244},"+=",[32,495,496],{"class":38}," products[i].price;\n",[32,498,500],{"class":34,"line":499},8,[32,501,502],{"class":38},"  }\n",[32,504,506],{"class":34,"line":505},9,[32,507,508],{"class":38},"}\n",[32,510,512],{"class":34,"line":511},10,[32,513,515],{"emptyLinePlaceholder":514},true,"\n",[32,517,519],{"class":34,"line":518},11,[32,520,521],{"class":398},"\u002F\u002F 고차 함수로 쓰면\n",[32,523,525,527,530,532,534,536,539,542,545,548],{"class":34,"line":524},12,[32,526,245],{"class":244},[32,528,529],{"class":248}," inStock",[32,531,252],{"class":244},[32,533,454],{"class":38},[32,535,196],{"class":60},[32,537,538],{"class":38},"((",[32,540,19],{"class":541},"s4XuR",[32,543,544],{"class":38},") ",[32,546,547],{"class":244},"=>",[32,549,550],{"class":38}," p.inStock);\n",[32,552,554,556,558,560,563,565,567,569,571,573,576],{"class":34,"line":553},13,[32,555,245],{"class":244},[32,557,406],{"class":248},[32,559,252],{"class":244},[32,561,562],{"class":38}," inStock.",[32,564,61],{"class":60},[32,566,538],{"class":38},[32,568,19],{"class":541},[32,570,544],{"class":38},[32,572,547],{"class":244},[32,574,575],{"class":38}," p.name); ",[32,577,578],{"class":398},"\u002F\u002F ['키보드', '머그컵', '모니터', '텀블러']\n",[32,580,582,584,587,589,591,593,595,598,600,602,604,606,609,612,615,618,621],{"class":34,"line":581},14,[32,583,245],{"class":244},[32,585,586],{"class":248}," total",[32,588,252],{"class":244},[32,590,562],{"class":38},[32,592,199],{"class":60},[32,594,538],{"class":38},[32,596,597],{"class":541},"sum",[32,599,46],{"class":38},[32,601,19],{"class":541},[32,603,544],{"class":38},[32,605,547],{"class":244},[32,607,608],{"class":38}," sum ",[32,610,611],{"class":244},"+",[32,613,614],{"class":38}," p.price, ",[32,616,617],{"class":248},"0",[32,619,620],{"class":38},"); ",[32,622,623],{"class":398},"\u002F\u002F 385000\n",[19,625,626,628,629,632,633,636],{},[14,627,433],{}," 문은 ",[83,630,631],{},"어떻게"," 반복할지(인덱스, 조건, push)를 일일이 적어야 한다. 고차 함수는 ",[83,634,635],{},"무엇을"," 할지(거르고, 바꾸고, 합친다)만 적는다. 코드가 의도를 그대로 말해준다.",[19,638,639,640,642,643,642,645,647],{},"아래 미리보기에서 체크박스와 슬라이더를 움직여보자. 값이 바뀔 때마다 ",[14,641,196],{}," → ",[14,644,61],{},[14,646,199],{},"가 다시 실행된다.",[649,650,651,839,966],"code-group",{},[23,652,656],{"className":653,"code":654,"language":655,"meta":28,"style":28},"language-html shiki shiki-themes github-light github-dark","\u003Clabel>\u003Cinput type=\"checkbox\" id=\"stock\" checked \u002F> 재고 있는 상품만\u003C\u002Flabel>\n\u003Clabel class=\"range\">\n  최대 가격 \u003Cinput type=\"range\" id=\"max\" min=\"10000\" max=\"300000\" step=\"10000\" value=\"100000\" \u002F>\n  \u003Coutput id=\"maxOut\">\u003C\u002Foutput>\n\u003C\u002Flabel>\n\u003Cul id=\"list\">\u003C\u002Ful>\n\u003Cp id=\"total\">\u003C\u002Fp>\n","html",[14,657,658,699,715,769,791,800,820],{"__ignoreMap":28},[32,659,660,662,666,669,672,675,677,680,683,685,688,691,694,696],{"class":34,"line":35},[32,661,451],{"class":38},[32,663,665],{"class":664},"s9eBZ","label",[32,667,668],{"class":38},">\u003C",[32,670,671],{"class":664},"input",[32,673,674],{"class":60}," type",[32,676,422],{"class":38},[32,678,679],{"class":42},"\"checkbox\"",[32,681,682],{"class":60}," id",[32,684,422],{"class":38},[32,686,687],{"class":42},"\"stock\"",[32,689,690],{"class":60}," checked",[32,692,693],{"class":38}," \u002F> 재고 있는 상품만\u003C\u002F",[32,695,665],{"class":664},[32,697,698],{"class":38},">\n",[32,700,701,703,705,708,710,713],{"class":34,"line":258},[32,702,451],{"class":38},[32,704,665],{"class":664},[32,706,707],{"class":60}," class",[32,709,422],{"class":38},[32,711,712],{"class":42},"\"range\"",[32,714,698],{"class":38},[32,716,717,720,722,724,726,728,730,732,735,738,740,743,746,748,751,754,756,758,761,763,766],{"class":34,"line":288},[32,718,719],{"class":38},"  최대 가격 \u003C",[32,721,671],{"class":664},[32,723,674],{"class":60},[32,725,422],{"class":38},[32,727,712],{"class":42},[32,729,682],{"class":60},[32,731,422],{"class":38},[32,733,734],{"class":42},"\"max\"",[32,736,737],{"class":60}," min",[32,739,422],{"class":38},[32,741,742],{"class":42},"\"10000\"",[32,744,745],{"class":60}," max",[32,747,422],{"class":38},[32,749,750],{"class":42},"\"300000\"",[32,752,753],{"class":60}," step",[32,755,422],{"class":38},[32,757,742],{"class":42},[32,759,760],{"class":60}," value",[32,762,422],{"class":38},[32,764,765],{"class":42},"\"100000\"",[32,767,768],{"class":38}," \u002F>\n",[32,770,771,774,777,779,781,784,787,789],{"class":34,"line":312},[32,772,773],{"class":38},"  \u003C",[32,775,776],{"class":664},"output",[32,778,682],{"class":60},[32,780,422],{"class":38},[32,782,783],{"class":42},"\"maxOut\"",[32,785,786],{"class":38},">\u003C\u002F",[32,788,776],{"class":664},[32,790,698],{"class":38},[32,792,793,796,798],{"class":34,"line":336},[32,794,795],{"class":38},"\u003C\u002F",[32,797,665],{"class":664},[32,799,698],{"class":38},[32,801,802,804,807,809,811,814,816,818],{"class":34,"line":359},[32,803,451],{"class":38},[32,805,806],{"class":664},"ul",[32,808,682],{"class":60},[32,810,422],{"class":38},[32,812,813],{"class":42},"\"list\"",[32,815,786],{"class":38},[32,817,806],{"class":664},[32,819,698],{"class":38},[32,821,822,824,826,828,830,833,835,837],{"class":34,"line":382},[32,823,451],{"class":38},[32,825,19],{"class":664},[32,827,682],{"class":60},[32,829,422],{"class":38},[32,831,832],{"class":42},"\"total\"",[32,834,786],{"class":38},[32,836,19],{"class":664},[32,838,698],{"class":38},[23,840,844],{"className":841,"code":842,"language":843,"meta":28,"style":28},"language-css shiki shiki-themes github-light github-dark","label { display: block; margin-bottom: 8px; }\n.range input { vertical-align: middle; }\nul { padding-left: 20px; margin: 12px 0; }\n#total { font-weight: 700; color: #b45309; margin: 0; }\n","css",[14,845,846,879,899,931],{"__ignoreMap":28},[32,847,848,850,853,856,859,862,865,868,870,873,876],{"class":34,"line":35},[32,849,665],{"class":664},[32,851,852],{"class":38}," { ",[32,854,855],{"class":248},"display",[32,857,858],{"class":38},": ",[32,860,861],{"class":248},"block",[32,863,864],{"class":38},"; ",[32,866,867],{"class":248},"margin-bottom",[32,869,858],{"class":38},[32,871,872],{"class":248},"8",[32,874,875],{"class":244},"px",[32,877,878],{"class":38},"; }\n",[32,880,881,884,887,889,892,894,897],{"class":34,"line":258},[32,882,883],{"class":60},".range",[32,885,886],{"class":664}," input",[32,888,852],{"class":38},[32,890,891],{"class":248},"vertical-align",[32,893,858],{"class":38},[32,895,896],{"class":248},"middle",[32,898,878],{"class":38},[32,900,901,903,905,908,910,913,915,917,920,922,925,927,929],{"class":34,"line":288},[32,902,806],{"class":664},[32,904,852],{"class":38},[32,906,907],{"class":248},"padding-left",[32,909,858],{"class":38},[32,911,912],{"class":248},"20",[32,914,875],{"class":244},[32,916,864],{"class":38},[32,918,919],{"class":248},"margin",[32,921,858],{"class":38},[32,923,924],{"class":248},"12",[32,926,875],{"class":244},[32,928,425],{"class":248},[32,930,878],{"class":38},[32,932,933,936,938,941,943,946,948,951,953,956,958,960,962,964],{"class":34,"line":312},[32,934,935],{"class":60},"#total",[32,937,852],{"class":38},[32,939,940],{"class":248},"font-weight",[32,942,858],{"class":38},[32,944,945],{"class":248},"700",[32,947,864],{"class":38},[32,949,950],{"class":248},"color",[32,952,858],{"class":38},[32,954,955],{"class":248},"#b45309",[32,957,864],{"class":38},[32,959,919],{"class":248},[32,961,858],{"class":38},[32,963,617],{"class":248},[32,965,878],{"class":38},[23,967,969],{"className":25,"code":968,"language":27,"meta":28,"style":28},"const products = [\n  { name: \"키보드\", price: 89000, inStock: true },\n  { name: \"마우스\", price: 39000, inStock: false },\n  { name: \"머그컵\", price: 12000, inStock: true },\n  { name: \"모니터\", price: 259000, inStock: true },\n  { name: \"텀블러\", price: 25000, inStock: true },\n];\nconst $ = (s) => document.querySelector(s);\nconst won = (n) => n.toLocaleString(\"ko-KR\") + \"원\";\n\nfunction render() {\n  const max = Number($(\"#max\").value);\n  const visible = products\n    .filter((p) => !$(\"#stock\").checked || p.inStock)\n    .filter((p) => p.price \u003C= max);\n\n  $(\"#maxOut\").textContent = won(max);\n  $(\"#list\").innerHTML = visible.map((p) => `\u003Cli>${p.name} · ${won(p.price)}\u003C\u002Fli>`).join(\"\");\n  const total = visible.reduce((sum, p) => sum + p.price, 0);\n  $(\"#total\").textContent = `${visible.length}개 · 합계 ${won(total)}`;\n}\n\ndocument.querySelectorAll(\"input\").forEach((el) => el.addEventListener(\"input\", render));\nrender();\n",[14,970,971,981,997,1013,1029,1045,1061,1065,1092,1131,1135,1146,1171,1183,1217,1241,1246,1267,1341,1376,1417,1422,1427,1467],{"__ignoreMap":28},[32,972,973,975,977,979],{"class":34,"line":35},[32,974,245],{"class":244},[32,976,249],{"class":248},[32,978,252],{"class":244},[32,980,255],{"class":38},[32,982,983,985,987,989,991,993,995],{"class":34,"line":258},[32,984,261],{"class":38},[32,986,264],{"class":42},[32,988,267],{"class":38},[32,990,270],{"class":248},[32,992,279],{"class":38},[32,994,282],{"class":248},[32,996,285],{"class":38},[32,998,999,1001,1003,1005,1007,1009,1011],{"class":34,"line":288},[32,1000,261],{"class":38},[32,1002,293],{"class":42},[32,1004,267],{"class":38},[32,1006,298],{"class":248},[32,1008,279],{"class":38},[32,1010,307],{"class":248},[32,1012,285],{"class":38},[32,1014,1015,1017,1019,1021,1023,1025,1027],{"class":34,"line":312},[32,1016,261],{"class":38},[32,1018,317],{"class":42},[32,1020,267],{"class":38},[32,1022,322],{"class":248},[32,1024,279],{"class":38},[32,1026,282],{"class":248},[32,1028,285],{"class":38},[32,1030,1031,1033,1035,1037,1039,1041,1043],{"class":34,"line":336},[32,1032,261],{"class":38},[32,1034,341],{"class":42},[32,1036,267],{"class":38},[32,1038,346],{"class":248},[32,1040,279],{"class":38},[32,1042,282],{"class":248},[32,1044,285],{"class":38},[32,1046,1047,1049,1051,1053,1055,1057,1059],{"class":34,"line":359},[32,1048,261],{"class":38},[32,1050,364],{"class":42},[32,1052,267],{"class":38},[32,1054,369],{"class":248},[32,1056,279],{"class":38},[32,1058,282],{"class":248},[32,1060,285],{"class":38},[32,1062,1063],{"class":34,"line":382},[32,1064,385],{"class":38},[32,1066,1067,1069,1072,1074,1076,1079,1081,1083,1086,1089],{"class":34,"line":499},[32,1068,245],{"class":244},[32,1070,1071],{"class":60}," $",[32,1073,252],{"class":244},[32,1075,436],{"class":38},[32,1077,1078],{"class":541},"s",[32,1080,544],{"class":38},[32,1082,547],{"class":244},[32,1084,1085],{"class":38}," document.",[32,1087,1088],{"class":60},"querySelector",[32,1090,1091],{"class":38},"(s);\n",[32,1093,1094,1096,1099,1101,1103,1106,1108,1110,1113,1116,1119,1122,1124,1126,1129],{"class":34,"line":505},[32,1095,245],{"class":244},[32,1097,1098],{"class":60}," won",[32,1100,252],{"class":244},[32,1102,436],{"class":38},[32,1104,1105],{"class":541},"n",[32,1107,544],{"class":38},[32,1109,547],{"class":244},[32,1111,1112],{"class":38}," n.",[32,1114,1115],{"class":60},"toLocaleString",[32,1117,1118],{"class":38},"(",[32,1120,1121],{"class":42},"\"ko-KR\"",[32,1123,544],{"class":38},[32,1125,611],{"class":244},[32,1127,1128],{"class":42}," \"원\"",[32,1130,428],{"class":38},[32,1132,1133],{"class":34,"line":511},[32,1134,515],{"emptyLinePlaceholder":514},[32,1136,1137,1140,1143],{"class":34,"line":518},[32,1138,1139],{"class":244},"function",[32,1141,1142],{"class":60}," render",[32,1144,1145],{"class":38},"() {\n",[32,1147,1148,1151,1153,1155,1158,1160,1163,1165,1168],{"class":34,"line":524},[32,1149,1150],{"class":244},"  const",[32,1152,745],{"class":248},[32,1154,252],{"class":244},[32,1156,1157],{"class":60}," Number",[32,1159,1118],{"class":38},[32,1161,1162],{"class":60},"$",[32,1164,1118],{"class":38},[32,1166,1167],{"class":42},"\"#max\"",[32,1169,1170],{"class":38},").value);\n",[32,1172,1173,1175,1178,1180],{"class":34,"line":553},[32,1174,1150],{"class":244},[32,1176,1177],{"class":248}," visible",[32,1179,252],{"class":244},[32,1181,1182],{"class":38}," products\n",[32,1184,1185,1188,1190,1192,1194,1196,1198,1201,1203,1205,1208,1211,1214],{"class":34,"line":581},[32,1186,1187],{"class":38},"    .",[32,1189,196],{"class":60},[32,1191,538],{"class":38},[32,1193,19],{"class":541},[32,1195,544],{"class":38},[32,1197,547],{"class":244},[32,1199,1200],{"class":244}," !",[32,1202,1162],{"class":60},[32,1204,1118],{"class":38},[32,1206,1207],{"class":42},"\"#stock\"",[32,1209,1210],{"class":38},").checked ",[32,1212,1213],{"class":244},"||",[32,1215,1216],{"class":38}," p.inStock)\n",[32,1218,1220,1222,1224,1226,1228,1230,1232,1235,1238],{"class":34,"line":1219},15,[32,1221,1187],{"class":38},[32,1223,196],{"class":60},[32,1225,538],{"class":38},[32,1227,19],{"class":541},[32,1229,544],{"class":38},[32,1231,547],{"class":244},[32,1233,1234],{"class":38}," p.price ",[32,1236,1237],{"class":244},"\u003C=",[32,1239,1240],{"class":38}," max);\n",[32,1242,1244],{"class":34,"line":1243},16,[32,1245,515],{"emptyLinePlaceholder":514},[32,1247,1249,1252,1254,1257,1260,1262,1264],{"class":34,"line":1248},17,[32,1250,1251],{"class":60},"  $",[32,1253,1118],{"class":38},[32,1255,1256],{"class":42},"\"#maxOut\"",[32,1258,1259],{"class":38},").textContent ",[32,1261,422],{"class":244},[32,1263,1098],{"class":60},[32,1265,1266],{"class":38},"(max);\n",[32,1268,1270,1272,1274,1277,1280,1282,1285,1287,1289,1291,1293,1295,1298,1300,1303,1306,1309,1312,1314,1316,1318,1321,1324,1327,1330,1333,1335,1338],{"class":34,"line":1269},18,[32,1271,1251],{"class":60},[32,1273,1118],{"class":38},[32,1275,1276],{"class":42},"\"#list\"",[32,1278,1279],{"class":38},").innerHTML ",[32,1281,422],{"class":244},[32,1283,1284],{"class":38}," visible.",[32,1286,61],{"class":60},[32,1288,538],{"class":38},[32,1290,19],{"class":541},[32,1292,544],{"class":38},[32,1294,547],{"class":244},[32,1296,1297],{"class":42}," `\u003Cli>${",[32,1299,19],{"class":38},[32,1301,1302],{"class":42},".",[32,1304,1305],{"class":38},"name",[32,1307,1308],{"class":42},"} · ${",[32,1310,1311],{"class":60},"won",[32,1313,1118],{"class":42},[32,1315,19],{"class":38},[32,1317,1302],{"class":42},[32,1319,1320],{"class":38},"price",[32,1322,1323],{"class":42},")",[32,1325,1326],{"class":42},"}\u003C\u002Fli>`",[32,1328,1329],{"class":38},").",[32,1331,1332],{"class":60},"join",[32,1334,1118],{"class":38},[32,1336,1337],{"class":42},"\"\"",[32,1339,1340],{"class":38},");\n",[32,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374],{"class":34,"line":1343},19,[32,1345,1150],{"class":244},[32,1347,586],{"class":248},[32,1349,252],{"class":244},[32,1351,1284],{"class":38},[32,1353,199],{"class":60},[32,1355,538],{"class":38},[32,1357,597],{"class":541},[32,1359,46],{"class":38},[32,1361,19],{"class":541},[32,1363,544],{"class":38},[32,1365,547],{"class":244},[32,1367,608],{"class":38},[32,1369,611],{"class":244},[32,1371,614],{"class":38},[32,1373,617],{"class":248},[32,1375,1340],{"class":38},[32,1377,1379,1381,1383,1386,1388,1390,1393,1396,1398,1400,1403,1405,1407,1410,1412,1415],{"class":34,"line":1378},20,[32,1380,1251],{"class":60},[32,1382,1118],{"class":38},[32,1384,1385],{"class":42},"\"#total\"",[32,1387,1259],{"class":38},[32,1389,422],{"class":244},[32,1391,1392],{"class":42}," `${",[32,1394,1395],{"class":38},"visible",[32,1397,1302],{"class":42},[32,1399,457],{"class":248},[32,1401,1402],{"class":42},"}개 · 합계 ${",[32,1404,1311],{"class":60},[32,1406,1118],{"class":42},[32,1408,1409],{"class":38},"total",[32,1411,1323],{"class":42},[32,1413,1414],{"class":42},"}`",[32,1416,428],{"class":38},[32,1418,1420],{"class":34,"line":1419},21,[32,1421,508],{"class":38},[32,1423,1425],{"class":34,"line":1424},22,[32,1426,515],{"emptyLinePlaceholder":514},[32,1428,1430,1433,1436,1438,1441,1443,1446,1448,1451,1453,1455,1458,1460,1462,1464],{"class":34,"line":1429},23,[32,1431,1432],{"class":38},"document.",[32,1434,1435],{"class":60},"querySelectorAll",[32,1437,1118],{"class":38},[32,1439,1440],{"class":42},"\"input\"",[32,1442,1329],{"class":38},[32,1444,1445],{"class":60},"forEach",[32,1447,538],{"class":38},[32,1449,1450],{"class":541},"el",[32,1452,544],{"class":38},[32,1454,547],{"class":244},[32,1456,1457],{"class":38}," el.",[32,1459,92],{"class":60},[32,1461,1118],{"class":38},[32,1463,1440],{"class":42},[32,1465,1466],{"class":38},", render));\n",[32,1468,1470,1473],{"class":34,"line":1469},24,[32,1471,1472],{"class":60},"render",[32,1474,1475],{"class":38},"();\n",[1477,1478,1480],"h3",{"id":1479},"자주-쓰는-배열-고차-함수-한눈에-보기","자주 쓰는 배열 고차 함수 한눈에 보기",[115,1482,1483,1499],{},[118,1484,1485],{},[121,1486,1487,1490,1493,1496],{},[124,1488,1489],{},"메서드",[124,1491,1492],{},"하는 일",[124,1494,1495],{},"반환값",[124,1497,1498],{},"예시 결과",[131,1500,1501,1516,1531,1549,1570,1592,1613],{},[121,1502,1503,1507,1510,1513],{},[136,1504,1505],{},[14,1506,61],{},[136,1508,1509],{},"각 요소를 변환",[136,1511,1512],{},"같은 길이의 새 배열",[136,1514,1515],{},"이름만 뽑은 배열",[121,1517,1518,1522,1525,1528],{},[136,1519,1520],{},[14,1521,196],{},[136,1523,1524],{},"조건에 맞는 요소만",[136,1526,1527],{},"새 배열 (길이 ≤ 원본)",[136,1529,1530],{},"재고 있는 상품들",[121,1532,1533,1537,1540,1543],{},[136,1534,1535],{},[14,1536,199],{},[136,1538,1539],{},"하나의 값으로 합침",[136,1541,1542],{},"아무 값 (숫자, 객체 등)",[136,1544,1545,1546],{},"총액 ",[14,1547,1548],{},"385000",[121,1550,1551,1556,1559,1565],{},[136,1552,1553],{},[14,1554,1555],{},"find",[136,1557,1558],{},"조건에 맞는 첫 요소",[136,1560,1561,1562],{},"요소 또는 ",[14,1563,1564],{},"undefined",[136,1566,1567,1569],{},[14,1568,341],{}," (10만 원 초과 첫 상품)",[121,1571,1572,1577,1580,1587],{},[136,1573,1574],{},[14,1575,1576],{},"some",[136,1578,1579],{},"하나라도 맞는가",[136,1581,1582,1584,1585],{},[14,1583,282],{}," \u002F ",[14,1586,307],{},[136,1588,1589,1590],{},"품절 상품이 있나? ",[14,1591,282],{},[121,1593,1594,1599,1602,1608],{},[136,1595,1596],{},[14,1597,1598],{},"every",[136,1600,1601],{},"전부 맞는가",[136,1603,1604,1584,1606],{},[14,1605,282],{},[14,1607,307],{},[136,1609,1610,1611],{},"전부 1만 원 초과? ",[14,1612,282],{},[121,1614,1615,1619,1622,1626],{},[136,1616,1617],{},[14,1618,1445],{},[136,1620,1621],{},"각 요소로 무언가 실행",[136,1623,1624],{},[14,1625,1564],{},[136,1627,1628],{},"(반환값 없음)",[1477,1630,1632,1634],{"id":1631},"reduce로-그룹-나누기",[14,1633,199],{},"로 그룹 나누기",[19,1636,1637,1639],{},[14,1638,199],{},"는 \"배열을 받아 어떤 모양의 값이든 만들어내는\" 가장 유연한 고차 함수다. 카테고리별로 상품을 묶어보자.",[23,1641,1643],{"className":25,"code":1642,"language":27,"meta":28,"style":28},"const byCategory = products.reduce((acc, p) => {\n  (acc[p.category] ??= []).push(p.name);\n  return acc;\n}, {});\n\u002F\u002F { 전자기기: ['키보드', '마우스', '모니터'], 생활용품: ['머그컵', '텀블러'] }\n",[14,1644,1645,1674,1690,1698,1703],{"__ignoreMap":28},[32,1646,1647,1649,1652,1654,1656,1658,1660,1663,1665,1667,1669,1671],{"class":34,"line":35},[32,1648,245],{"class":244},[32,1650,1651],{"class":248}," byCategory",[32,1653,252],{"class":244},[32,1655,454],{"class":38},[32,1657,199],{"class":60},[32,1659,538],{"class":38},[32,1661,1662],{"class":541},"acc",[32,1664,46],{"class":38},[32,1666,19],{"class":541},[32,1668,544],{"class":38},[32,1670,547],{"class":244},[32,1672,1673],{"class":38}," {\n",[32,1675,1676,1679,1682,1685,1687],{"class":34,"line":258},[32,1677,1678],{"class":38},"  (acc[p.category] ",[32,1680,1681],{"class":244},"??=",[32,1683,1684],{"class":38}," []).",[32,1686,482],{"class":60},[32,1688,1689],{"class":38},"(p.name);\n",[32,1691,1692,1695],{"class":34,"line":288},[32,1693,1694],{"class":244},"  return",[32,1696,1697],{"class":38}," acc;\n",[32,1699,1700],{"class":34,"line":312},[32,1701,1702],{"class":38},"}, {});\n",[32,1704,1705],{"class":34,"line":336},[32,1706,1707],{"class":398},"\u002F\u002F { 전자기기: ['키보드', '마우스', '모니터'], 생활용품: ['머그컵', '텀블러'] }\n",[1709,1710,1711],"tip",{},[102,1712,1713],{},[19,1714,1715,1716,1719],{},"그룹 나누기는 너무 자주 쓰여서 표준 함수가 생겼다. ",[14,1717,1718],{},"Object.groupBy(products, (p) => p.category)","를 쓰면 같은 일을 한 줄로 할 수 있다 (2024년부터 주요 브라우저와 Node.js 21 이상에서 지원).",[95,1721],{},[10,1723,1725],{"id":1724},"_2-함수를-반환하는-고차-함수-직접-만들어보기","2. 함수를 반환하는 고차 함수: 직접 만들어보기",[19,1727,1728],{},"함수를 반환하는 고차 함수는 클로저(Closure)와 함께 쓰인다. 반환된 함수가 자신이 만들어질 때의 변수를 계속 기억하는 성질이다.",[1477,1730,1732],{"id":1731},"함수-공장-설정값을-기억하는-함수","함수 공장: 설정값을 기억하는 함수",[23,1734,1736],{"className":25,"code":1735,"language":27,"meta":28,"style":28},"const multiplier = (n) => (x) => x * n;\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\ndouble(5); \u002F\u002F 10\ntriple(5); \u002F\u002F 15\n",[14,1737,1738,1773,1777,1795,1813,1817,1832],{"__ignoreMap":28},[32,1739,1740,1742,1745,1747,1749,1751,1753,1755,1757,1760,1762,1764,1767,1770],{"class":34,"line":35},[32,1741,245],{"class":244},[32,1743,1744],{"class":60}," multiplier",[32,1746,252],{"class":244},[32,1748,436],{"class":38},[32,1750,1105],{"class":541},[32,1752,544],{"class":38},[32,1754,547],{"class":244},[32,1756,436],{"class":38},[32,1758,1759],{"class":541},"x",[32,1761,544],{"class":38},[32,1763,547],{"class":244},[32,1765,1766],{"class":38}," x ",[32,1768,1769],{"class":244},"*",[32,1771,1772],{"class":38}," n;\n",[32,1774,1775],{"class":34,"line":258},[32,1776,515],{"emptyLinePlaceholder":514},[32,1778,1779,1781,1784,1786,1788,1790,1793],{"class":34,"line":288},[32,1780,245],{"class":244},[32,1782,1783],{"class":248}," double",[32,1785,252],{"class":244},[32,1787,1744],{"class":60},[32,1789,1118],{"class":38},[32,1791,1792],{"class":248},"2",[32,1794,1340],{"class":38},[32,1796,1797,1799,1802,1804,1806,1808,1811],{"class":34,"line":312},[32,1798,245],{"class":244},[32,1800,1801],{"class":248}," triple",[32,1803,252],{"class":244},[32,1805,1744],{"class":60},[32,1807,1118],{"class":38},[32,1809,1810],{"class":248},"3",[32,1812,1340],{"class":38},[32,1814,1815],{"class":34,"line":336},[32,1816,515],{"emptyLinePlaceholder":514},[32,1818,1819,1822,1824,1827,1829],{"class":34,"line":359},[32,1820,1821],{"class":60},"double",[32,1823,1118],{"class":38},[32,1825,1826],{"class":248},"5",[32,1828,620],{"class":38},[32,1830,1831],{"class":398},"\u002F\u002F 10\n",[32,1833,1834,1837,1839,1841,1843],{"class":34,"line":382},[32,1835,1836],{"class":60},"triple",[32,1838,1118],{"class":38},[32,1840,1826],{"class":248},[32,1842,620],{"class":38},[32,1844,1845],{"class":398},"\u002F\u002F 15\n",[19,1847,1848,1851,1852,1855],{},[14,1849,1850],{},"multiplier(2)","는 \"2를 기억하는 새 함수\"를 만들어 돌려준다. 이렇게 ",[83,1853,1854],{},"설정을 미리 넣어둔 함수를 찍어내는 것","이 함수를 반환하는 고차 함수의 핵심 용도다.",[1477,1857,1859,1861],{"id":1858},"once-딱-한-번만-실행되는-함수",[14,1860,219],{},": 딱 한 번만 실행되는 함수",[19,1863,1864],{},"결제 버튼 중복 클릭, 초기화 코드 중복 실행을 막을 때 쓴다.",[23,1866,1868],{"className":25,"code":1867,"language":27,"meta":28,"style":28},"function once(fn) {\n  let called = false;\n  let result;\n  return (...args) => {\n    if (!called) {\n      called = true;\n      result = fn(...args);\n    }\n    return result;\n  };\n}\n\nconst init = once(() => {\n  console.log(\"초기화 실행!\");\n  return 42;\n});\n\ninit(); \u002F\u002F \"초기화 실행!\" 출력, 42 반환\ninit(); \u002F\u002F 출력 없이 42만 반환\n",[14,1869,1870,1884,1899,1906,1924,1937,1949,1966,1971,1978,1983,1987,1991,2009,2024,2033,2038,2042,2053],{"__ignoreMap":28},[32,1871,1872,1874,1877,1879,1882],{"class":34,"line":35},[32,1873,1139],{"class":244},[32,1875,1876],{"class":60}," once",[32,1878,1118],{"class":38},[32,1880,1881],{"class":541},"fn",[32,1883,466],{"class":38},[32,1885,1886,1889,1892,1894,1897],{"class":34,"line":258},[32,1887,1888],{"class":244},"  let",[32,1890,1891],{"class":38}," called ",[32,1893,422],{"class":244},[32,1895,1896],{"class":248}," false",[32,1898,428],{"class":38},[32,1900,1901,1903],{"class":34,"line":288},[32,1902,1888],{"class":244},[32,1904,1905],{"class":38}," result;\n",[32,1907,1908,1910,1912,1915,1918,1920,1922],{"class":34,"line":312},[32,1909,1694],{"class":244},[32,1911,436],{"class":38},[32,1913,1914],{"class":244},"...",[32,1916,1917],{"class":541},"args",[32,1919,544],{"class":38},[32,1921,547],{"class":244},[32,1923,1673],{"class":38},[32,1925,1926,1929,1931,1934],{"class":34,"line":336},[32,1927,1928],{"class":244},"    if",[32,1930,436],{"class":38},[32,1932,1933],{"class":244},"!",[32,1935,1936],{"class":38},"called) {\n",[32,1938,1939,1942,1944,1947],{"class":34,"line":359},[32,1940,1941],{"class":38},"      called ",[32,1943,422],{"class":244},[32,1945,1946],{"class":248}," true",[32,1948,428],{"class":38},[32,1950,1951,1954,1956,1959,1961,1963],{"class":34,"line":382},[32,1952,1953],{"class":38},"      result ",[32,1955,422],{"class":244},[32,1957,1958],{"class":60}," fn",[32,1960,1118],{"class":38},[32,1962,1914],{"class":244},[32,1964,1965],{"class":38},"args);\n",[32,1967,1968],{"class":34,"line":499},[32,1969,1970],{"class":38},"    }\n",[32,1972,1973,1976],{"class":34,"line":505},[32,1974,1975],{"class":244},"    return",[32,1977,1905],{"class":38},[32,1979,1980],{"class":34,"line":511},[32,1981,1982],{"class":38},"  };\n",[32,1984,1985],{"class":34,"line":518},[32,1986,508],{"class":38},[32,1988,1989],{"class":34,"line":524},[32,1990,515],{"emptyLinePlaceholder":514},[32,1992,1993,1995,1998,2000,2002,2005,2007],{"class":34,"line":553},[32,1994,245],{"class":244},[32,1996,1997],{"class":248}," init",[32,1999,252],{"class":244},[32,2001,1876],{"class":60},[32,2003,2004],{"class":38},"(() ",[32,2006,547],{"class":244},[32,2008,1673],{"class":38},[32,2010,2011,2014,2017,2019,2022],{"class":34,"line":581},[32,2012,2013],{"class":38},"  console.",[32,2015,2016],{"class":60},"log",[32,2018,1118],{"class":38},[32,2020,2021],{"class":42},"\"초기화 실행!\"",[32,2023,1340],{"class":38},[32,2025,2026,2028,2031],{"class":34,"line":1219},[32,2027,1694],{"class":244},[32,2029,2030],{"class":248}," 42",[32,2032,428],{"class":38},[32,2034,2035],{"class":34,"line":1243},[32,2036,2037],{"class":38},"});\n",[32,2039,2040],{"class":34,"line":1248},[32,2041,515],{"emptyLinePlaceholder":514},[32,2043,2044,2047,2050],{"class":34,"line":1269},[32,2045,2046],{"class":60},"init",[32,2048,2049],{"class":38},"(); ",[32,2051,2052],{"class":398},"\u002F\u002F \"초기화 실행!\" 출력, 42 반환\n",[32,2054,2055,2057,2059],{"class":34,"line":1343},[32,2056,2046],{"class":60},[32,2058,2049],{"class":38},[32,2060,2061],{"class":398},"\u002F\u002F 출력 없이 42만 반환\n",[1477,2063,2065,2067],{"id":2064},"memoize-계산-결과를-기억하는-함수",[14,2066,222],{},": 계산 결과를 기억하는 함수",[19,2069,2070],{},"같은 입력이 반복되는 무거운 계산을 캐싱한다.",[23,2072,2074],{"className":25,"code":2073,"language":27,"meta":28,"style":28},"function memoize(fn) {\n  const cache = new Map();\n  return (arg) => {\n    if (cache.has(arg)) return cache.get(arg);\n    const result = fn(arg);\n    cache.set(arg, result);\n    return result;\n  };\n}\n\nconst slowSquare = (n) => {\n  console.log(`계산 중: ${n}`);\n  return n * n;\n};\nconst fastSquare = memoize(slowSquare);\n\nfastSquare(4); \u002F\u002F \"계산 중: 4\" 출력 후 16\nfastSquare(4); \u002F\u002F 출력 없이 바로 16 (캐시에서)\n",[14,2075,2076,2089,2106,2121,2146,2160,2171,2177,2181,2185,2189,2208,2225,2236,2241,2255,2259,2274],{"__ignoreMap":28},[32,2077,2078,2080,2083,2085,2087],{"class":34,"line":35},[32,2079,1139],{"class":244},[32,2081,2082],{"class":60}," memoize",[32,2084,1118],{"class":38},[32,2086,1881],{"class":541},[32,2088,466],{"class":38},[32,2090,2091,2093,2096,2098,2101,2104],{"class":34,"line":258},[32,2092,1150],{"class":244},[32,2094,2095],{"class":248}," cache",[32,2097,252],{"class":244},[32,2099,2100],{"class":244}," new",[32,2102,2103],{"class":60}," Map",[32,2105,1475],{"class":38},[32,2107,2108,2110,2112,2115,2117,2119],{"class":34,"line":288},[32,2109,1694],{"class":244},[32,2111,436],{"class":38},[32,2113,2114],{"class":541},"arg",[32,2116,544],{"class":38},[32,2118,547],{"class":244},[32,2120,1673],{"class":38},[32,2122,2123,2125,2128,2131,2134,2137,2140,2143],{"class":34,"line":312},[32,2124,1928],{"class":244},[32,2126,2127],{"class":38}," (cache.",[32,2129,2130],{"class":60},"has",[32,2132,2133],{"class":38},"(arg)) ",[32,2135,2136],{"class":244},"return",[32,2138,2139],{"class":38}," cache.",[32,2141,2142],{"class":60},"get",[32,2144,2145],{"class":38},"(arg);\n",[32,2147,2148,2151,2154,2156,2158],{"class":34,"line":336},[32,2149,2150],{"class":244},"    const",[32,2152,2153],{"class":248}," result",[32,2155,252],{"class":244},[32,2157,1958],{"class":60},[32,2159,2145],{"class":38},[32,2161,2162,2165,2168],{"class":34,"line":359},[32,2163,2164],{"class":38},"    cache.",[32,2166,2167],{"class":60},"set",[32,2169,2170],{"class":38},"(arg, result);\n",[32,2172,2173,2175],{"class":34,"line":382},[32,2174,1975],{"class":244},[32,2176,1905],{"class":38},[32,2178,2179],{"class":34,"line":499},[32,2180,1982],{"class":38},[32,2182,2183],{"class":34,"line":505},[32,2184,508],{"class":38},[32,2186,2187],{"class":34,"line":511},[32,2188,515],{"emptyLinePlaceholder":514},[32,2190,2191,2193,2196,2198,2200,2202,2204,2206],{"class":34,"line":518},[32,2192,245],{"class":244},[32,2194,2195],{"class":60}," slowSquare",[32,2197,252],{"class":244},[32,2199,436],{"class":38},[32,2201,1105],{"class":541},[32,2203,544],{"class":38},[32,2205,547],{"class":244},[32,2207,1673],{"class":38},[32,2209,2210,2212,2214,2216,2219,2221,2223],{"class":34,"line":524},[32,2211,2013],{"class":38},[32,2213,2016],{"class":60},[32,2215,1118],{"class":38},[32,2217,2218],{"class":42},"`계산 중: ${",[32,2220,1105],{"class":38},[32,2222,1414],{"class":42},[32,2224,1340],{"class":38},[32,2226,2227,2229,2232,2234],{"class":34,"line":553},[32,2228,1694],{"class":244},[32,2230,2231],{"class":38}," n ",[32,2233,1769],{"class":244},[32,2235,1772],{"class":38},[32,2237,2238],{"class":34,"line":581},[32,2239,2240],{"class":38},"};\n",[32,2242,2243,2245,2248,2250,2252],{"class":34,"line":1219},[32,2244,245],{"class":244},[32,2246,2247],{"class":248}," fastSquare",[32,2249,252],{"class":244},[32,2251,2082],{"class":60},[32,2253,2254],{"class":38},"(slowSquare);\n",[32,2256,2257],{"class":34,"line":1243},[32,2258,515],{"emptyLinePlaceholder":514},[32,2260,2261,2264,2266,2269,2271],{"class":34,"line":1248},[32,2262,2263],{"class":60},"fastSquare",[32,2265,1118],{"class":38},[32,2267,2268],{"class":248},"4",[32,2270,620],{"class":38},[32,2272,2273],{"class":398},"\u002F\u002F \"계산 중: 4\" 출력 후 16\n",[32,2275,2276,2278,2280,2282,2284],{"class":34,"line":1269},[32,2277,2263],{"class":60},[32,2279,1118],{"class":38},[32,2281,2268],{"class":248},[32,2283,620],{"class":38},[32,2285,2286],{"class":398},"\u002F\u002F 출력 없이 바로 16 (캐시에서)\n",[1477,2288,2290],{"id":2289},"기존-함수에-기능-덧붙이기","기존 함수에 기능 덧붙이기",[19,2292,2293],{},"원래 함수는 건드리지 않고, 앞뒤로 로그나 권한 체크 같은 기능을 감싸서 붙일 수 있다.",[23,2295,2297],{"className":25,"code":2296,"language":27,"meta":28,"style":28},"function withLogging(fn) {\n  return (...args) => {\n    console.log(`호출: ${fn.name}(${args.join(\", \")})`);\n    const result = fn(...args);\n    console.log(`결과: ${result}`);\n    return result;\n  };\n}\n\nfunction sum(a, b) {\n  return a + b;\n}\n\nconst loggedSum = withLogging(sum);\nloggedSum(2, 3);\n\u002F\u002F 호출: sum(2, 3)\n\u002F\u002F 결과: 5\n",[14,2298,2299,2312,2328,2367,2383,2401,2407,2411,2415,2419,2438,2450,2454,2458,2472,2487,2492],{"__ignoreMap":28},[32,2300,2301,2303,2306,2308,2310],{"class":34,"line":35},[32,2302,1139],{"class":244},[32,2304,2305],{"class":60}," withLogging",[32,2307,1118],{"class":38},[32,2309,1881],{"class":541},[32,2311,466],{"class":38},[32,2313,2314,2316,2318,2320,2322,2324,2326],{"class":34,"line":258},[32,2315,1694],{"class":244},[32,2317,436],{"class":38},[32,2319,1914],{"class":244},[32,2321,1917],{"class":541},[32,2323,544],{"class":38},[32,2325,547],{"class":244},[32,2327,1673],{"class":38},[32,2329,2330,2333,2335,2337,2340,2342,2344,2346,2349,2351,2353,2355,2357,2360,2362,2365],{"class":34,"line":288},[32,2331,2332],{"class":38},"    console.",[32,2334,2016],{"class":60},[32,2336,1118],{"class":38},[32,2338,2339],{"class":42},"`호출: ${",[32,2341,1881],{"class":38},[32,2343,1302],{"class":42},[32,2345,1305],{"class":38},[32,2347,2348],{"class":42},"}(${",[32,2350,1917],{"class":38},[32,2352,1302],{"class":42},[32,2354,1332],{"class":60},[32,2356,1118],{"class":42},[32,2358,2359],{"class":42},"\", \"",[32,2361,1323],{"class":42},[32,2363,2364],{"class":42},"})`",[32,2366,1340],{"class":38},[32,2368,2369,2371,2373,2375,2377,2379,2381],{"class":34,"line":312},[32,2370,2150],{"class":244},[32,2372,2153],{"class":248},[32,2374,252],{"class":244},[32,2376,1958],{"class":60},[32,2378,1118],{"class":38},[32,2380,1914],{"class":244},[32,2382,1965],{"class":38},[32,2384,2385,2387,2389,2391,2394,2397,2399],{"class":34,"line":336},[32,2386,2332],{"class":38},[32,2388,2016],{"class":60},[32,2390,1118],{"class":38},[32,2392,2393],{"class":42},"`결과: ${",[32,2395,2396],{"class":38},"result",[32,2398,1414],{"class":42},[32,2400,1340],{"class":38},[32,2402,2403,2405],{"class":34,"line":359},[32,2404,1975],{"class":244},[32,2406,1905],{"class":38},[32,2408,2409],{"class":34,"line":382},[32,2410,1982],{"class":38},[32,2412,2413],{"class":34,"line":499},[32,2414,508],{"class":38},[32,2416,2417],{"class":34,"line":505},[32,2418,515],{"emptyLinePlaceholder":514},[32,2420,2421,2423,2426,2428,2431,2433,2436],{"class":34,"line":511},[32,2422,1139],{"class":244},[32,2424,2425],{"class":60}," sum",[32,2427,1118],{"class":38},[32,2429,2430],{"class":541},"a",[32,2432,46],{"class":38},[32,2434,2435],{"class":541},"b",[32,2437,466],{"class":38},[32,2439,2440,2442,2445,2447],{"class":34,"line":518},[32,2441,1694],{"class":244},[32,2443,2444],{"class":38}," a ",[32,2446,611],{"class":244},[32,2448,2449],{"class":38}," b;\n",[32,2451,2452],{"class":34,"line":524},[32,2453,508],{"class":38},[32,2455,2456],{"class":34,"line":553},[32,2457,515],{"emptyLinePlaceholder":514},[32,2459,2460,2462,2465,2467,2469],{"class":34,"line":581},[32,2461,245],{"class":244},[32,2463,2464],{"class":248}," loggedSum",[32,2466,252],{"class":244},[32,2468,2305],{"class":60},[32,2470,2471],{"class":38},"(sum);\n",[32,2473,2474,2477,2479,2481,2483,2485],{"class":34,"line":1219},[32,2475,2476],{"class":60},"loggedSum",[32,2478,1118],{"class":38},[32,2480,1792],{"class":248},[32,2482,46],{"class":38},[32,2484,1810],{"class":248},[32,2486,1340],{"class":38},[32,2488,2489],{"class":34,"line":1243},[32,2490,2491],{"class":398},"\u002F\u002F 호출: sum(2, 3)\n",[32,2493,2494],{"class":34,"line":1248},[32,2495,2496],{"class":398},"\u002F\u002F 결과: 5\n",[19,2498,2499,2500,2504],{},"검색창 입력을 제어하는 ",[2430,2501,2503],{"href":2502},"\u002Fko\u002Fdebounce-guide","debounce와 throttle","도 정확히 이 구조다. 함수를 받아서, 호출 시점을 조절하는 새 함수를 돌려준다.",[95,2506],{},[10,2508,2510],{"id":2509},"_3-함수-합성-작은-함수를-이어-붙이기","3. 함수 합성: 작은 함수를 이어 붙이기",[19,2512,2513,2514,2516],{},"작은 함수 여러 개를 파이프처럼 연결해서 하나의 함수로 만드는 것을 함수 합성(Function Composition)이라고 한다. ",[14,2515,199],{},"로 간단히 만들 수 있다.",[23,2518,2520],{"className":25,"code":2519,"language":27,"meta":28,"style":28},"const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);\n\nconst trim = (s) => s.trim();\nconst lower = (s) => s.toLowerCase();\nconst slug = (s) => s.replace(\u002F\\s+\u002Fg, \"-\");\n\nconst toSlug = pipe(trim, lower, slug);\ntoSlug(\"  Hello World Nuxt  \"); \u002F\u002F \"hello-world-nuxt\"\n",[14,2521,2522,2572,2576,2601,2625,2669,2673,2687],{"__ignoreMap":28},[32,2523,2524,2526,2529,2531,2533,2535,2538,2540,2542,2544,2546,2548,2550,2553,2555,2557,2559,2561,2563,2565,2567,2569],{"class":34,"line":35},[32,2525,245],{"class":244},[32,2527,2528],{"class":60}," pipe",[32,2530,252],{"class":244},[32,2532,436],{"class":38},[32,2534,1914],{"class":244},[32,2536,2537],{"class":541},"fns",[32,2539,544],{"class":38},[32,2541,547],{"class":244},[32,2543,436],{"class":38},[32,2545,1759],{"class":541},[32,2547,544],{"class":38},[32,2549,547],{"class":244},[32,2551,2552],{"class":38}," fns.",[32,2554,199],{"class":60},[32,2556,538],{"class":38},[32,2558,1662],{"class":541},[32,2560,46],{"class":38},[32,2562,1881],{"class":541},[32,2564,544],{"class":38},[32,2566,547],{"class":244},[32,2568,1958],{"class":60},[32,2570,2571],{"class":38},"(acc), x);\n",[32,2573,2574],{"class":34,"line":258},[32,2575,515],{"emptyLinePlaceholder":514},[32,2577,2578,2580,2583,2585,2587,2589,2591,2593,2596,2599],{"class":34,"line":288},[32,2579,245],{"class":244},[32,2581,2582],{"class":60}," trim",[32,2584,252],{"class":244},[32,2586,436],{"class":38},[32,2588,1078],{"class":541},[32,2590,544],{"class":38},[32,2592,547],{"class":244},[32,2594,2595],{"class":38}," s.",[32,2597,2598],{"class":60},"trim",[32,2600,1475],{"class":38},[32,2602,2603,2605,2608,2610,2612,2614,2616,2618,2620,2623],{"class":34,"line":312},[32,2604,245],{"class":244},[32,2606,2607],{"class":60}," lower",[32,2609,252],{"class":244},[32,2611,436],{"class":38},[32,2613,1078],{"class":541},[32,2615,544],{"class":38},[32,2617,547],{"class":244},[32,2619,2595],{"class":38},[32,2621,2622],{"class":60},"toLowerCase",[32,2624,1475],{"class":38},[32,2626,2627,2629,2632,2634,2636,2638,2640,2642,2644,2647,2649,2652,2655,2657,2659,2662,2664,2667],{"class":34,"line":336},[32,2628,245],{"class":244},[32,2630,2631],{"class":60}," slug",[32,2633,252],{"class":244},[32,2635,436],{"class":38},[32,2637,1078],{"class":541},[32,2639,544],{"class":38},[32,2641,547],{"class":244},[32,2643,2595],{"class":38},[32,2645,2646],{"class":60},"replace",[32,2648,1118],{"class":38},[32,2650,2651],{"class":42},"\u002F",[32,2653,2654],{"class":248},"\\s",[32,2656,611],{"class":244},[32,2658,2651],{"class":42},[32,2660,2661],{"class":244},"g",[32,2663,46],{"class":38},[32,2665,2666],{"class":42},"\"-\"",[32,2668,1340],{"class":38},[32,2670,2671],{"class":34,"line":359},[32,2672,515],{"emptyLinePlaceholder":514},[32,2674,2675,2677,2680,2682,2684],{"class":34,"line":382},[32,2676,245],{"class":244},[32,2678,2679],{"class":248}," toSlug",[32,2681,252],{"class":244},[32,2683,2528],{"class":60},[32,2685,2686],{"class":38},"(trim, lower, slug);\n",[32,2688,2689,2692,2694,2697,2699],{"class":34,"line":499},[32,2690,2691],{"class":60},"toSlug",[32,2693,1118],{"class":38},[32,2695,2696],{"class":42},"\"  Hello World Nuxt  \"",[32,2698,620],{"class":38},[32,2700,2701],{"class":398},"\u002F\u002F \"hello-world-nuxt\"\n",[19,2703,2704,2705,2708],{},"각 함수는 한 가지 일만 하고, ",[14,2706,2707],{},"pipe","가 왼쪽부터 순서대로 실행한다. 순서를 바꾸거나 단계를 추가하기도 쉽다.",[95,2710],{},[10,2712,2714],{"id":2713},"_4-커링-인자를-하나씩-받기","4. 커링: 인자를 하나씩 받기",[19,2716,2717,2718,2721],{},"커링(Currying)은 여러 인자를 받는 함수를 ",[83,2719,2720],{},"인자 하나씩 받는 함수의 연속","으로 바꾸는 것이다.",[23,2723,2725],{"className":25,"code":2724,"language":27,"meta":28,"style":28},"const add = (a) => (b) => a + b;\n\nadd(1)(2); \u002F\u002F 3\n\nconst add10 = add(10);\n[1, 2, 3].map(add10); \u002F\u002F [11, 12, 13]\n",[14,2726,2727,2758,2762,2782,2786,2804],{"__ignoreMap":28},[32,2728,2729,2731,2734,2736,2738,2740,2742,2744,2746,2748,2750,2752,2754,2756],{"class":34,"line":35},[32,2730,245],{"class":244},[32,2732,2733],{"class":60}," add",[32,2735,252],{"class":244},[32,2737,436],{"class":38},[32,2739,2430],{"class":541},[32,2741,544],{"class":38},[32,2743,547],{"class":244},[32,2745,436],{"class":38},[32,2747,2435],{"class":541},[32,2749,544],{"class":38},[32,2751,547],{"class":244},[32,2753,2444],{"class":38},[32,2755,611],{"class":244},[32,2757,2449],{"class":38},[32,2759,2760],{"class":34,"line":258},[32,2761,515],{"emptyLinePlaceholder":514},[32,2763,2764,2767,2769,2772,2775,2777,2779],{"class":34,"line":288},[32,2765,2766],{"class":60},"add",[32,2768,1118],{"class":38},[32,2770,2771],{"class":248},"1",[32,2773,2774],{"class":38},")(",[32,2776,1792],{"class":248},[32,2778,620],{"class":38},[32,2780,2781],{"class":398},"\u002F\u002F 3\n",[32,2783,2784],{"class":34,"line":312},[32,2785,515],{"emptyLinePlaceholder":514},[32,2787,2788,2790,2793,2795,2797,2799,2802],{"class":34,"line":336},[32,2789,245],{"class":244},[32,2791,2792],{"class":248}," add10",[32,2794,252],{"class":244},[32,2796,2733],{"class":60},[32,2798,1118],{"class":38},[32,2800,2801],{"class":248},"10",[32,2803,1340],{"class":38},[32,2805,2806,2808,2810,2812,2814,2816,2818,2820,2822,2825],{"class":34,"line":359},[32,2807,39],{"class":38},[32,2809,2771],{"class":248},[32,2811,46],{"class":38},[32,2813,1792],{"class":248},[32,2815,46],{"class":38},[32,2817,1810],{"class":248},[32,2819,57],{"class":38},[32,2821,61],{"class":60},[32,2823,2824],{"class":38},"(add10); ",[32,2826,2827],{"class":398},"\u002F\u002F [11, 12, 13]\n",[19,2829,2830,2831,2834,2835,2837],{},"인자 일부를 미리 채워둔 함수(",[14,2832,2833],{},"add10",")를 만들 수 있어서, ",[14,2836,61],{}," 같은 고차 함수에 바로 넘기기 좋다.",[95,2839],{},[10,2841,2843],{"id":2842},"고차-함수를-쓸-때-빠지기-쉬운-함정","고차 함수를 쓸 때 빠지기 쉬운 함정",[1477,2845,2847,2848,2851],{"id":2846},"함정-1-mapparseint-처음-퀴즈의-정답","함정 1. ",[14,2849,2850],{},"map(parseInt)",": 처음 퀴즈의 정답",[19,2853,2854,2856,2857,2860,2861,2864,2865,2868],{},[14,2855,61],{},"은 콜백에 ",[14,2858,2859],{},"(요소, 인덱스, 배열)"," 세 개의 인자를 넘긴다. 그런데 ",[14,2862,2863],{},"parseInt","는 두 번째 인자를 ",[83,2866,2867],{},"진법(radix)"," 으로 받는다.",[115,2870,2871,2884],{},[118,2872,2873],{},[121,2874,2875,2878,2881],{},[124,2876,2877],{},"호출",[124,2879,2880],{},"의미",[124,2882,2883],{},"결과",[131,2885,2886,2900,2915],{},[121,2887,2888,2893,2896],{},[136,2889,2890],{},[14,2891,2892],{},"parseInt(\"1\", 0)",[136,2894,2895],{},"진법 0 → 기본값(10진법)으로 처리",[136,2897,2898],{},[14,2899,2771],{},[121,2901,2902,2907,2910],{},[136,2903,2904],{},[14,2905,2906],{},"parseInt(\"2\", 1)",[136,2908,2909],{},"1진법은 존재하지 않음",[136,2911,2912],{},[14,2913,2914],{},"NaN",[121,2916,2917,2922,2928],{},[136,2918,2919],{},[14,2920,2921],{},"parseInt(\"3\", 2)",[136,2923,2924,2925,2927],{},"2진법에 ",[14,2926,1810],{},"이라는 숫자는 없음",[136,2929,2930],{},[14,2931,2914],{},[19,2933,2934],{},"해결법은 콜백에 넘어가는 인자를 직접 정하는 것이다.",[23,2936,2938],{"className":25,"code":2937,"language":27,"meta":28,"style":28},"[\"1\", \"2\", \"3\"].map(Number); \u002F\u002F [1, 2, 3]\n[\"1\", \"2\", \"3\"].map((s) => parseInt(s, 10)); \u002F\u002F [1, 2, 3]\n",[14,2939,2940,2964],{"__ignoreMap":28},[32,2941,2942,2944,2946,2948,2950,2952,2954,2956,2958,2961],{"class":34,"line":35},[32,2943,39],{"class":38},[32,2945,43],{"class":42},[32,2947,46],{"class":38},[32,2949,49],{"class":42},[32,2951,46],{"class":38},[32,2953,54],{"class":42},[32,2955,57],{"class":38},[32,2957,61],{"class":60},[32,2959,2960],{"class":38},"(Number); ",[32,2962,2963],{"class":398},"\u002F\u002F [1, 2, 3]\n",[32,2965,2966,2968,2970,2972,2974,2976,2978,2980,2982,2984,2986,2988,2990,2993,2996,2998,3001],{"class":34,"line":258},[32,2967,39],{"class":38},[32,2969,43],{"class":42},[32,2971,46],{"class":38},[32,2973,49],{"class":42},[32,2975,46],{"class":38},[32,2977,54],{"class":42},[32,2979,57],{"class":38},[32,2981,61],{"class":60},[32,2983,538],{"class":38},[32,2985,1078],{"class":541},[32,2987,544],{"class":38},[32,2989,547],{"class":244},[32,2991,2992],{"class":60}," parseInt",[32,2994,2995],{"class":38},"(s, ",[32,2997,2801],{"class":248},[32,2999,3000],{"class":38},")); ",[32,3002,2963],{"class":398},[3004,3005,3006],"warning",{},[102,3007,3008],{},[19,3009,3010,3011,3014,3015,3017],{},"함수를 고차 함수에 ",[83,3012,3013],{},"그대로"," 넘길 때(",[14,3016,2850],{},")는 그 함수가 추가 인자를 어떻게 해석하는지 꼭 확인하자. 헷갈리면 화살표 함수로 한 번 감싸는 게 안전하다.",[1477,3019,3021,3022,3024],{"id":3020},"함정-2-foreach는-아무것도-반환하지-않는다","함정 2. ",[14,3023,1445],{},"는 아무것도 반환하지 않는다",[23,3026,3028],{"className":25,"code":3027,"language":27,"meta":28,"style":28},"const result = [1, 2, 3].forEach((x) => x * 2);\nconsole.log(result); \u002F\u002F undefined\n",[14,3029,3030,3072],{"__ignoreMap":28},[32,3031,3032,3034,3036,3038,3041,3043,3045,3047,3049,3051,3053,3055,3057,3059,3061,3063,3065,3067,3070],{"class":34,"line":35},[32,3033,245],{"class":244},[32,3035,2153],{"class":248},[32,3037,252],{"class":244},[32,3039,3040],{"class":38}," [",[32,3042,2771],{"class":248},[32,3044,46],{"class":38},[32,3046,1792],{"class":248},[32,3048,46],{"class":38},[32,3050,1810],{"class":248},[32,3052,57],{"class":38},[32,3054,1445],{"class":60},[32,3056,538],{"class":38},[32,3058,1759],{"class":541},[32,3060,544],{"class":38},[32,3062,547],{"class":244},[32,3064,1766],{"class":38},[32,3066,1769],{"class":244},[32,3068,3069],{"class":248}," 2",[32,3071,1340],{"class":38},[32,3073,3074,3077,3079,3082],{"class":34,"line":258},[32,3075,3076],{"class":38},"console.",[32,3078,2016],{"class":60},[32,3080,3081],{"class":38},"(result); ",[32,3083,3084],{"class":398},"\u002F\u002F undefined\n",[19,3086,3087,3088,3090,3091,110],{},"새 배열이 필요하면 ",[14,3089,61],{},", 단순히 반복하며 무언가 실행만 하면 ",[14,3092,1445],{},[1477,3094,3096,3097,3100],{"id":3095},"함정-3-sort는-원본을-바꾼다","함정 3. ",[14,3098,3099],{},"sort","는 원본을 바꾼다",[19,3102,3103,46,3105,3107,3108,46,3110,46,3113,3116,3117,3120],{},[14,3104,61],{},[14,3106,196],{},"는 새 배열을 돌려주지만 ",[14,3109,3099],{},[14,3111,3112],{},"reverse",[14,3114,3115],{},"splice","는 ",[83,3118,3119],{},"원본 배열 자체를 바꾼다."," React나 Vue 상태를 다룰 때 특히 위험하다. 원본을 지키려면 ES2023에 추가된 메서드를 쓴다.",[23,3122,3124],{"className":25,"code":3123,"language":27,"meta":28,"style":28},"const nums = [3, 1, 2];\nconst sorted = nums.toSorted((a, b) => a - b);\n\nnums; \u002F\u002F [3, 1, 2] (그대로)\nsorted; \u002F\u002F [1, 2, 3]\n",[14,3125,3126,3149,3184,3188,3196],{"__ignoreMap":28},[32,3127,3128,3130,3133,3135,3137,3139,3141,3143,3145,3147],{"class":34,"line":35},[32,3129,245],{"class":244},[32,3131,3132],{"class":248}," nums",[32,3134,252],{"class":244},[32,3136,3040],{"class":38},[32,3138,1810],{"class":248},[32,3140,46],{"class":38},[32,3142,2771],{"class":248},[32,3144,46],{"class":38},[32,3146,1792],{"class":248},[32,3148,385],{"class":38},[32,3150,3151,3153,3156,3158,3161,3164,3166,3168,3170,3172,3174,3176,3178,3181],{"class":34,"line":258},[32,3152,245],{"class":244},[32,3154,3155],{"class":248}," sorted",[32,3157,252],{"class":244},[32,3159,3160],{"class":38}," nums.",[32,3162,3163],{"class":60},"toSorted",[32,3165,538],{"class":38},[32,3167,2430],{"class":541},[32,3169,46],{"class":38},[32,3171,2435],{"class":541},[32,3173,544],{"class":38},[32,3175,547],{"class":244},[32,3177,2444],{"class":38},[32,3179,3180],{"class":244},"-",[32,3182,3183],{"class":38}," b);\n",[32,3185,3186],{"class":34,"line":288},[32,3187,515],{"emptyLinePlaceholder":514},[32,3189,3190,3193],{"class":34,"line":312},[32,3191,3192],{"class":38},"nums; ",[32,3194,3195],{"class":398},"\u002F\u002F [3, 1, 2] (그대로)\n",[32,3197,3198,3201],{"class":34,"line":336},[32,3199,3200],{"class":38},"sorted; ",[32,3202,2963],{"class":398},[115,3204,3205,3215],{},[118,3206,3207],{},[121,3208,3209,3212],{},[124,3210,3211],{},"원본을 바꾸는 메서드",[124,3213,3214],{},"새 배열을 돌려주는 버전",[131,3216,3217,3229,3241,3253],{},[121,3218,3219,3224],{},[136,3220,3221],{},[14,3222,3223],{},"sort()",[136,3225,3226],{},[14,3227,3228],{},"toSorted()",[121,3230,3231,3236],{},[136,3232,3233],{},[14,3234,3235],{},"reverse()",[136,3237,3238],{},[14,3239,3240],{},"toReversed()",[121,3242,3243,3248],{},[136,3244,3245],{},[14,3246,3247],{},"splice()",[136,3249,3250],{},[14,3251,3252],{},"toSpliced()",[121,3254,3255,3260],{},[136,3256,3257],{},[14,3258,3259],{},"arr[i] = x",[136,3261,3262],{},[14,3263,3264],{},"with(i, x)",[1477,3266,3268,3269,3271],{"id":3267},"함정-4-map-안에서-부작용-일으키기","함정 4. ",[14,3270,61],{}," 안에서 부작용 일으키기",[19,3273,3274,3276,3277,3279,3280,3282,3283,3285,3286,3289],{},[14,3275,61],{},"의 콜백은 \"값을 변환해서 돌려주는\" 용도다. 그 안에서 API를 호출하거나 외부 변수를 바꾸면, 읽는 사람이 ",[14,3278,61],{},"만 보고는 그런 일이 일어나는지 예상할 수 없다. 변환은 ",[14,3281,61],{},", 실행은 ",[14,3284,1445],{},"나 ",[14,3287,3288],{},"for...of","로 역할을 나누자.",[95,3291],{},[10,3293,3295],{"id":3294},"정리-왜-알아두면-좋은가","정리: 왜 알아두면 좋은가",[115,3297,3298,3307],{},[118,3299,3300],{},[121,3301,3302,3305],{},[124,3303,3304],{},"하고 싶은 것",[124,3306,85],{},[131,3308,3309,3322,3335,3346,3355,3364,3376],{},[121,3310,3311,3314],{},[136,3312,3313],{},"배열 변환 \u002F 거르기 \u002F 합치기",[136,3315,3316,1584,3318,1584,3320],{},[14,3317,61],{},[14,3319,196],{},[14,3321,199],{},[121,3323,3324,3327],{},[136,3325,3326],{},"그룹 나누기",[136,3328,3329,3331,3332],{},[14,3330,199],{}," 또는 ",[14,3333,3334],{},"Object.groupBy",[121,3336,3337,3340],{},[136,3338,3339],{},"설정을 기억하는 함수 찍어내기",[136,3341,3342,3343,1323],{},"함수를 반환하는 함수 (",[14,3344,3345],{},"multiplier",[121,3347,3348,3351],{},[136,3349,3350],{},"한 번만 실행",[136,3352,3353],{},[14,3354,219],{},[121,3356,3357,3360],{},[136,3358,3359],{},"계산 결과 캐싱",[136,3361,3362],{},[14,3363,222],{},[121,3365,3366,3368],{},[136,3367,2290],{},[136,3369,3370,3371,46,3374,1323],{},"감싸는 함수 (",[14,3372,3373],{},"withLogging",[14,3375,216],{},[121,3377,3378,3381],{},[136,3379,3380],{},"작은 함수 이어 붙이기",[136,3382,3383],{},[14,3384,2707],{},[19,3386,3387,3388,3391,3392,3394,3395,3397,3398,3397,3400,3402],{},"고차 함수의 핵심은 ",[83,3389,3390],{},"\"무엇을 할지\"와 \"어떻게 반복할지\"를 분리하는 것","이다. 반복, 캐싱, 실행 횟수 제한 같은 \"어떻게\"는 고차 함수에 맡기고, 우리는 \"무엇을\"에 해당하는 작은 함수만 쓰면 된다. 그렇게 만든 작은 함수는 테스트하기 쉽고, 다른 곳에서 다시 쓰기도 쉽다. 다음에 ",[14,3393,433],{}," 문과 임시 배열을 만들려는 순간, ",[14,3396,61],{},"·",[14,3399,196],{},[14,3401,199],{},"로 의도를 한 줄에 담을 수 없는지 먼저 떠올려보자.",[3404,3405,3406],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":28,"searchDepth":258,"depth":258,"links":3408},[3409,3411,3412,3417,3425,3426,3427,3437],{"id":12,"depth":258,"text":3410},"['1', '2', '3'].map(parseInt)의 결과는?",{"id":99,"depth":258,"text":100},{"id":230,"depth":258,"text":231,"children":3413},[3414,3415],{"id":1479,"depth":288,"text":1480},{"id":1631,"depth":288,"text":3416},"reduce로 그룹 나누기",{"id":1724,"depth":258,"text":1725,"children":3418},[3419,3420,3422,3424],{"id":1731,"depth":288,"text":1732},{"id":1858,"depth":288,"text":3421},"once: 딱 한 번만 실행되는 함수",{"id":2064,"depth":288,"text":3423},"memoize: 계산 결과를 기억하는 함수",{"id":2289,"depth":288,"text":2290},{"id":2509,"depth":258,"text":2510},{"id":2713,"depth":258,"text":2714},{"id":2842,"depth":258,"text":2843,"children":3428},[3429,3431,3433,3435],{"id":2846,"depth":288,"text":3430},"함정 1. map(parseInt): 처음 퀴즈의 정답",{"id":3020,"depth":288,"text":3432},"함정 2. forEach는 아무것도 반환하지 않는다",{"id":3095,"depth":288,"text":3434},"함정 3. sort는 원본을 바꾼다",{"id":3267,"depth":288,"text":3436},"함정 4. map 안에서 부작용 일으키기",{"id":3294,"depth":258,"text":3295},"함수를 인자로 받거나 함수를 반환하는 고차 함수. map, filter, reduce를 제대로 쓰는 법부터 once, memoize, pipe, 커링처럼 실무에서 바로 쓰는 고차 함수를 직접 만들어보고, ['1','2','3'].map(parseInt) 같은 함정까지 정리했다.","md",{"date":3441,"field":3442,"tags":3443},"2026.10.08","frontend",[3444],"javascript","\u002Fko\u002Fjavascript-higher-order-functions",{"title":5,"description":3438},{"loc":3445},"ko\u002Fjavascript-higher-order-functions","e5wj87JXDII78EFdxz2AewpbPTAUVUzf1DRIL20mEMY",[3451,3462,3468,3476,3483,3490,3496,3507,3515,3523,3535,3543,3552,3558,3564,3571,3578,3584,3591,3594,3600,3607,3613,3622,3631,3637,3644,3650,3657,3664,3672,3679,3686,3695,3702,3709,3716,3722,3730,3737,3745,3751],{"path":3452,"title":3453,"description":3454,"meta":3455},"\u002Fko\u002Fadsense-ads-txt-and-seo-indexing-bug","애드센스 ads.txt 경고를 받고 파헤치다가 찾은 진짜 색인 버그","구글 애드센스가 ads.txt 문제를 알려왔는데, 확인해보니 파일은 멀쩡했다. 대신 서치콘솔 색인 수가 적었던 진짜 원인을 Nuxt Content 슬러그 불일치 버그에서 찾은 과정을 정리한다.",{"date":3456,"field":3457,"tags":3458},"2026.09.17","blog",[3459,3460,3461],"seo","adsense","nuxt-content",{"path":3463,"title":3464,"description":3465,"meta":3466},"\u002Fko\u002Fcss-has-selector","CSS :has() 선택자 실전 가이드: 자바스크립트 없이 부모를 선택하는 법","체크하면 카드가 강조되고, 입력이 틀리면 폼 전체가 반응하고, 별점에 마우스를 올리면 앞의 별까지 칠해진다. 예전엔 자바스크립트가 필요했던 일을 CSS :has() 한 줄로 해결하는 실전 예제를 직접 눌러보며 정리했다.",{"date":3441,"field":3442,"tags":3467},[843],{"path":3469,"title":3470,"description":3471,"meta":3472},"\u002Fko\u002Fcss-layouts","CSS Flexbox 완전 정복 가이드","Flexbox를 활용한 반응형 레이아웃 구현 방법과 실전 예제. 수직 정렬, 네비게이션 바, 카드 레이아웃까지 완벽 정리!",{"date":3473,"image":3474,"field":3442,"tags":3475},"2025.01.25","css.jpg",[843],{"path":3477,"title":3478,"description":3479,"meta":3480},"\u002Fko\u002Fcss-login-form","로그인","로그인 UI를 그려보자",{"date":3481,"field":3442,"tags":3482},"2025.03.29",[655,843],{"path":3484,"title":3485,"description":3486,"meta":3487},"\u002Fko\u002Fcsv-parser-cleaning","복잡한 CSV 데이터를 안전하게 파싱하는 방법","JavaScript에서 큰따옴표, 줄바꿈, 쉼표 등 복잡한 CSV 데이터를 안전하게 객체로 변환하는 전체 과정 설명",{"date":3488,"field":3442,"tags":3489},"2025.06.19",[3444],{"path":2502,"title":3491,"description":3492,"meta":3493},"debounce와 throttle이란??","반복되는 함수 호출을 제어하는 기술인 디바운스(debounce)와 쓰로틀(throttle)을 알아보자.",{"date":3494,"field":3442,"tags":3495},"2025.03.26",[3444],{"path":3497,"title":3498,"description":3499,"meta":3500},"\u002Fko\u002Fdeclarative-vs-procedural-programming","선언적 프로그래밍 vs 절차형 프로그래밍","선언적 프로그래밍과 절차형 프로그래밍은 서로 대비되는 대표적인 패러다임이다. 두 패러다임의 차이를 알아보고, 각 패러다임에 해당하는 언어와 Vue\u002FReact의 특징을 살펴보자.",{"date":3501,"field":3502,"tags":3503},"2025.05.24","concepts",[3504,3505,3506],"paradigm","vue","react",{"path":3508,"title":3509,"description":3510,"meta":3511},"\u002Fko\u002Fdesign-guide","Design-Guide","A comprehensive guide on design principles and best practices for developers.",{"date":3512,"field":3442,"tags":3513},"2025.01.19",[3514],"design-system",{"path":3516,"title":3517,"description":3518,"meta":3519},"\u002Fko\u002Fdikw-pyramid","DIKW 피라미드 정리: 데이터가 지혜가 되기까지","Data, Information, Knowledge, Wisdom 4단계로 구성된 DIKW 피라미드 개념을 로그\u002F분석 데이터 같은 실제 개발 사례에 대입해서 정리한다.",{"date":3520,"field":3502,"tags":3521},"2026.09.18",[3522],"data",{"path":3524,"title":3525,"description":3526,"meta":3527},"\u002Fko\u002Fdisplaying-commits-with-github-actions","깃허브 액션으로 커밋 로그를 블로그에 띄우기: Nuxt와 Vercel 활용법","깃허브 액션을 통해 커밋 데이터를 자동으로 수집하고, Nuxt와 Vercel로 UI에 노출하는 방법을 소개합니다.",{"date":3528,"image":3529,"field":3530,"tags":3531},"2025.02.28","github-commits.jpg","infra",[3532,3533,3534],"github-actions","vercel","nuxt",{"path":3536,"title":3537,"description":3538,"meta":3539},"\u002Fko\u002Fdocker-auto-build-run","로컬에서 커밋 시 도커 빌드 후 컨테이너 시작하기","로컬에서 커밋 시 도커 빌드 후 컨테이너 시작하기.",{"date":3540,"field":3530,"tags":3541},"2025.03.10",[3542],"docker",{"path":3544,"title":3545,"description":3546,"meta":3547},"\u002Fko\u002Fhow-to-mount-storage","라즈베리파이4에 저장장치 마운트 시키기","라즈베리파이에 저장장치를 연결하고 파티션 생성부터 포맷, 마운트까지의 전체 과정을 정리한 기록입니다.",{"date":3548,"field":3530,"tags":3549},"2025.07.11",[3550,3551],"raspberry-pi","linux",{"path":3553,"title":3554,"description":3554,"meta":3555},"\u002Fko\u002Fhtml","HTML이란 무엇인가",{"date":3473,"image":3556,"field":3442,"tags":3557},"html.jpg",[655],{"path":3559,"title":3560,"description":3561,"meta":3562},"\u002Fko\u002Fhtml-features-without-javascript","자바스크립트 없이 HTML만으로 되는 것들: 아직도 div로 다 만들고 있다면","아코디언, 팝오버, 모달, 자동완성, 폼 검증, 이미지 지연 로딩까지. 라이브러리 없이 HTML 태그와 속성만으로 해결되는 기능을 예제와 함께 정리했다. 코드는 줄고 접근성은 덤으로 따라온다.",{"date":3441,"field":3442,"tags":3563},[655],{"path":3565,"title":3566,"description":3567,"meta":3568},"\u002Fko\u002Fhtml2","미치광이 카드 컴포넌트","미치광이 카드 컴포넌트는 어떤 느낌일까",{"date":3569,"field":3442,"tags":3570},"2025.03.28",[655,843],{"path":3572,"title":3573,"description":3573,"meta":3574},"\u002Fko\u002Fhttps-guide","Let's Encrypt를 이용해서 HTTPS 적용하기",{"date":3575,"field":3530,"tags":3576},"2025.03.11",[3577],"https",{"path":3579,"title":3580,"description":3581,"meta":3582},"\u002Fko\u002Fjavascript-async-error-handling","자바스크립트 비동기 에러 올바르게 처리하기: try\u002Fcatch가 못 잡는 경우부터 Promise.all vs allSettled까지","try\u002Fcatch로 감쌌는데 에러가 새어 나가고, 404인데 fetch는 성공했다고 한다. await 빠뜨린 try\u002Fcatch, return vs return await, fetch의 res.ok, Promise.all과 allSettled, 반복문 속 await, 타임아웃과 요청 취소까지 비동기 에러 처리의 함정을 직접 실행해보며 정리했다.",{"date":3441,"field":3442,"tags":3583},[3444],{"path":3585,"title":3586,"description":3587,"meta":3588},"\u002Fko\u002Fjavascript-event-loop","자바스크립트 이벤트 루프 완전 정복: 마이크로태스크와 매크로태스크의 실행 순서","setTimeout(0)보다 Promise.then이 먼저 실행되는 이유는? 콜 스택, 태스크 큐, 마이크로태스크 큐가 어떤 순서로 돌아가는지 예제로 정리하고, 브라우저와 Node.js의 차이, 실무에서 UI 멈춤을 피하는 방법까지 알아보자.",{"date":3441,"field":3502,"tags":3589},[3444,3590],"nodejs",{"path":3445,"title":5,"description":3438,"meta":3592},{"date":3441,"field":3442,"tags":3593},[3444],{"path":3595,"title":3596,"description":3597,"meta":3598},"\u002Fko\u002Fjavascript-nullish-coalescing-optional-chaining","자바스크립트 ?? vs || 완벽 정리: null, undefined, 0, 빈 문자열을 올바르게 처리하는 법","볼륨 0이 50으로 바뀌고, 빈 닉네임이 '익명'이 되는 버그는 대부분 || 때문이다. ??와 ||의 차이, ?. 옵셔널 체이닝, ??=, 기본 매개변수가 적용되는 조건, null 검사하는 올바른 방법까지 직접 값을 넣어보며 정리했다.",{"date":3441,"field":3442,"tags":3599},[3444],{"path":3601,"title":3602,"description":3603,"meta":3604},"\u002Fko\u002Fjs-data-01","JavaScript 데이터01","JavaScript 데이터 다루는 문제를 풀어보자",{"date":3605,"field":3442,"tags":3606},"2025.03.08",[3444],{"path":3608,"title":3609,"description":3610,"meta":3611},"\u002Fko\u002Fjs-data-02","JavaScript 데이터02","복잡한 데이터 구조를 다루는 실전 문제를 해결해보자.",{"date":3605,"field":3442,"tags":3612},[3444],{"path":3614,"title":3615,"description":3616,"meta":3617},"\u002Fko\u002Fmarkdown-guid","마크다운 문법","마크다운 문법을 알아보자",{"date":3618,"image":3619,"field":3457,"tags":3620},"2025.03.02","markdown.webp",[3621],"markdown",{"path":3623,"title":3624,"description":3625,"meta":3626},"\u002Fko\u002Fminio-guide","MinIO 완벽 가이드: 설치부터 Node.js 연동까지","MinIO는 오픈소스 기반의 고성능 객체 스토리지 서버입니다. AWS S3와 호환되는 API를 제공하여 클라우드 네이티브 애플리케이션을 위한 완벽한 스토리지 솔루션으로 자리잡고 있습니다.",{"date":3627,"field":3628,"tags":3629},"2025.11.23","backend",[3630,3590],"minio",{"path":3632,"title":3633,"description":3634,"meta":3635},"\u002Fko\u002Fnitro-wildcard-redirect-url-migration","글 주소 프리픽스를 통째로 바꿔야 할 때: Nitro wildcard 리다이렉트로 안전하게 옮기기","\u002Fblog\u002F[슬러그]로 쓰던 글 주소를 \u002Fko\u002F[슬러그]로 옮기면서, 기존 링크\u002F북마크를 하나도 안 깨뜨리고 처리한 방법. Nitro routeRules의 와일드카드 리다이렉트 패턴과 실제로 같이 바꿔야 했던 범위를 정리한다.",{"date":3441,"field":3457,"tags":3636},[3534,3459],{"path":3638,"title":3639,"description":3640,"meta":3641},"\u002Fko\u002Fnode-simple-server","Node.js 간단한 서버 만들기","Node.js로 간단한 HTTP 서버를 만드는 방법",{"date":3642,"field":3628,"tags":3643},"2025.01.30",[3590],{"path":3645,"title":3646,"description":3647,"meta":3648},"\u002Fko\u002Fnuxt-colormode","Nuxt3 다크모드 적용하기","Nuxt3에 다크모드 적용하여 관리하기",{"date":3481,"field":3442,"tags":3649},[3534],{"path":3651,"title":3652,"description":3653,"meta":3654},"\u002Fko\u002Fnuxt-content-vercel-empty-query-sqlite","배포만 하면 블로그 글이 하나도 안 보이던 버그: Nuxt Content와 Vercel의 \u002Ftmp 문제","로컬에서는 멀쩡한데 Vercel에 올리면 queryCollection()이 빈 배열만 반환하던 버그를 추적한 과정. 원인은 @nuxt\u002Fcontent가 Vercel의 읽기 전용 파일시스템을 지원하기 전 버전에 고정돼 있었던 것.",{"date":3655,"field":3457,"tags":3656},"2026.10.07",[3461,3533],{"path":3658,"title":3659,"description":3660,"meta":3661},"\u002Fko\u002Fnuxt-runtimeconfig-appconfig","Nuxt 설정 runtimeConfig vs app.config 완전 정복","Nuxt3에서 전역 설정을 어떻게 관리하고, 어떤 기준으로 나누어야 할까? 다크모드 예시부터 실무 기준 설정 전략까지 총정리",{"date":3662,"field":3442,"tags":3663},"2025.06.16",[3534],{"path":3665,"title":3666,"description":3667,"meta":3668},"\u002Fko\u002Fnuxt-useasyncdata-cache-error","useAsyncData 캐싱 문제와 Key 동적 설정으로 해결하기","이전 포스트의 데이터가 계속 출력되는 캐싱 관련 문제를 해결하는 방법",{"date":3669,"field":3442,"tags":3670,"image":3671},"2025.01.24",[3534],"cache.jpg",{"path":3673,"title":3674,"description":3675,"meta":3676},"\u002Fko\u002Fnuxt-vercel-sql-error","Nuxt 3에서 Vercel 배포 시 발생한 md 파일 로딩 문제 해결기","Nuxt 3 웹 어플리케이션에서 Vercel 배포 환경에서 발생한 md 파일 로딩 문제를 분석하고 해결한 방법에 대해 공유합니다.",{"date":3669,"image":3677,"field":3442,"tags":3678},"ssg.jpg",[3534,3461,3533],{"path":3680,"title":3681,"description":3682,"meta":3683},"\u002Fko\u002Fnuxt3-pinia-guide","nuxt3 Pinia 적용하기","Nuxt3 프로젝트에서 Pinia를 적용해보자 @pinia\u002Fnuxt",{"date":3481,"field":3442,"tags":3684},[3534,3685],"pinia",{"path":3687,"title":3688,"description":3689,"meta":3690},"\u002Fko\u002Fnuxt3-unit-test","Nuxt 프로젝트에 유닛 테스트 코드 추가하기","Nuxt 3 프로젝트에서 Vitest를 활용한 테스트 환경 설정과 유틸리티 함수 테스트 방법",{"date":3691,"image":3692,"field":3442,"tags":3693},"2025.03.07","unit-test.jpg",[3534,3694],"vitest",{"path":3696,"title":3697,"description":3698,"meta":3699},"\u002Fko\u002Fpm2-guide","프로세스 매니저 PM2","배포환경에서 유용하게 사용할 수 있는 프로세스 매니저를 알아보자.",{"date":3540,"field":3530,"tags":3700},[3701,3590],"pm2",{"path":3703,"title":3704,"description":3705,"meta":3706},"\u002Fko\u002Freact-createportal","React createPortal 완벽 가이드","React의 `createPortal`을 활용한 UI 구현법, 활용 사례, 장단점 및 코드 예제를 소개합니다.",{"date":3707,"field":3442,"tags":3708},"2025.01.27",[3506],{"path":3710,"title":3711,"description":3712,"meta":3713},"\u002Fko\u002Frouting","Routing","Nuxt file-system routing creates a route for every file in the pages\u002F directory.",{"date":3714,"field":3442,"tags":3715},"2025.01.22",[3534],{"path":3717,"title":3718,"description":3719,"meta":3720},"\u002Fko\u002Fsemantic-html-common-mistakes","의미 있는 HTML 쓰기: 대부분이 하는 시맨틱 HTML 실수 7가지","화면에서는 똑같아 보여도 div로 만든 버튼, label 없는 입력칸, 크기로 고른 제목 태그는 키보드 사용자와 스크린 리더, 검색 엔진에게 전혀 다르게 보인다. 직접 눌러볼 수 있는 예제로 흔한 시맨틱 HTML 실수와 고치는 법을 정리했다.",{"date":3441,"field":3442,"tags":3721},[655],{"path":3723,"title":3724,"description":3725,"meta":3726},"\u002Fko\u002Ftanstack-query-guide","TanStack Query란 무엇인가?","TanStack Query가 웹 애플리케이션에서 데이터 가져오기, 캐싱, 상태 관리를 어떻게 개선하는지 알아본다.",{"date":3727,"field":3442,"tags":3728},"2025.04.15",[3506,3729],"tanstack-query",{"path":3731,"title":3732,"description":3733,"meta":3734},"\u002Fko\u002Fuse-context","리엑트 상태관리 useContext()","React에서 `useContext`를 사용하면 컴포넌트 트리에 깊이 중첩된 컴포넌트에서도 prop drilling 없이 상태를 공유할 수 있습니다. 이 글에서는 `useContext`의 개념, 사용 방법, 장단점, 그리고 실전 예제를 함께 알아보겠습니다.",{"date":3735,"field":3442,"tags":3736},"2025.02.03",[3506],{"path":3738,"title":3739,"description":3740,"meta":3741},"\u002Fko\u002Fvite-plugin-style-inject","리엑티 컴포넌트를 패키지 빌드 시 CSS 같이 적용시키기","dist에 css에 파일이 생성되었으나, 적용 안 되는 이유를 알아보고 에러를 처리하자",{"date":3742,"field":3442,"tags":3743},"2025.04.06",[3744,3506],"vite",{"path":3746,"title":3747,"description":3748,"meta":3749},"\u002Fko\u002Fvue-component-guide","Vue의 \u003Ccomponent :is \u002F> 완벽 정리: 동적 렌더링의 모든 것","Vue에서 \u003Ccomponent :is \u002F>를 활용한 동적 컴포넌트 렌더링 방법과 VNode, 컴포넌트 객체의 차이를 실전 예제로 이해하기",{"date":3473,"field":3442,"tags":3750},[3505],{"path":3752,"title":3753,"description":3754,"meta":3755},"\u002Fko\u002Fvue-query-ref-value-trap-nuxt3","Vue Query에서 데이터가 안 보이는 이유? Nuxt 3와 Ref 구조의 함정","Nuxt 3 + vue-query를 사용할 때 API 데이터가 `v-if` 조건문에서 제대로 표시되지 않는 현상을 해결한 경험을 바탕으로, Ref 구조와 template 디렉티브에서의 차이를 자세히 설명합니다.",{"date":3756,"field":3442,"tags":3757},"2025.06.08",[3534,3505,3729],1791476827278]