[{"data":1,"prerenderedAt":1649},["ShallowReactive",2],{"blog-post-\u002Fko\u002Fjs-data-01":3,"blog-related-source":1387},{"id":4,"title":5,"body":6,"description":1375,"extension":1376,"meta":1377,"navigation":186,"path":1382,"seo":1383,"sitemap":1384,"stem":1385,"__hash__":1386},"ko\u002Fko\u002Fjs-data-01.md","JavaScript 데이터01",{"type":7,"value":8,"toc":1366},"minimark",[9,14,21,43,267,271,275,284,427,431,435,452,715,719,723,738,974,978,982,994,1191,1194,1198,1201,1278,1282,1285,1362],[10,11,13],"h2",{"id":12},"문제-1-배열-필터링-및-변환-초급","문제 1: 배열 필터링 및 변환 (초급)",[15,16,17],"p",{},[18,19,20],"strong",{},"목표:",[22,23,24,36],"ul",{},[25,26,27,31,32,35],"li",{},[28,29,30],"code",{},"active","가 ",[28,33,34],{},"true","인 사용자만 필터링하세요.",[25,37,38,39,42],{},"필터링된 사용자들의 ",[28,40,41],{},"name","만 추출해 새로운 배열로 만드세요.",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-js shiki shiki-themes github-light github-dark","const users = [\n  { id: 1, name: \"Alice\", age: 25, active: true },\n  { id: 2, name: \"Bob\", age: 30, active: false },\n  { id: 3, name: \"Charlie\", age: 22, active: true },\n  { id: 4, name: \"David\", age: 35, active: false },\n];\n\nconst activeUserNames = users\n  .filter((user) => user.active)\n  .map((user) => user.name);\n\nconsole.log(activeUserNames); \u002F\u002F [\"Alice\", \"Charlie\"]\n","js","",[28,51,52,72,102,127,151,175,181,188,201,227,246,251],{"__ignoreMap":49},[53,54,57,61,65,68],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"szBVR","const",[53,62,64],{"class":63},"sj4cs"," users",[53,66,67],{"class":59}," =",[53,69,71],{"class":70},"sVt8B"," [\n",[53,73,75,78,81,84,88,91,94,97,99],{"class":55,"line":74},2,[53,76,77],{"class":70},"  { id: ",[53,79,80],{"class":63},"1",[53,82,83],{"class":70},", name: ",[53,85,87],{"class":86},"sZZnC","\"Alice\"",[53,89,90],{"class":70},", age: ",[53,92,93],{"class":63},"25",[53,95,96],{"class":70},", active: ",[53,98,34],{"class":63},[53,100,101],{"class":70}," },\n",[53,103,105,107,110,112,115,117,120,122,125],{"class":55,"line":104},3,[53,106,77],{"class":70},[53,108,109],{"class":63},"2",[53,111,83],{"class":70},[53,113,114],{"class":86},"\"Bob\"",[53,116,90],{"class":70},[53,118,119],{"class":63},"30",[53,121,96],{"class":70},[53,123,124],{"class":63},"false",[53,126,101],{"class":70},[53,128,130,132,135,137,140,142,145,147,149],{"class":55,"line":129},4,[53,131,77],{"class":70},[53,133,134],{"class":63},"3",[53,136,83],{"class":70},[53,138,139],{"class":86},"\"Charlie\"",[53,141,90],{"class":70},[53,143,144],{"class":63},"22",[53,146,96],{"class":70},[53,148,34],{"class":63},[53,150,101],{"class":70},[53,152,154,156,159,161,164,166,169,171,173],{"class":55,"line":153},5,[53,155,77],{"class":70},[53,157,158],{"class":63},"4",[53,160,83],{"class":70},[53,162,163],{"class":86},"\"David\"",[53,165,90],{"class":70},[53,167,168],{"class":63},"35",[53,170,96],{"class":70},[53,172,124],{"class":63},[53,174,101],{"class":70},[53,176,178],{"class":55,"line":177},6,[53,179,180],{"class":70},"];\n",[53,182,184],{"class":55,"line":183},7,[53,185,187],{"emptyLinePlaceholder":186},true,"\n",[53,189,191,193,196,198],{"class":55,"line":190},8,[53,192,60],{"class":59},[53,194,195],{"class":63}," activeUserNames",[53,197,67],{"class":59},[53,199,200],{"class":70}," users\n",[53,202,204,207,211,214,218,221,224],{"class":55,"line":203},9,[53,205,206],{"class":70},"  .",[53,208,210],{"class":209},"sScJk","filter",[53,212,213],{"class":70},"((",[53,215,217],{"class":216},"s4XuR","user",[53,219,220],{"class":70},") ",[53,222,223],{"class":59},"=>",[53,225,226],{"class":70}," user.active)\n",[53,228,230,232,235,237,239,241,243],{"class":55,"line":229},10,[53,231,206],{"class":70},[53,233,234],{"class":209},"map",[53,236,213],{"class":70},[53,238,217],{"class":216},[53,240,220],{"class":70},[53,242,223],{"class":59},[53,244,245],{"class":70}," user.name);\n",[53,247,249],{"class":55,"line":248},11,[53,250,187],{"emptyLinePlaceholder":186},[53,252,254,257,260,263],{"class":55,"line":253},12,[53,255,256],{"class":70},"console.",[53,258,259],{"class":209},"log",[53,261,262],{"class":70},"(activeUserNames); ",[53,264,266],{"class":265},"sJ8bj","\u002F\u002F [\"Alice\", \"Charlie\"]\n",[10,268,270],{"id":269},"문제-2-데이터-합계-계산-초급","문제 2: 데이터 합계 계산 (초급)",[15,272,273],{},[18,274,20],{},[22,276,277],{},[25,278,279,280,283],{},"모든 ",[28,281,282],{},"amount","의 합계를 구하세요.",[44,285,287],{"className":46,"code":286,"language":48,"meta":49,"style":49},"const orders = [\n  { orderId: \"A1\", amount: 100 },\n  { orderId: \"A2\", amount: 250 },\n  { orderId: \"A3\", amount: 75 },\n  { orderId: \"A4\", amount: 300 },\n];\n\nconst totalOrderAmount = orders.reduce((acc, order) => acc + order.amount, 0);\n\nconsole.log(totalOrderAmount); \u002F\u002F 725\n",[28,288,289,300,316,330,344,358,362,366,411,415],{"__ignoreMap":49},[53,290,291,293,296,298],{"class":55,"line":56},[53,292,60],{"class":59},[53,294,295],{"class":63}," orders",[53,297,67],{"class":59},[53,299,71],{"class":70},[53,301,302,305,308,311,314],{"class":55,"line":74},[53,303,304],{"class":70},"  { orderId: ",[53,306,307],{"class":86},"\"A1\"",[53,309,310],{"class":70},", amount: ",[53,312,313],{"class":63},"100",[53,315,101],{"class":70},[53,317,318,320,323,325,328],{"class":55,"line":104},[53,319,304],{"class":70},[53,321,322],{"class":86},"\"A2\"",[53,324,310],{"class":70},[53,326,327],{"class":63},"250",[53,329,101],{"class":70},[53,331,332,334,337,339,342],{"class":55,"line":129},[53,333,304],{"class":70},[53,335,336],{"class":86},"\"A3\"",[53,338,310],{"class":70},[53,340,341],{"class":63},"75",[53,343,101],{"class":70},[53,345,346,348,351,353,356],{"class":55,"line":153},[53,347,304],{"class":70},[53,349,350],{"class":86},"\"A4\"",[53,352,310],{"class":70},[53,354,355],{"class":63},"300",[53,357,101],{"class":70},[53,359,360],{"class":55,"line":177},[53,361,180],{"class":70},[53,363,364],{"class":55,"line":183},[53,365,187],{"emptyLinePlaceholder":186},[53,367,368,370,373,375,378,381,383,386,389,392,394,396,399,402,405,408],{"class":55,"line":190},[53,369,60],{"class":59},[53,371,372],{"class":63}," totalOrderAmount",[53,374,67],{"class":59},[53,376,377],{"class":70}," orders.",[53,379,380],{"class":209},"reduce",[53,382,213],{"class":70},[53,384,385],{"class":216},"acc",[53,387,388],{"class":70},", ",[53,390,391],{"class":216},"order",[53,393,220],{"class":70},[53,395,223],{"class":59},[53,397,398],{"class":70}," acc ",[53,400,401],{"class":59},"+",[53,403,404],{"class":70}," order.amount, ",[53,406,407],{"class":63},"0",[53,409,410],{"class":70},");\n",[53,412,413],{"class":55,"line":203},[53,414,187],{"emptyLinePlaceholder":186},[53,416,417,419,421,424],{"class":55,"line":229},[53,418,256],{"class":70},[53,420,259],{"class":209},[53,422,423],{"class":70},"(totalOrderAmount); ",[53,425,426],{"class":265},"\u002F\u002F 725\n",[10,428,430],{"id":429},"문제-3-데이터-그룹화-중급","문제 3: 데이터 그룹화 (중급)",[15,432,433],{},[18,434,20],{},[22,436,437,443],{},[25,438,439,442],{},[28,440,441],{},"category","별로 제품을 그룹화하고, 각 카테고리의 제품 이름 배열을 만드세요.",[25,444,445,447,448,451],{},[28,446,441],{},"가 없는 제품은 ",[28,449,450],{},"\"Uncategorized\""," 그룹에 포함하세요.",[44,453,455],{"className":46,"code":454,"language":48,"meta":49,"style":49},"const products = [\n  { name: \"Laptop\", category: \"Electronics\", price: 1000 },\n  { name: \"Shirt\", category: \"Clothing\", price: 20 },\n  { name: \"Phone\", category: \"Electronics\", price: 500 },\n  { name: \"Jeans\", price: 50 },\n];\n\nconst productsByCategory = products.reduce((acc, product) => {\n  const category = product.category || \"Uncategorized\";\n  if (!acc[category]) {\n    acc[category] = [];\n  }\n  acc[category].push(product.name);\n  return acc;\n}, {});\n\nconsole.log(productsByCategory);\n\u002F*\n{\n  Electronics: [\"Laptop\", \"Phone\"],\n  Clothing: [\"Shirt\"],\n  Uncategorized: [\"Jeans\"]\n}\n*\u002F\n",[28,456,457,468,490,509,527,541,545,549,579,601,615,626,631,643,652,658,663,673,679,685,691,697,703,709],{"__ignoreMap":49},[53,458,459,461,464,466],{"class":55,"line":56},[53,460,60],{"class":59},[53,462,463],{"class":63}," products",[53,465,67],{"class":59},[53,467,71],{"class":70},[53,469,470,473,476,479,482,485,488],{"class":55,"line":74},[53,471,472],{"class":70},"  { name: ",[53,474,475],{"class":86},"\"Laptop\"",[53,477,478],{"class":70},", category: ",[53,480,481],{"class":86},"\"Electronics\"",[53,483,484],{"class":70},", price: ",[53,486,487],{"class":63},"1000",[53,489,101],{"class":70},[53,491,492,494,497,499,502,504,507],{"class":55,"line":104},[53,493,472],{"class":70},[53,495,496],{"class":86},"\"Shirt\"",[53,498,478],{"class":70},[53,500,501],{"class":86},"\"Clothing\"",[53,503,484],{"class":70},[53,505,506],{"class":63},"20",[53,508,101],{"class":70},[53,510,511,513,516,518,520,522,525],{"class":55,"line":129},[53,512,472],{"class":70},[53,514,515],{"class":86},"\"Phone\"",[53,517,478],{"class":70},[53,519,481],{"class":86},[53,521,484],{"class":70},[53,523,524],{"class":63},"500",[53,526,101],{"class":70},[53,528,529,531,534,536,539],{"class":55,"line":153},[53,530,472],{"class":70},[53,532,533],{"class":86},"\"Jeans\"",[53,535,484],{"class":70},[53,537,538],{"class":63},"50",[53,540,101],{"class":70},[53,542,543],{"class":55,"line":177},[53,544,180],{"class":70},[53,546,547],{"class":55,"line":183},[53,548,187],{"emptyLinePlaceholder":186},[53,550,551,553,556,558,561,563,565,567,569,572,574,576],{"class":55,"line":190},[53,552,60],{"class":59},[53,554,555],{"class":63}," productsByCategory",[53,557,67],{"class":59},[53,559,560],{"class":70}," products.",[53,562,380],{"class":209},[53,564,213],{"class":70},[53,566,385],{"class":216},[53,568,388],{"class":70},[53,570,571],{"class":216},"product",[53,573,220],{"class":70},[53,575,223],{"class":59},[53,577,578],{"class":70}," {\n",[53,580,581,584,587,589,592,595,598],{"class":55,"line":203},[53,582,583],{"class":59},"  const",[53,585,586],{"class":63}," category",[53,588,67],{"class":59},[53,590,591],{"class":70}," product.category ",[53,593,594],{"class":59},"||",[53,596,597],{"class":86}," \"Uncategorized\"",[53,599,600],{"class":70},";\n",[53,602,603,606,609,612],{"class":55,"line":229},[53,604,605],{"class":59},"  if",[53,607,608],{"class":70}," (",[53,610,611],{"class":59},"!",[53,613,614],{"class":70},"acc[category]) {\n",[53,616,617,620,623],{"class":55,"line":248},[53,618,619],{"class":70},"    acc[category] ",[53,621,622],{"class":59},"=",[53,624,625],{"class":70}," [];\n",[53,627,628],{"class":55,"line":253},[53,629,630],{"class":70},"  }\n",[53,632,634,637,640],{"class":55,"line":633},13,[53,635,636],{"class":70},"  acc[category].",[53,638,639],{"class":209},"push",[53,641,642],{"class":70},"(product.name);\n",[53,644,646,649],{"class":55,"line":645},14,[53,647,648],{"class":59},"  return",[53,650,651],{"class":70}," acc;\n",[53,653,655],{"class":55,"line":654},15,[53,656,657],{"class":70},"}, {});\n",[53,659,661],{"class":55,"line":660},16,[53,662,187],{"emptyLinePlaceholder":186},[53,664,666,668,670],{"class":55,"line":665},17,[53,667,256],{"class":70},[53,669,259],{"class":209},[53,671,672],{"class":70},"(productsByCategory);\n",[53,674,676],{"class":55,"line":675},18,[53,677,678],{"class":265},"\u002F*\n",[53,680,682],{"class":55,"line":681},19,[53,683,684],{"class":265},"{\n",[53,686,688],{"class":55,"line":687},20,[53,689,690],{"class":265},"  Electronics: [\"Laptop\", \"Phone\"],\n",[53,692,694],{"class":55,"line":693},21,[53,695,696],{"class":265},"  Clothing: [\"Shirt\"],\n",[53,698,700],{"class":55,"line":699},22,[53,701,702],{"class":265},"  Uncategorized: [\"Jeans\"]\n",[53,704,706],{"class":55,"line":705},23,[53,707,708],{"class":265},"}\n",[53,710,712],{"class":55,"line":711},24,[53,713,714],{"class":265},"*\u002F\n",[10,716,718],{"id":717},"문제-4-데이터-정렬-및-변환-중급","문제 4: 데이터 정렬 및 변환 (중급)",[15,720,721],{},[18,722,20],{},[22,724,725,731],{},[25,726,727,730],{},[28,728,729],{},"score","를 기준으로 학생들을 내림차순으로 정렬하세요.",[25,732,733,734,737],{},"각 학생 객체에 ",[28,735,736],{},"rank"," 속성을 추가해 순위를 매기세요 (1위부터 시작).",[44,739,741],{"className":46,"code":740,"language":48,"meta":49,"style":49},"const students = [\n  { name: \"Eve\", score: 85 },\n  { name: \"Frank\", score: 92 },\n  { name: \"Grace\", score: 78 },\n  { name: \"Helen\", score: 95 },\n];\n\n\u002F\u002F 1. score 기준 내림차순 정렬\nconst sortedStudents = [...students].sort((a, b) => b.score - a.score);\n\n\u002F\u002F 2. rank 속성 추가\nsortedStudents.forEach((student, index) => {\n  student.rank = index + 1;\n});\n\nconsole.log(sortedStudents);\n\u002F*\n[\n  { name: \"Helen\", score: 95, rank: 1 },\n  { name: \"Frank\", score: 92, rank: 2 },\n  { name: \"Eve\", score: 85, rank: 3 },\n  { name: \"Grace\", score: 78, rank: 4 }\n]\n*\u002F\n",[28,742,743,754,769,783,797,811,815,819,824,868,872,877,901,918,923,927,936,940,945,950,955,960,965,970],{"__ignoreMap":49},[53,744,745,747,750,752],{"class":55,"line":56},[53,746,60],{"class":59},[53,748,749],{"class":63}," students",[53,751,67],{"class":59},[53,753,71],{"class":70},[53,755,756,758,761,764,767],{"class":55,"line":74},[53,757,472],{"class":70},[53,759,760],{"class":86},"\"Eve\"",[53,762,763],{"class":70},", score: ",[53,765,766],{"class":63},"85",[53,768,101],{"class":70},[53,770,771,773,776,778,781],{"class":55,"line":104},[53,772,472],{"class":70},[53,774,775],{"class":86},"\"Frank\"",[53,777,763],{"class":70},[53,779,780],{"class":63},"92",[53,782,101],{"class":70},[53,784,785,787,790,792,795],{"class":55,"line":129},[53,786,472],{"class":70},[53,788,789],{"class":86},"\"Grace\"",[53,791,763],{"class":70},[53,793,794],{"class":63},"78",[53,796,101],{"class":70},[53,798,799,801,804,806,809],{"class":55,"line":153},[53,800,472],{"class":70},[53,802,803],{"class":86},"\"Helen\"",[53,805,763],{"class":70},[53,807,808],{"class":63},"95",[53,810,101],{"class":70},[53,812,813],{"class":55,"line":177},[53,814,180],{"class":70},[53,816,817],{"class":55,"line":183},[53,818,187],{"emptyLinePlaceholder":186},[53,820,821],{"class":55,"line":190},[53,822,823],{"class":265},"\u002F\u002F 1. score 기준 내림차순 정렬\n",[53,825,826,828,831,833,836,839,842,845,847,850,852,855,857,859,862,865],{"class":55,"line":203},[53,827,60],{"class":59},[53,829,830],{"class":63}," sortedStudents",[53,832,67],{"class":59},[53,834,835],{"class":70}," [",[53,837,838],{"class":59},"...",[53,840,841],{"class":70},"students].",[53,843,844],{"class":209},"sort",[53,846,213],{"class":70},[53,848,849],{"class":216},"a",[53,851,388],{"class":70},[53,853,854],{"class":216},"b",[53,856,220],{"class":70},[53,858,223],{"class":59},[53,860,861],{"class":70}," b.score ",[53,863,864],{"class":59},"-",[53,866,867],{"class":70}," a.score);\n",[53,869,870],{"class":55,"line":229},[53,871,187],{"emptyLinePlaceholder":186},[53,873,874],{"class":55,"line":248},[53,875,876],{"class":265},"\u002F\u002F 2. rank 속성 추가\n",[53,878,879,882,885,887,890,892,895,897,899],{"class":55,"line":253},[53,880,881],{"class":70},"sortedStudents.",[53,883,884],{"class":209},"forEach",[53,886,213],{"class":70},[53,888,889],{"class":216},"student",[53,891,388],{"class":70},[53,893,894],{"class":216},"index",[53,896,220],{"class":70},[53,898,223],{"class":59},[53,900,578],{"class":70},[53,902,903,906,908,911,913,916],{"class":55,"line":633},[53,904,905],{"class":70},"  student.rank ",[53,907,622],{"class":59},[53,909,910],{"class":70}," index ",[53,912,401],{"class":59},[53,914,915],{"class":63}," 1",[53,917,600],{"class":70},[53,919,920],{"class":55,"line":645},[53,921,922],{"class":70},"});\n",[53,924,925],{"class":55,"line":654},[53,926,187],{"emptyLinePlaceholder":186},[53,928,929,931,933],{"class":55,"line":660},[53,930,256],{"class":70},[53,932,259],{"class":209},[53,934,935],{"class":70},"(sortedStudents);\n",[53,937,938],{"class":55,"line":665},[53,939,678],{"class":265},[53,941,942],{"class":55,"line":675},[53,943,944],{"class":265},"[\n",[53,946,947],{"class":55,"line":681},[53,948,949],{"class":265},"  { name: \"Helen\", score: 95, rank: 1 },\n",[53,951,952],{"class":55,"line":687},[53,953,954],{"class":265},"  { name: \"Frank\", score: 92, rank: 2 },\n",[53,956,957],{"class":55,"line":693},[53,958,959],{"class":265},"  { name: \"Eve\", score: 85, rank: 3 },\n",[53,961,962],{"class":55,"line":699},[53,963,964],{"class":265},"  { name: \"Grace\", score: 78, rank: 4 }\n",[53,966,967],{"class":55,"line":705},[53,968,969],{"class":265},"]\n",[53,971,972],{"class":55,"line":711},[53,973,714],{"class":265},[10,975,977],{"id":976},"문제-5-중첩-데이터-처리-중급","문제 5: 중첩 데이터 처리 (중급)",[15,979,980],{},[18,981,20],{},[22,983,984],{},[25,985,986,987,989,990,993],{},"\"Python\" 스킬을 가진 직원만 필터링하고, 그들의 ",[28,988,41],{},"과 ",[28,991,992],{},"skills","를 새로운 배열로 만드세요.",[44,995,997],{"className":46,"code":996,"language":48,"meta":49,"style":49},"const employees = [\n  { id: 1, name: \"John\", skills: [\"JavaScript\", \"Python\"] },\n  { id: 2, name: \"Jane\", skills: [\"React\", \"Node.js\"] },\n  { id: 3, name: \"Jim\", skills: [\"Python\", \"Django\"] },\n];\n\nconst pythonDevs = employees\n  .filter((employee) => employee.skills.includes(\"Python\"))\n  .map(({ name, skills }) => ({ name, skills }));\n\nconsole.log(pythonDevs);\n\u002F*\n[\n  { name: \"John\", skills: [\"JavaScript\", \"Python\"] },\n  { name: \"Jim\", skills: [\"Python\", \"Django\"] }\n]\n*\u002F\n",[28,998,999,1010,1035,1058,1080,1084,1088,1100,1129,1152,1156,1165,1169,1173,1178,1183,1187],{"__ignoreMap":49},[53,1000,1001,1003,1006,1008],{"class":55,"line":56},[53,1002,60],{"class":59},[53,1004,1005],{"class":63}," employees",[53,1007,67],{"class":59},[53,1009,71],{"class":70},[53,1011,1012,1014,1016,1018,1021,1024,1027,1029,1032],{"class":55,"line":74},[53,1013,77],{"class":70},[53,1015,80],{"class":63},[53,1017,83],{"class":70},[53,1019,1020],{"class":86},"\"John\"",[53,1022,1023],{"class":70},", skills: [",[53,1025,1026],{"class":86},"\"JavaScript\"",[53,1028,388],{"class":70},[53,1030,1031],{"class":86},"\"Python\"",[53,1033,1034],{"class":70},"] },\n",[53,1036,1037,1039,1041,1043,1046,1048,1051,1053,1056],{"class":55,"line":104},[53,1038,77],{"class":70},[53,1040,109],{"class":63},[53,1042,83],{"class":70},[53,1044,1045],{"class":86},"\"Jane\"",[53,1047,1023],{"class":70},[53,1049,1050],{"class":86},"\"React\"",[53,1052,388],{"class":70},[53,1054,1055],{"class":86},"\"Node.js\"",[53,1057,1034],{"class":70},[53,1059,1060,1062,1064,1066,1069,1071,1073,1075,1078],{"class":55,"line":129},[53,1061,77],{"class":70},[53,1063,134],{"class":63},[53,1065,83],{"class":70},[53,1067,1068],{"class":86},"\"Jim\"",[53,1070,1023],{"class":70},[53,1072,1031],{"class":86},[53,1074,388],{"class":70},[53,1076,1077],{"class":86},"\"Django\"",[53,1079,1034],{"class":70},[53,1081,1082],{"class":55,"line":153},[53,1083,180],{"class":70},[53,1085,1086],{"class":55,"line":177},[53,1087,187],{"emptyLinePlaceholder":186},[53,1089,1090,1092,1095,1097],{"class":55,"line":183},[53,1091,60],{"class":59},[53,1093,1094],{"class":63}," pythonDevs",[53,1096,67],{"class":59},[53,1098,1099],{"class":70}," employees\n",[53,1101,1102,1104,1106,1108,1111,1113,1115,1118,1121,1124,1126],{"class":55,"line":190},[53,1103,206],{"class":70},[53,1105,210],{"class":209},[53,1107,213],{"class":70},[53,1109,1110],{"class":216},"employee",[53,1112,220],{"class":70},[53,1114,223],{"class":59},[53,1116,1117],{"class":70}," employee.skills.",[53,1119,1120],{"class":209},"includes",[53,1122,1123],{"class":70},"(",[53,1125,1031],{"class":86},[53,1127,1128],{"class":70},"))\n",[53,1130,1131,1133,1135,1138,1140,1142,1144,1147,1149],{"class":55,"line":203},[53,1132,206],{"class":70},[53,1134,234],{"class":209},[53,1136,1137],{"class":70},"(({ ",[53,1139,41],{"class":216},[53,1141,388],{"class":70},[53,1143,992],{"class":216},[53,1145,1146],{"class":70}," }) ",[53,1148,223],{"class":59},[53,1150,1151],{"class":70}," ({ name, skills }));\n",[53,1153,1154],{"class":55,"line":229},[53,1155,187],{"emptyLinePlaceholder":186},[53,1157,1158,1160,1162],{"class":55,"line":248},[53,1159,256],{"class":70},[53,1161,259],{"class":209},[53,1163,1164],{"class":70},"(pythonDevs);\n",[53,1166,1167],{"class":55,"line":253},[53,1168,678],{"class":265},[53,1170,1171],{"class":55,"line":633},[53,1172,944],{"class":265},[53,1174,1175],{"class":55,"line":645},[53,1176,1177],{"class":265},"  { name: \"John\", skills: [\"JavaScript\", \"Python\"] },\n",[53,1179,1180],{"class":55,"line":654},[53,1181,1182],{"class":265},"  { name: \"Jim\", skills: [\"Python\", \"Django\"] }\n",[53,1184,1185],{"class":55,"line":660},[53,1186,969],{"class":265},[53,1188,1189],{"class":55,"line":665},[53,1190,714],{"class":265},[1192,1193],"hr",{},[10,1195,1197],{"id":1196},"중복-제거","중복 제거",[15,1199,1200],{},"배열에서 중복된 값을 제거하세요.",[44,1202,1204],{"className":46,"code":1203,"language":48,"meta":49,"style":49},"const numbers = [1, 2, 2, 3, 4, 4, 5];\nconst uniqueNumbers = [...new Set(numbers)];\nconsole.log(uniqueNumbers); \u002F\u002F [1, 2, 3, 4, 5]\n",[28,1205,1206,1246,1266],{"__ignoreMap":49},[53,1207,1208,1210,1213,1215,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241,1244],{"class":55,"line":56},[53,1209,60],{"class":59},[53,1211,1212],{"class":63}," numbers",[53,1214,67],{"class":59},[53,1216,835],{"class":70},[53,1218,80],{"class":63},[53,1220,388],{"class":70},[53,1222,109],{"class":63},[53,1224,388],{"class":70},[53,1226,109],{"class":63},[53,1228,388],{"class":70},[53,1230,134],{"class":63},[53,1232,388],{"class":70},[53,1234,158],{"class":63},[53,1236,388],{"class":70},[53,1238,158],{"class":63},[53,1240,388],{"class":70},[53,1242,1243],{"class":63},"5",[53,1245,180],{"class":70},[53,1247,1248,1250,1253,1255,1257,1260,1263],{"class":55,"line":74},[53,1249,60],{"class":59},[53,1251,1252],{"class":63}," uniqueNumbers",[53,1254,67],{"class":59},[53,1256,835],{"class":70},[53,1258,1259],{"class":59},"...new",[53,1261,1262],{"class":209}," Set",[53,1264,1265],{"class":70},"(numbers)];\n",[53,1267,1268,1270,1272,1275],{"class":55,"line":104},[53,1269,256],{"class":70},[53,1271,259],{"class":209},[53,1273,1274],{"class":70},"(uniqueNumbers); ",[53,1276,1277],{"class":265},"\u002F\u002F [1, 2, 3, 4, 5]\n",[10,1279,1281],{"id":1280},"중첩-배열-평탄화","중첩 배열 평탄화",[15,1283,1284],{},"배열의 중첩된 구조를 한 단계로 펼치세요.",[44,1286,1288],{"className":46,"code":1287,"language":48,"meta":49,"style":49},"const nestedArray = [1, [2, 3], [4, [5, 6]]];\nconst flatArray = nestedArray.flat(2);\nconsole.log(flatArray); \u002F\u002F [1, 2, 3, 4, 5, 6]\n",[28,1289,1290,1329,1350],{"__ignoreMap":49},[53,1291,1292,1294,1297,1299,1301,1303,1306,1308,1310,1312,1315,1317,1319,1321,1323,1326],{"class":55,"line":56},[53,1293,60],{"class":59},[53,1295,1296],{"class":63}," nestedArray",[53,1298,67],{"class":59},[53,1300,835],{"class":70},[53,1302,80],{"class":63},[53,1304,1305],{"class":70},", [",[53,1307,109],{"class":63},[53,1309,388],{"class":70},[53,1311,134],{"class":63},[53,1313,1314],{"class":70},"], [",[53,1316,158],{"class":63},[53,1318,1305],{"class":70},[53,1320,1243],{"class":63},[53,1322,388],{"class":70},[53,1324,1325],{"class":63},"6",[53,1327,1328],{"class":70},"]]];\n",[53,1330,1331,1333,1336,1338,1341,1344,1346,1348],{"class":55,"line":74},[53,1332,60],{"class":59},[53,1334,1335],{"class":63}," flatArray",[53,1337,67],{"class":59},[53,1339,1340],{"class":70}," nestedArray.",[53,1342,1343],{"class":209},"flat",[53,1345,1123],{"class":70},[53,1347,109],{"class":63},[53,1349,410],{"class":70},[53,1351,1352,1354,1356,1359],{"class":55,"line":104},[53,1353,256],{"class":70},[53,1355,259],{"class":209},[53,1357,1358],{"class":70},"(flatArray); ",[53,1360,1361],{"class":265},"\u002F\u002F [1, 2, 3, 4, 5, 6]\n",[1363,1364,1365],"style",{},"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 .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 pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":49,"searchDepth":74,"depth":74,"links":1367},[1368,1369,1370,1371,1372,1373,1374],{"id":12,"depth":74,"text":13},{"id":269,"depth":74,"text":270},{"id":429,"depth":74,"text":430},{"id":717,"depth":74,"text":718},{"id":976,"depth":74,"text":977},{"id":1196,"depth":74,"text":1197},{"id":1280,"depth":74,"text":1281},"JavaScript 데이터 다루는 문제를 풀어보자","md",{"date":1378,"field":1379,"tags":1380},"2025.03.08","frontend",[1381],"javascript","\u002Fko\u002Fjs-data-01",{"title":5,"description":1375},{"loc":1382},"ko\u002Fjs-data-01","mz3t4Znp1kEYvtIKJTyXc-fns42NqVmiYGasWdc2GUM",[1388,1399,1408,1416,1423,1430,1441,1449,1457,1469,1477,1486,1492,1499,1506,1509,1515,1524,1534,1541,1547,1554,1561,1569,1576,1583,1592,1599,1606,1613,1621,1628,1636,1642],{"path":1389,"title":1390,"description":1391,"meta":1392},"\u002Fko\u002Fadsense-ads-txt-and-seo-indexing-bug","애드센스 ads.txt 경고를 받고 파헤치다가 찾은 진짜 색인 버그","구글 애드센스가 ads.txt 문제를 알려왔는데, 확인해보니 파일은 멀쩡했다. 대신 서치콘솔 색인 수가 적었던 진짜 원인을 Nuxt Content 슬러그 불일치 버그에서 찾은 과정을 정리한다.",{"date":1393,"field":1394,"tags":1395},"2026.09.17","blog",[1396,1397,1398],"seo","adsense","nuxt-content",{"path":1400,"title":1401,"description":1402,"meta":1403},"\u002Fko\u002Fcss-layouts","CSS Flexbox 완전 정복 가이드","Flexbox를 활용한 반응형 레이아웃 구현 방법과 실전 예제. 수직 정렬, 네비게이션 바, 카드 레이아웃까지 완벽 정리!",{"date":1404,"image":1405,"field":1379,"tags":1406},"2025.01.25","css.jpg",[1407],"css",{"path":1409,"title":1410,"description":1411,"meta":1412},"\u002Fko\u002Fcss-login-form","로그인","로그인 UI를 그려보자",{"date":1413,"field":1379,"tags":1414},"2025.03.29",[1415,1407],"html",{"path":1417,"title":1418,"description":1419,"meta":1420},"\u002Fko\u002Fcsv-parser-cleaning","복잡한 CSV 데이터를 안전하게 파싱하는 방법","JavaScript에서 큰따옴표, 줄바꿈, 쉼표 등 복잡한 CSV 데이터를 안전하게 객체로 변환하는 전체 과정 설명",{"date":1421,"field":1379,"tags":1422},"2025.06.19",[1381],{"path":1424,"title":1425,"description":1426,"meta":1427},"\u002Fko\u002Fdebounce-guide","debounce와 throttle이란??","반복되는 함수 호출을 제어하는 기술인 디바운스(debounce)와 쓰로틀(throttle)을 알아보자.",{"date":1428,"field":1379,"tags":1429},"2025.03.26",[1381],{"path":1431,"title":1432,"description":1433,"meta":1434},"\u002Fko\u002Fdeclarative-vs-procedural-programming","선언적 프로그래밍 vs 절차형 프로그래밍","선언적 프로그래밍과 절차형 프로그래밍은 서로 대비되는 대표적인 패러다임이다. 두 패러다임의 차이를 알아보고, 각 패러다임에 해당하는 언어와 Vue\u002FReact의 특징을 살펴보자.",{"date":1435,"field":1436,"tags":1437},"2025.05.24","concepts",[1438,1439,1440],"paradigm","vue","react",{"path":1442,"title":1443,"description":1444,"meta":1445},"\u002Fko\u002Fdesign-guide","Design-Guide","A comprehensive guide on design principles and best practices for developers.",{"date":1446,"field":1379,"tags":1447},"2025.01.19",[1448],"design-system",{"path":1450,"title":1451,"description":1452,"meta":1453},"\u002Fko\u002Fdikw-pyramid","DIKW 피라미드 정리: 데이터가 지혜가 되기까지","Data, Information, Knowledge, Wisdom 4단계로 구성된 DIKW 피라미드 개념을 로그\u002F분석 데이터 같은 실제 개발 사례에 대입해서 정리한다.",{"date":1454,"field":1436,"tags":1455},"2026.09.18",[1456],"data",{"path":1458,"title":1459,"description":1460,"meta":1461},"\u002Fko\u002Fdisplaying-commits-with-github-actions","깃허브 액션으로 커밋 로그를 블로그에 띄우기: Nuxt와 Vercel 활용법","깃허브 액션을 통해 커밋 데이터를 자동으로 수집하고, Nuxt와 Vercel로 UI에 노출하는 방법을 소개합니다.",{"date":1462,"image":1463,"field":1464,"tags":1465},"2025.02.28","github-commits.jpg","infra",[1466,1467,1468],"github-actions","vercel","nuxt",{"path":1470,"title":1471,"description":1472,"meta":1473},"\u002Fko\u002Fdocker-auto-build-run","로컬에서 커밋 시 도커 빌드 후 컨테이너 시작하기","로컬에서 커밋 시 도커 빌드 후 컨테이너 시작하기.",{"date":1474,"field":1464,"tags":1475},"2025.03.10",[1476],"docker",{"path":1478,"title":1479,"description":1480,"meta":1481},"\u002Fko\u002Fhow-to-mount-storage","라즈베리파이4에 저장장치 마운트 시키기","라즈베리파이에 저장장치를 연결하고 파티션 생성부터 포맷, 마운트까지의 전체 과정을 정리한 기록입니다.",{"date":1482,"field":1464,"tags":1483},"2025.07.11",[1484,1485],"raspberry-pi","linux",{"path":1487,"title":1488,"description":1488,"meta":1489},"\u002Fko\u002Fhtml","HTML이란 무엇인가",{"date":1404,"image":1490,"field":1379,"tags":1491},"html.jpg",[1415],{"path":1493,"title":1494,"description":1495,"meta":1496},"\u002Fko\u002Fhtml2","미치광이 카드 컴포넌트","미치광이 카드 컴포넌트는 어떤 느낌일까",{"date":1497,"field":1379,"tags":1498},"2025.03.28",[1415,1407],{"path":1500,"title":1501,"description":1501,"meta":1502},"\u002Fko\u002Fhttps-guide","Let's Encrypt를 이용해서 HTTPS 적용하기",{"date":1503,"field":1464,"tags":1504},"2025.03.11",[1505],"https",{"path":1382,"title":5,"description":1375,"meta":1507},{"date":1378,"field":1379,"tags":1508},[1381],{"path":1510,"title":1511,"description":1512,"meta":1513},"\u002Fko\u002Fjs-data-02","JavaScript 데이터02","복잡한 데이터 구조를 다루는 실전 문제를 해결해보자.",{"date":1378,"field":1379,"tags":1514},[1381],{"path":1516,"title":1517,"description":1518,"meta":1519},"\u002Fko\u002Fmarkdown-guid","마크다운 문법","마크다운 문법을 알아보자",{"date":1520,"image":1521,"field":1394,"tags":1522},"2025.03.02","markdown.webp",[1523],"markdown",{"path":1525,"title":1526,"description":1527,"meta":1528},"\u002Fko\u002Fminio-guide","MinIO 완벽 가이드: 설치부터 Node.js 연동까지","MinIO는 오픈소스 기반의 고성능 객체 스토리지 서버입니다. AWS S3와 호환되는 API를 제공하여 클라우드 네이티브 애플리케이션을 위한 완벽한 스토리지 솔루션으로 자리잡고 있습니다.",{"date":1529,"field":1530,"tags":1531},"2025.11.23","backend",[1532,1533],"minio","nodejs",{"path":1535,"title":1536,"description":1537,"meta":1538},"\u002Fko\u002Fnode-simple-server","Node.js 간단한 서버 만들기","Node.js로 간단한 HTTP 서버를 만드는 방법",{"date":1539,"field":1530,"tags":1540},"2025.01.30",[1533],{"path":1542,"title":1543,"description":1544,"meta":1545},"\u002Fko\u002Fnuxt-colormode","Nuxt3 다크모드 적용하기","Nuxt3에 다크모드 적용하여 관리하기",{"date":1413,"field":1379,"tags":1546},[1468],{"path":1548,"title":1549,"description":1550,"meta":1551},"\u002Fko\u002Fnuxt-content-vercel-empty-query-sqlite","배포만 하면 블로그 글이 하나도 안 보이던 버그: Nuxt Content와 Vercel의 \u002Ftmp 문제","로컬에서는 멀쩡한데 Vercel에 올리면 queryCollection()이 빈 배열만 반환하던 버그를 추적한 과정. 원인은 @nuxt\u002Fcontent가 Vercel의 읽기 전용 파일시스템을 지원하기 전 버전에 고정돼 있었던 것.",{"date":1552,"field":1394,"tags":1553},"2026.10.07",[1398,1467],{"path":1555,"title":1556,"description":1557,"meta":1558},"\u002Fko\u002Fnuxt-runtimeconfig-appconfig","Nuxt 설정 runtimeConfig vs app.config 완전 정복","Nuxt3에서 전역 설정을 어떻게 관리하고, 어떤 기준으로 나누어야 할까? 다크모드 예시부터 실무 기준 설정 전략까지 총정리",{"date":1559,"field":1379,"tags":1560},"2025.06.16",[1468],{"path":1562,"title":1563,"description":1564,"meta":1565},"\u002Fko\u002Fnuxt-useasyncdata-cache-error","useAsyncData 캐싱 문제와 Key 동적 설정으로 해결하기","이전 포스트의 데이터가 계속 출력되는 캐싱 관련 문제를 해결하는 방법",{"date":1566,"field":1379,"tags":1567,"image":1568},"2025.01.24",[1468],"cache.jpg",{"path":1570,"title":1571,"description":1572,"meta":1573},"\u002Fko\u002Fnuxt-vercel-sql-error","Nuxt 3에서 Vercel 배포 시 발생한 md 파일 로딩 문제 해결기","Nuxt 3 웹 어플리케이션에서 Vercel 배포 환경에서 발생한 md 파일 로딩 문제를 분석하고 해결한 방법에 대해 공유합니다.",{"date":1566,"image":1574,"field":1379,"tags":1575},"ssg.jpg",[1468,1398,1467],{"path":1577,"title":1578,"description":1579,"meta":1580},"\u002Fko\u002Fnuxt3-pinia-guide","nuxt3 Pinia 적용하기","Nuxt3 프로젝트에서 Pinia를 적용해보자 @pinia\u002Fnuxt",{"date":1413,"field":1379,"tags":1581},[1468,1582],"pinia",{"path":1584,"title":1585,"description":1586,"meta":1587},"\u002Fko\u002Fnuxt3-unit-test","Nuxt 프로젝트에 유닛 테스트 코드 추가하기","Nuxt 3 프로젝트에서 Vitest를 활용한 테스트 환경 설정과 유틸리티 함수 테스트 방법",{"date":1588,"image":1589,"field":1379,"tags":1590},"2025.03.07","unit-test.jpg",[1468,1591],"vitest",{"path":1593,"title":1594,"description":1595,"meta":1596},"\u002Fko\u002Fpm2-guide","프로세스 매니저 PM2","배포환경에서 유용하게 사용할 수 있는 프로세스 매니저를 알아보자.",{"date":1474,"field":1464,"tags":1597},[1598,1533],"pm2",{"path":1600,"title":1601,"description":1602,"meta":1603},"\u002Fko\u002Freact-createportal","React createPortal 완벽 가이드","React의 `createPortal`을 활용한 UI 구현법, 활용 사례, 장단점 및 코드 예제를 소개합니다.",{"date":1604,"field":1379,"tags":1605},"2025.01.27",[1440],{"path":1607,"title":1608,"description":1609,"meta":1610},"\u002Fko\u002Frouting","Routing","Nuxt file-system routing creates a route for every file in the pages\u002F directory.",{"date":1611,"field":1379,"tags":1612},"2025.01.22",[1468],{"path":1614,"title":1615,"description":1616,"meta":1617},"\u002Fko\u002Ftanstack-query-guide","TanStack Query란 무엇인가?","TanStack Query가 웹 애플리케이션에서 데이터 가져오기, 캐싱, 상태 관리를 어떻게 개선하는지 알아본다.",{"date":1618,"field":1379,"tags":1619},"2025.04.15",[1440,1620],"tanstack-query",{"path":1622,"title":1623,"description":1624,"meta":1625},"\u002Fko\u002Fuse-context","리엑트 상태관리 useContext()","React에서 `useContext`를 사용하면 컴포넌트 트리에 깊이 중첩된 컴포넌트에서도 prop drilling 없이 상태를 공유할 수 있습니다. 이 글에서는 `useContext`의 개념, 사용 방법, 장단점, 그리고 실전 예제를 함께 알아보겠습니다.",{"date":1626,"field":1379,"tags":1627},"2025.02.03",[1440],{"path":1629,"title":1630,"description":1631,"meta":1632},"\u002Fko\u002Fvite-plugin-style-inject","리엑티 컴포넌트를 패키지 빌드 시 CSS 같이 적용시키기","dist에 css에 파일이 생성되었으나, 적용 안 되는 이유를 알아보고 에러를 처리하자",{"date":1633,"field":1379,"tags":1634},"2025.04.06",[1635,1440],"vite",{"path":1637,"title":1638,"description":1639,"meta":1640},"\u002Fko\u002Fvue-component-guide","Vue의 \u003Ccomponent :is \u002F> 완벽 정리: 동적 렌더링의 모든 것","Vue에서 \u003Ccomponent :is \u002F>를 활용한 동적 컴포넌트 렌더링 방법과 VNode, 컴포넌트 객체의 차이를 실전 예제로 이해하기",{"date":1404,"field":1379,"tags":1641},[1439],{"path":1643,"title":1644,"description":1645,"meta":1646},"\u002Fko\u002Fvue-query-ref-value-trap-nuxt3","Vue Query에서 데이터가 안 보이는 이유? Nuxt 3와 Ref 구조의 함정","Nuxt 3 + vue-query를 사용할 때 API 데이터가 `v-if` 조건문에서 제대로 표시되지 않는 현상을 해결한 경험을 바탕으로, Ref 구조와 template 디렉티브에서의 차이를 자세히 설명합니다.",{"date":1647,"field":1379,"tags":1648},"2025.06.08",[1468,1439,1620],1791391656584]