[{"data":1,"prerenderedAt":5248},["ShallowReactive",2],{"post-document:\u002Ffrontend\u002Fvue\u002F2026\u002F07\u002F31\u002Fvue_intro2\u002F":3},{"id":4,"title":5,"body":6,"categories":5185,"date":5188,"description":5189,"extension":5190,"image":5191,"key_concepts":5192,"last_modified_at":5191,"legacyPath":5196,"meta":5197,"navigation":122,"part":5191,"path":5238,"published":122,"robots":5191,"seo":5239,"series":5191,"stem":5240,"strengths":5191,"summary":5241,"tags":5242,"tradeoffs":5191,"__hash__":5247},"posts\u002Fposts\u002FFrontend\u002FVue\u002F2026-07-31-vue_intro2.md","02. Vue 기초 문법 점검: JavaScript, 템플릿",{"type":7,"value":8,"toc":5142},"minimark",[9,14,18,21,67,72,270,274,372,376,533,538,543,548,554,558,641,645,648,1055,1058,1099,1107,1110,1114,1121,1124,1147,1153,1197,1200,1254,1262,1265,1271,1316,1322,1340,1347,1350,1360,1371,1438,1448,1451,1484,1515,1518,1552,1555,1586,1625,1635,1638,1690,1706,1714,1724,1729,1790,1796,1883,1888,1942,1950,1953,1959,1962,2062,2105,2110,2148,2155,2165,2173,2178,2265,2270,2344,2347,2355,2359,2362,2365,2368,2379,2424,2582,2585,2591,2595,2727,2733,2737,2751,4341,4345,4355,4443,4447,4558,4561,4565,4662,4668,4754,4757,4812,4821,4908,4915,4919,4922,5043,5047,5050,5093,5099,5102,5107,5111,5135,5138],[10,11,13],"h2",{"id":12},"vue에서-반드시-알아야-하는-javascript","Vue에서 반드시 알아야 하는 JavaScript",[15,16,17],"p",{},"Vue를 시작하기 전에 진짜~ 기본적인 JavaScript를 알아보고 가자.",[15,19,20],{},"전부 외울 필요는 없고, 아래 문법을 읽고 사용할 수 있으면 된다.",[22,23,24,28,31,34,50,59],"ul",{},[25,26,27],"li",{},"객체와 배열",[25,29,30],{},"함수와 화살표 함수",[25,32,33],{},"구조 분해와 스프레드 문법",[25,35,36,40,41,40,44,40,47],{},[37,38,39],"code",{},"map",", ",[37,42,43],{},"filter",[37,45,46],{},"find",[37,48,49],{},"reduce",[25,51,52,55,56],{},[37,53,54],{},"import","와 ",[37,57,58],{},"export",[25,60,61,55,64],{},[37,62,63],{},"async",[37,65,66],{},"await",[68,69,71],"h3",{"id":70},"변수-객체-배열","변수, 객체, 배열",[73,74,79],"pre",{"className":75,"code":76,"language":77,"meta":78,"style":78},"language-js shiki shiki-themes github-light github-dark","const name = 'Lee'\nlet count = 0\n\nconst user = {\n id: 1,\n name: 'Lee',\n active: true\n}\n\nconsole.log(user.name)\nconsole.log(user.active)\n\nconst users = [\n { id: 1, name: 'Lee', active: true },\n { id: 2, name: 'Kim', active: false }\n]\n","js","",[37,80,81,101,117,124,137,149,160,169,175,180,193,203,208,221,243,264],{"__ignoreMap":78},[82,83,86,90,94,97],"span",{"class":84,"line":85},"line",1,[82,87,89],{"class":88},"szBVR","const",[82,91,93],{"class":92},"sj4cs"," name",[82,95,96],{"class":88}," =",[82,98,100],{"class":99},"sZZnC"," 'Lee'\n",[82,102,104,107,111,114],{"class":84,"line":103},2,[82,105,106],{"class":88},"let",[82,108,110],{"class":109},"sVt8B"," count ",[82,112,113],{"class":88},"=",[82,115,116],{"class":92}," 0\n",[82,118,120],{"class":84,"line":119},3,[82,121,123],{"emptyLinePlaceholder":122},true,"\n",[82,125,127,129,132,134],{"class":84,"line":126},4,[82,128,89],{"class":88},[82,130,131],{"class":92}," user",[82,133,96],{"class":88},[82,135,136],{"class":109}," {\n",[82,138,140,143,146],{"class":84,"line":139},5,[82,141,142],{"class":109}," id: ",[82,144,145],{"class":92},"1",[82,147,148],{"class":109},",\n",[82,150,152,155,158],{"class":84,"line":151},6,[82,153,154],{"class":109}," name: ",[82,156,157],{"class":99},"'Lee'",[82,159,148],{"class":109},[82,161,163,166],{"class":84,"line":162},7,[82,164,165],{"class":109}," active: ",[82,167,168],{"class":92},"true\n",[82,170,172],{"class":84,"line":171},8,[82,173,174],{"class":109},"}\n",[82,176,178],{"class":84,"line":177},9,[82,179,123],{"emptyLinePlaceholder":122},[82,181,183,186,190],{"class":84,"line":182},10,[82,184,185],{"class":109},"console.",[82,187,189],{"class":188},"sScJk","log",[82,191,192],{"class":109},"(user.name)\n",[82,194,196,198,200],{"class":84,"line":195},11,[82,197,185],{"class":109},[82,199,189],{"class":188},[82,201,202],{"class":109},"(user.active)\n",[82,204,206],{"class":84,"line":205},12,[82,207,123],{"emptyLinePlaceholder":122},[82,209,211,213,216,218],{"class":84,"line":210},13,[82,212,89],{"class":88},[82,214,215],{"class":92}," users",[82,217,96],{"class":88},[82,219,220],{"class":109}," [\n",[82,222,224,227,229,232,234,237,240],{"class":84,"line":223},14,[82,225,226],{"class":109}," { id: ",[82,228,145],{"class":92},[82,230,231],{"class":109},", name: ",[82,233,157],{"class":99},[82,235,236],{"class":109},", active: ",[82,238,239],{"class":92},"true",[82,241,242],{"class":109}," },\n",[82,244,246,248,251,253,256,258,261],{"class":84,"line":245},15,[82,247,226],{"class":109},[82,249,250],{"class":92},"2",[82,252,231],{"class":109},[82,254,255],{"class":99},"'Kim'",[82,257,236],{"class":109},[82,259,260],{"class":92},"false",[82,262,263],{"class":109}," }\n",[82,265,267],{"class":84,"line":266},16,[82,268,269],{"class":109},"]\n",[68,271,273],{"id":272},"함수와-구조-분해","함수와 구조 분해",[73,275,277],{"className":75,"code":276,"language":77,"meta":78,"style":78},"const add = (a, b) => {\n return a + b\n}\n\nconst { name, age } = {\n name: 'Lee',\n age: 25\n}\n",[37,278,279,308,322,326,330,352,360,368],{"__ignoreMap":78},[82,280,281,283,286,288,291,295,297,300,303,306],{"class":84,"line":85},[82,282,89],{"class":88},[82,284,285],{"class":188}," add",[82,287,96],{"class":88},[82,289,290],{"class":109}," (",[82,292,294],{"class":293},"s4XuR","a",[82,296,40],{"class":109},[82,298,299],{"class":293},"b",[82,301,302],{"class":109},") ",[82,304,305],{"class":88},"=>",[82,307,136],{"class":109},[82,309,310,313,316,319],{"class":84,"line":103},[82,311,312],{"class":88}," return",[82,314,315],{"class":109}," a ",[82,317,318],{"class":88},"+",[82,320,321],{"class":109}," b\n",[82,323,324],{"class":84,"line":119},[82,325,174],{"class":109},[82,327,328],{"class":84,"line":126},[82,329,123],{"emptyLinePlaceholder":122},[82,331,332,334,337,340,342,345,348,350],{"class":84,"line":139},[82,333,89],{"class":88},[82,335,336],{"class":109}," { ",[82,338,339],{"class":92},"name",[82,341,40],{"class":109},[82,343,344],{"class":92},"age",[82,346,347],{"class":109}," } ",[82,349,113],{"class":88},[82,351,136],{"class":109},[82,353,354,356,358],{"class":84,"line":151},[82,355,154],{"class":109},[82,357,157],{"class":99},[82,359,148],{"class":109},[82,361,362,365],{"class":84,"line":162},[82,363,364],{"class":109}," age: ",[82,366,367],{"class":92},"25\n",[82,369,370],{"class":84,"line":171},[82,371,174],{"class":109},[68,373,375],{"id":374},"배열-함수와-자주-쓰는-문법","배열 함수와 자주 쓰는 문법",[73,377,379],{"className":75,"code":378,"language":77,"meta":78,"style":78},"const names = users.map((user) => user.name)\nconst activeUsers = users.filter((user) => user.active)\nconst firstUser = users.find((user) => user.id === 1)\n\nconst newUser = {\n ...users[0],\n active: false\n}\n\nconst message = isLoggedIn ? '환영합니다' : '로그인하세요'\n",[37,380,381,408,432,465,469,480,494,501,505,509],{"__ignoreMap":78},[82,382,383,385,388,390,393,395,398,401,403,405],{"class":84,"line":85},[82,384,89],{"class":88},[82,386,387],{"class":92}," names",[82,389,96],{"class":88},[82,391,392],{"class":109}," users.",[82,394,39],{"class":188},[82,396,397],{"class":109},"((",[82,399,400],{"class":293},"user",[82,402,302],{"class":109},[82,404,305],{"class":88},[82,406,407],{"class":109}," user.name)\n",[82,409,410,412,415,417,419,421,423,425,427,429],{"class":84,"line":103},[82,411,89],{"class":88},[82,413,414],{"class":92}," activeUsers",[82,416,96],{"class":88},[82,418,392],{"class":109},[82,420,43],{"class":188},[82,422,397],{"class":109},[82,424,400],{"class":293},[82,426,302],{"class":109},[82,428,305],{"class":88},[82,430,431],{"class":109}," user.active)\n",[82,433,434,436,439,441,443,445,447,449,451,453,456,459,462],{"class":84,"line":119},[82,435,89],{"class":88},[82,437,438],{"class":92}," firstUser",[82,440,96],{"class":88},[82,442,392],{"class":109},[82,444,46],{"class":188},[82,446,397],{"class":109},[82,448,400],{"class":293},[82,450,302],{"class":109},[82,452,305],{"class":88},[82,454,455],{"class":109}," user.id ",[82,457,458],{"class":88},"===",[82,460,461],{"class":92}," 1",[82,463,464],{"class":109},")\n",[82,466,467],{"class":84,"line":126},[82,468,123],{"emptyLinePlaceholder":122},[82,470,471,473,476,478],{"class":84,"line":139},[82,472,89],{"class":88},[82,474,475],{"class":92}," newUser",[82,477,96],{"class":88},[82,479,136],{"class":109},[82,481,482,485,488,491],{"class":84,"line":151},[82,483,484],{"class":88}," ...",[82,486,487],{"class":109},"users[",[82,489,490],{"class":92},"0",[82,492,493],{"class":109},"],\n",[82,495,496,498],{"class":84,"line":162},[82,497,165],{"class":109},[82,499,500],{"class":92},"false\n",[82,502,503],{"class":84,"line":171},[82,504,174],{"class":109},[82,506,507],{"class":84,"line":177},[82,508,123],{"emptyLinePlaceholder":122},[82,510,511,513,516,518,521,524,527,530],{"class":84,"line":182},[82,512,89],{"class":88},[82,514,515],{"class":92}," message",[82,517,96],{"class":88},[82,519,520],{"class":109}," isLoggedIn ",[82,522,523],{"class":88},"?",[82,525,526],{"class":99}," '환영합니다'",[82,528,529],{"class":88}," :",[82,531,532],{"class":99}," '로그인하세요'\n",[15,534,535,537],{},[37,536,39],{},"은 배열을 변환하고,",[15,539,540,542],{},[37,541,43],{},"는 조건에 맞는 항목만 남기며,",[15,544,545,547],{},[37,546,46],{},"는 조건에 맞는 첫 번째 항목을 찾는다.",[15,549,550,551,553],{},"상품 총합처럼 여러 값을 하나로 합칠 때는 ",[37,552,49],{},"를 사용한다.",[68,555,557],{"id":556},"비동기-처리","비동기 처리",[73,559,561],{"className":75,"code":560,"language":77,"meta":78,"style":78},"const loadUsers = async () => {\n const response = await fetch('\u002Fapi\u002Fusers')\n const data = await response.json()\n\n return data\n}\n",[37,562,563,582,606,626,630,637],{"__ignoreMap":78},[82,564,565,567,570,572,575,578,580],{"class":84,"line":85},[82,566,89],{"class":88},[82,568,569],{"class":188}," loadUsers",[82,571,96],{"class":88},[82,573,574],{"class":88}," async",[82,576,577],{"class":109}," () ",[82,579,305],{"class":88},[82,581,136],{"class":109},[82,583,584,587,590,592,595,598,601,604],{"class":84,"line":103},[82,585,586],{"class":88}," const",[82,588,589],{"class":92}," response",[82,591,96],{"class":88},[82,593,594],{"class":88}," await",[82,596,597],{"class":188}," fetch",[82,599,600],{"class":109},"(",[82,602,603],{"class":99},"'\u002Fapi\u002Fusers'",[82,605,464],{"class":109},[82,607,608,610,613,615,617,620,623],{"class":84,"line":119},[82,609,586],{"class":88},[82,611,612],{"class":92}," data",[82,614,96],{"class":88},[82,616,594],{"class":88},[82,618,619],{"class":109}," response.",[82,621,622],{"class":188},"json",[82,624,625],{"class":109},"()\n",[82,627,628],{"class":84,"line":126},[82,629,123],{"emptyLinePlaceholder":122},[82,631,632,634],{"class":84,"line":139},[82,633,312],{"class":88},[82,635,636],{"class":109}," data\n",[82,638,639],{"class":84,"line":151},[82,640,174],{"class":109},[10,642,644],{"id":643},"vue-코드를-읽는-방법","Vue 코드를 읽는 방법",[15,646,647],{},"Vue 코드는 먼저 상태를 찾고, 그 상태를 바꾸는 함수와 템플릿의 연결을 확인하면 된다.",[73,649,653],{"className":650,"code":651,"language":652,"meta":78,"style":78},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\n\u002F\u002F ref로 반응형 상태 선언 \n\nconst products = ref([\n { id: 1, name: '키보드', price: 50000 },\n { id: 2, name: '마우스', price: 30000 }\n])\n\nconst selectedProduct = ref(null)\n\nconst totalPrice = computed(() => {\n return products.value.reduce((sum, product) => {\n return sum + product.price\n }, 0)\n})\n\nconst selectProduct = (product) => {\n selectedProduct.value = product\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cdiv v-for=\"product in products\" :key=\"product.id\">\n \u003Cbutton @click=\"selectProduct(product)\">\n {{ product.name }}\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003Cp>총가격: {{ totalPrice }}원\u003C\u002Fp>\n\n \u003Cp v-if=\"selectedProduct\">\n 선택 상품: {{ selectedProduct.name }}\n \u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue",[37,654,655,670,683,687,693,697,712,731,749,754,758,776,780,799,824,837,846,852,857,877,888,893,903,908,918,945,964,970,980,990,995,1009,1014,1031,1037,1046],{"__ignoreMap":78},[82,656,657,660,664,667],{"class":84,"line":85},[82,658,659],{"class":109},"\u003C",[82,661,663],{"class":662},"s9eBZ","script",[82,665,666],{"class":188}," setup",[82,668,669],{"class":109},">\n",[82,671,672,674,677,680],{"class":84,"line":103},[82,673,54],{"class":88},[82,675,676],{"class":109}," { computed, ref } ",[82,678,679],{"class":88},"from",[82,681,682],{"class":99}," 'vue'\n",[82,684,685],{"class":84,"line":119},[82,686,123],{"emptyLinePlaceholder":122},[82,688,689],{"class":84,"line":126},[82,690,692],{"class":691},"sJ8bj","\u002F\u002F ref로 반응형 상태 선언 \n",[82,694,695],{"class":84,"line":139},[82,696,123],{"emptyLinePlaceholder":122},[82,698,699,701,704,706,709],{"class":84,"line":151},[82,700,89],{"class":88},[82,702,703],{"class":92}," products",[82,705,96],{"class":88},[82,707,708],{"class":188}," ref",[82,710,711],{"class":109},"([\n",[82,713,714,716,718,720,723,726,729],{"class":84,"line":162},[82,715,226],{"class":109},[82,717,145],{"class":92},[82,719,231],{"class":109},[82,721,722],{"class":99},"'키보드'",[82,724,725],{"class":109},", price: ",[82,727,728],{"class":92},"50000",[82,730,242],{"class":109},[82,732,733,735,737,739,742,744,747],{"class":84,"line":171},[82,734,226],{"class":109},[82,736,250],{"class":92},[82,738,231],{"class":109},[82,740,741],{"class":99},"'마우스'",[82,743,725],{"class":109},[82,745,746],{"class":92},"30000",[82,748,263],{"class":109},[82,750,751],{"class":84,"line":177},[82,752,753],{"class":109},"])\n",[82,755,756],{"class":84,"line":182},[82,757,123],{"emptyLinePlaceholder":122},[82,759,760,762,765,767,769,771,774],{"class":84,"line":195},[82,761,89],{"class":88},[82,763,764],{"class":92}," selectedProduct",[82,766,96],{"class":88},[82,768,708],{"class":188},[82,770,600],{"class":109},[82,772,773],{"class":92},"null",[82,775,464],{"class":109},[82,777,778],{"class":84,"line":205},[82,779,123],{"emptyLinePlaceholder":122},[82,781,782,784,787,789,792,795,797],{"class":84,"line":210},[82,783,89],{"class":88},[82,785,786],{"class":92}," totalPrice",[82,788,96],{"class":88},[82,790,791],{"class":188}," computed",[82,793,794],{"class":109},"(() ",[82,796,305],{"class":88},[82,798,136],{"class":109},[82,800,801,803,806,808,810,813,815,818,820,822],{"class":84,"line":223},[82,802,312],{"class":88},[82,804,805],{"class":109}," products.value.",[82,807,49],{"class":188},[82,809,397],{"class":109},[82,811,812],{"class":293},"sum",[82,814,40],{"class":109},[82,816,817],{"class":293},"product",[82,819,302],{"class":109},[82,821,305],{"class":88},[82,823,136],{"class":109},[82,825,826,829,832,834],{"class":84,"line":245},[82,827,828],{"class":88}," return",[82,830,831],{"class":109}," sum ",[82,833,318],{"class":88},[82,835,836],{"class":109}," product.price\n",[82,838,839,842,844],{"class":84,"line":266},[82,840,841],{"class":109}," }, ",[82,843,490],{"class":92},[82,845,464],{"class":109},[82,847,849],{"class":84,"line":848},17,[82,850,851],{"class":109},"})\n",[82,853,855],{"class":84,"line":854},18,[82,856,123],{"emptyLinePlaceholder":122},[82,858,860,862,865,867,869,871,873,875],{"class":84,"line":859},19,[82,861,89],{"class":88},[82,863,864],{"class":188}," selectProduct",[82,866,96],{"class":88},[82,868,290],{"class":109},[82,870,817],{"class":293},[82,872,302],{"class":109},[82,874,305],{"class":88},[82,876,136],{"class":109},[82,878,880,883,885],{"class":84,"line":879},20,[82,881,882],{"class":109}," selectedProduct.value ",[82,884,113],{"class":88},[82,886,887],{"class":109}," product\n",[82,889,891],{"class":84,"line":890},21,[82,892,174],{"class":109},[82,894,896,899,901],{"class":84,"line":895},22,[82,897,898],{"class":109},"\u003C\u002F",[82,900,663],{"class":662},[82,902,669],{"class":109},[82,904,906],{"class":84,"line":905},23,[82,907,123],{"emptyLinePlaceholder":122},[82,909,911,913,916],{"class":84,"line":910},24,[82,912,659],{"class":109},[82,914,915],{"class":662},"template",[82,917,669],{"class":109},[82,919,921,924,927,930,932,935,938,940,943],{"class":84,"line":920},25,[82,922,923],{"class":109}," \u003C",[82,925,926],{"class":662},"div",[82,928,929],{"class":188}," v-for",[82,931,113],{"class":109},[82,933,934],{"class":99},"\"product in products\"",[82,936,937],{"class":188}," :key",[82,939,113],{"class":109},[82,941,942],{"class":99},"\"product.id\"",[82,944,669],{"class":109},[82,946,948,951,954,957,959,962],{"class":84,"line":947},26,[82,949,950],{"class":109}," \u003C",[82,952,953],{"class":662},"button",[82,955,956],{"class":188}," @click",[82,958,113],{"class":109},[82,960,961],{"class":99},"\"selectProduct(product)\"",[82,963,669],{"class":109},[82,965,967],{"class":84,"line":966},27,[82,968,969],{"class":109}," {{ product.name }}\n",[82,971,973,976,978],{"class":84,"line":972},28,[82,974,975],{"class":109}," \u003C\u002F",[82,977,953],{"class":662},[82,979,669],{"class":109},[82,981,983,986,988],{"class":84,"line":982},29,[82,984,985],{"class":109}," \u003C\u002F",[82,987,926],{"class":662},[82,989,669],{"class":109},[82,991,993],{"class":84,"line":992},30,[82,994,123],{"emptyLinePlaceholder":122},[82,996,998,1000,1002,1005,1007],{"class":84,"line":997},31,[82,999,923],{"class":109},[82,1001,15],{"class":662},[82,1003,1004],{"class":109},">총가격: {{ totalPrice }}원\u003C\u002F",[82,1006,15],{"class":662},[82,1008,669],{"class":109},[82,1010,1012],{"class":84,"line":1011},32,[82,1013,123],{"emptyLinePlaceholder":122},[82,1015,1017,1019,1021,1024,1026,1029],{"class":84,"line":1016},33,[82,1018,923],{"class":109},[82,1020,15],{"class":662},[82,1022,1023],{"class":188}," v-if",[82,1025,113],{"class":109},[82,1027,1028],{"class":99},"\"selectedProduct\"",[82,1030,669],{"class":109},[82,1032,1034],{"class":84,"line":1033},34,[82,1035,1036],{"class":109}," 선택 상품: {{ selectedProduct.name }}\n",[82,1038,1040,1042,1044],{"class":84,"line":1039},35,[82,1041,985],{"class":109},[82,1043,15],{"class":662},[82,1045,669],{"class":109},[82,1047,1049,1051,1053],{"class":84,"line":1048},36,[82,1050,898],{"class":109},[82,1052,915],{"class":662},[82,1054,669],{"class":109},[15,1056,1057],{},"읽는 순서는 다음과 같다.",[1059,1060,1061,1070,1076,1082,1087,1093],"ol",{},[25,1062,1063,1064,40,1067],{},"어떤 반응형 상태가 있는가? → ",[37,1065,1066],{},"products",[37,1068,1069],{},"selectedProduct",[25,1071,1072,1073],{},"어떤 계산된 값이 있는가? → ",[37,1074,1075],{},"totalPrice",[25,1077,1078,1079],{},"어떤 함수가 상태를 바꾸는가? → ",[37,1080,1081],{},"selectProduct",[25,1083,1084,1085],{},"템플릿에서 무엇을 반복하는가? → ",[37,1086,1066],{},[25,1088,1089,1090],{},"어떤 이벤트가 함수를 호출하는가? → ",[37,1091,1092],{},"@click",[25,1094,1095,1096],{},"어떤 조건에서 화면이 나타나는가? → ",[37,1097,1098],{},"v-if=\"selectedProduct\"",[15,1100,1101,1102,1106],{},"결국 Vue 코드는 ",[1103,1104,1105],"strong",{},"상태 → 함수 → 템플릿 연결"," 순서로 분석하면 된다!",[15,1108,1109],{},"아주 쉽죠?",[10,1111,1113],{"id":1112},"기본-개념","기본 개념",[68,1115,1117,1118],{"id":1116},"_1-일반-변수와-ref","1. 일반 변수와 ",[37,1119,1120],{},"ref",[15,1122,1123],{},"일반 변수도 값을 변경할 수 있지만, Vue가 그 변경을 반응형 상태로 추적하지는 않는다.",[73,1125,1127],{"className":75,"code":1126,"language":77,"meta":78,"style":78},"let count = 0\ncount++\n",[37,1128,1129,1139],{"__ignoreMap":78},[82,1130,1131,1133,1135,1137],{"class":84,"line":85},[82,1132,106],{"class":88},[82,1134,110],{"class":109},[82,1136,113],{"class":88},[82,1138,116],{"class":92},[82,1140,1141,1144],{"class":84,"line":103},[82,1142,1143],{"class":109},"count",[82,1145,1146],{"class":88},"++\n",[15,1148,1149,1150,1152],{},"Vue가 값을 추적하고 화면까지 갱신하게 하려면 ",[37,1151,1120],{},"를 사용한다.\n(Vue 쓰고 있으면 제발 이걸로 선언해라!)",[73,1154,1156],{"className":75,"code":1155,"language":77,"meta":78,"style":78},"import { ref } from 'vue'\n\nconst count = ref(0)\ncount.value++\n",[37,1157,1158,1169,1173,1190],{"__ignoreMap":78},[82,1159,1160,1162,1165,1167],{"class":84,"line":85},[82,1161,54],{"class":88},[82,1163,1164],{"class":109}," { ref } ",[82,1166,679],{"class":88},[82,1168,682],{"class":99},[82,1170,1171],{"class":84,"line":103},[82,1172,123],{"emptyLinePlaceholder":122},[82,1174,1175,1177,1180,1182,1184,1186,1188],{"class":84,"line":119},[82,1176,89],{"class":88},[82,1178,1179],{"class":92}," count",[82,1181,96],{"class":88},[82,1183,708],{"class":188},[82,1185,600],{"class":109},[82,1187,490],{"class":92},[82,1189,464],{"class":109},[82,1191,1192,1195],{"class":84,"line":126},[82,1193,1194],{"class":109},"count.value",[82,1196,1146],{"class":88},[15,1198,1199],{},"정리하면 다음과 같다.",[1201,1202,1203,1222],"table",{},[1204,1205,1206],"thead",{},[1207,1208,1209,1213,1216,1219],"tr",{},[1210,1211,1212],"th",{},"구분",[1210,1214,1215],{},"값 변경",[1210,1217,1218],{},"Vue의 변경 추적",[1210,1220,1221],{},"화면 갱신",[1223,1224,1225,1240],"tbody",{},[1207,1226,1227,1231,1234,1237],{},[1228,1229,1230],"td",{},"일반 변수",[1228,1232,1233],{},"가능",[1228,1235,1236],{},"하지 않음",[1228,1238,1239],{},"보장하지 않음",[1207,1241,1242,1246,1248,1251],{},[1228,1243,1244],{},[37,1245,1120],{},[1228,1247,1233],{},[1228,1249,1250],{},"함",[1228,1252,1253],{},"반응형으로 갱신",[68,1255,1257,1258,1261],{"id":1256},"_2-javascript에서는-value-템플릿에서는-생략","2. JavaScript에서는 ",[37,1259,1260],{},".value",", 템플릿에서는 생략",[15,1263,1264],{},"처음 써봐서 그런지 좀 헷갈린다.",[15,1266,1267,1270],{},[37,1268,1269],{},"ref(0)","은 내부적으로 값을 감싸는 반응형 객체를 만든다.",[73,1272,1274],{"className":75,"code":1273,"language":77,"meta":78,"style":78},"const count = ref(0)\n\n\u002F\u002F JavaScript에서는\nconsole.log(count.value)\ncount.value++\n",[37,1275,1276,1292,1296,1301,1310],{"__ignoreMap":78},[82,1277,1278,1280,1282,1284,1286,1288,1290],{"class":84,"line":85},[82,1279,89],{"class":88},[82,1281,1179],{"class":92},[82,1283,96],{"class":88},[82,1285,708],{"class":188},[82,1287,600],{"class":109},[82,1289,490],{"class":92},[82,1291,464],{"class":109},[82,1293,1294],{"class":84,"line":103},[82,1295,123],{"emptyLinePlaceholder":122},[82,1297,1298],{"class":84,"line":119},[82,1299,1300],{"class":691},"\u002F\u002F JavaScript에서는\n",[82,1302,1303,1305,1307],{"class":84,"line":126},[82,1304,185],{"class":109},[82,1306,189],{"class":188},[82,1308,1309],{"class":109},"(count.value)\n",[82,1311,1312,1314],{"class":84,"line":139},[82,1313,1194],{"class":109},[82,1315,1146],{"class":88},[15,1317,1318,1319,1321],{},"템플릿에서는 Vue가 ",[37,1320,1260],{},"를 자동으로 처리하므로 생략할 수 있다.",[73,1323,1325],{"className":650,"code":1324,"language":652,"meta":78,"style":78},"\u003Cp>{{ count }}\u003C\u002Fp>\n",[37,1326,1327],{"__ignoreMap":78},[82,1328,1329,1331,1333,1336,1338],{"class":84,"line":85},[82,1330,659],{"class":109},[82,1332,15],{"class":662},[82,1334,1335],{"class":109},">{{ count }}\u003C\u002F",[82,1337,15],{"class":662},[82,1339,669],{"class":109},[15,1341,1342,1343,1346],{},"이것을 ",[1103,1344,1345],{},"자동 ref 언래핑","이라고 한다.",[15,1348,1349],{},"템플릿에서는 .value 로 객체로 접근할 필요가 없다.",[68,1351,1353,1354,55,1357],{"id":1352},"_3-v-bindsrc와-src","3. ",[37,1355,1356],{},"v-bind:src",[37,1358,1359],{},":src",[15,1361,1362,1363,1366,1367,1370],{},"둘은 같은 문법이다. ",[37,1364,1365],{},":","는 ",[37,1368,1369],{},"v-bind:","의 줄임말이다.",[73,1372,1374],{"className":650,"code":1373,"language":652,"meta":78,"style":78},"\u003Cimg v-bind:src=\"imageUrl\" alt=\"프로필\" \u002F>\n\u003Cimg :src=\"imageUrl\" alt=\"프로필\" \u002F>\n",[37,1375,1376,1412],{"__ignoreMap":78},[82,1377,1378,1380,1383,1386,1388,1391,1393,1396,1399,1401,1404,1406,1409],{"class":84,"line":85},[82,1379,659],{"class":109},[82,1381,1382],{"class":662},"img",[82,1384,1385],{"class":188}," v-bind",[82,1387,1365],{"class":109},[82,1389,1390],{"class":188},"src",[82,1392,113],{"class":109},[82,1394,1395],{"class":99},"\"",[82,1397,1398],{"class":109},"imageUrl",[82,1400,1395],{"class":99},[82,1402,1403],{"class":188}," alt",[82,1405,113],{"class":109},[82,1407,1408],{"class":99},"\"프로필\"",[82,1410,1411],{"class":109}," \u002F>\n",[82,1413,1414,1416,1418,1420,1422,1424,1426,1428,1430,1432,1434,1436],{"class":84,"line":103},[82,1415,659],{"class":109},[82,1417,1382],{"class":662},[82,1419,529],{"class":109},[82,1421,1390],{"class":188},[82,1423,113],{"class":109},[82,1425,1395],{"class":99},[82,1427,1398],{"class":109},[82,1429,1395],{"class":99},[82,1431,1403],{"class":188},[82,1433,113],{"class":109},[82,1435,1408],{"class":99},[82,1437,1411],{"class":109},[68,1439,1441,1442,55,1445],{"id":1440},"_4-clickincrease와-clickincrease","4. ",[37,1443,1444],{},"@click=\"increase\"",[37,1446,1447],{},"@click=\"increase()\"",[15,1449,1450],{},"인자가 없는 단순한 이벤트라면 함수 이름을 바로 전달하는 방식이 읽기 좋다.",[73,1452,1454],{"className":650,"code":1453,"language":652,"meta":78,"style":78},"\u003Cbutton @click=\"increase\">증가\u003C\u002Fbutton>\n",[37,1455,1456],{"__ignoreMap":78},[82,1457,1458,1460,1462,1465,1468,1470,1472,1475,1477,1480,1482],{"class":84,"line":85},[82,1459,659],{"class":109},[82,1461,953],{"class":662},[82,1463,1464],{"class":109}," @",[82,1466,1467],{"class":188},"click",[82,1469,113],{"class":109},[82,1471,1395],{"class":99},[82,1473,1474],{"class":109},"increase",[82,1476,1395],{"class":99},[82,1478,1479],{"class":109},">증가\u003C\u002F",[82,1481,953],{"class":662},[82,1483,669],{"class":109},[73,1485,1487],{"className":75,"code":1486,"language":77,"meta":78,"style":78},"const increase = () => {\n count.value++\n}\n",[37,1488,1489,1504,1511],{"__ignoreMap":78},[82,1490,1491,1493,1496,1498,1500,1502],{"class":84,"line":85},[82,1492,89],{"class":88},[82,1494,1495],{"class":188}," increase",[82,1497,96],{"class":88},[82,1499,577],{"class":109},[82,1501,305],{"class":88},[82,1503,136],{"class":109},[82,1505,1506,1509],{"class":84,"line":103},[82,1507,1508],{"class":109}," count.value",[82,1510,1146],{"class":88},[82,1512,1513],{"class":84,"line":119},[82,1514,174],{"class":109},[15,1516,1517],{},"인자를 전달해야 할 때는 괄호를 사용한다.",[73,1519,1521],{"className":650,"code":1520,"language":652,"meta":78,"style":78},"\u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n",[37,1522,1523],{"__ignoreMap":78},[82,1524,1525,1527,1529,1531,1533,1535,1537,1540,1543,1545,1548,1550],{"class":84,"line":85},[82,1526,659],{"class":109},[82,1528,953],{"class":662},[82,1530,1464],{"class":109},[82,1532,1467],{"class":188},[82,1534,113],{"class":109},[82,1536,1395],{"class":99},[82,1538,1539],{"class":188},"selectCity",[82,1541,1542],{"class":109},"(city)",[82,1544,1395],{"class":99},[82,1546,1547],{"class":109},">선택\u003C\u002F",[82,1549,953],{"class":662},[82,1551,669],{"class":109},[15,1553,1554],{},"함수 이름만 전달하면 Vue가 이벤트 객체를 함수에 전달할 수도 있다.",[73,1556,1558],{"className":650,"code":1557,"language":652,"meta":78,"style":78},"\u003Cbutton @click=\"handleClick\">클릭\u003C\u002Fbutton>\n",[37,1559,1560],{"__ignoreMap":78},[82,1561,1562,1564,1566,1568,1570,1572,1574,1577,1579,1582,1584],{"class":84,"line":85},[82,1563,659],{"class":109},[82,1565,953],{"class":662},[82,1567,1464],{"class":109},[82,1569,1467],{"class":188},[82,1571,113],{"class":109},[82,1573,1395],{"class":99},[82,1575,1576],{"class":109},"handleClick",[82,1578,1395],{"class":99},[82,1580,1581],{"class":109},">클릭\u003C\u002F",[82,1583,953],{"class":662},[82,1585,669],{"class":109},[73,1587,1589],{"className":75,"code":1588,"language":77,"meta":78,"style":78},"const handleClick = (event) => {\n console.log(event)\n}\n",[37,1590,1591,1611,1621],{"__ignoreMap":78},[82,1592,1593,1595,1598,1600,1602,1605,1607,1609],{"class":84,"line":85},[82,1594,89],{"class":88},[82,1596,1597],{"class":188}," handleClick",[82,1599,96],{"class":88},[82,1601,290],{"class":109},[82,1603,1604],{"class":293},"event",[82,1606,302],{"class":109},[82,1608,305],{"class":88},[82,1610,136],{"class":109},[82,1612,1613,1616,1618],{"class":84,"line":103},[82,1614,1615],{"class":109}," console.",[82,1617,189],{"class":188},[82,1619,1620],{"class":109},"(event)\n",[82,1622,1623],{"class":84,"line":119},[82,1624,174],{"class":109},[68,1626,1628,1629,55,1632],{"id":1627},"_5-v-if와-v-show","5. ",[37,1630,1631],{},"v-if",[37,1633,1634],{},"v-show",[15,1636,1637],{},"둘 다 조건에 따라 화면을 보이거나 숨기지만 동작이 다르다.",[73,1639,1641],{"className":650,"code":1640,"language":652,"meta":78,"style":78},"\u003Cp v-if=\"isVisible\">내용\u003C\u002Fp>\n\u003Cp v-show=\"isVisible\">내용\u003C\u002Fp>\n",[37,1642,1643,1667],{"__ignoreMap":78},[82,1644,1645,1647,1649,1651,1653,1655,1658,1660,1663,1665],{"class":84,"line":85},[82,1646,659],{"class":109},[82,1648,15],{"class":662},[82,1650,1023],{"class":88},[82,1652,113],{"class":109},[82,1654,1395],{"class":99},[82,1656,1657],{"class":109},"isVisible",[82,1659,1395],{"class":99},[82,1661,1662],{"class":109},">내용\u003C\u002F",[82,1664,15],{"class":662},[82,1666,669],{"class":109},[82,1668,1669,1671,1673,1676,1678,1680,1682,1684,1686,1688],{"class":84,"line":103},[82,1670,659],{"class":109},[82,1672,15],{"class":662},[82,1674,1675],{"class":188}," v-show",[82,1677,113],{"class":109},[82,1679,1395],{"class":99},[82,1681,1657],{"class":109},[82,1683,1395],{"class":99},[82,1685,1662],{"class":109},[82,1687,15],{"class":662},[82,1689,669],{"class":109},[22,1691,1692,1697],{},[25,1693,1694,1696],{},[37,1695,1631],{},": 조건에 따라 DOM 요소를 생성하거나 제거한다.",[25,1698,1699,1701,1702,1705],{},[37,1700,1634],{},": DOM 요소를 유지하고 CSS의 ",[37,1703,1704],{},"display","로 보이거나 숨긴다.",[15,1707,1708,1710,1711,1713],{},[37,1709,1631],{},"는 조건 변경 비용이 있지만 처음부터 렌더링하지 않을 수 있다. ",[37,1712,1634],{},"는 자주 보였다 숨겨지는 요소에 적합하다.",[68,1715,1717,1718,55,1721],{"id":1716},"_6-v-for와-key","6. ",[37,1719,1720],{},"v-for",[37,1722,1723],{},"key",[15,1725,1726,1728],{},[37,1727,1720],{},"가 만든 반복 변수는 해당 요소와 자식 요소 안에서만 사용할 수 있다.",[73,1730,1732],{"className":650,"code":1731,"language":652,"meta":78,"style":78},"\u003Cdiv v-for=\"city in cities\" :key=\"city.id\">\n \u003Cspan>{{ city.name }}: {{ city.temp }}℃\u003C\u002Fspan>\n \u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[37,1733,1734,1772,1777,1782],{"__ignoreMap":78},[82,1735,1736,1738,1740,1742,1744,1746,1749,1752,1755,1757,1759,1761,1763,1765,1768,1770],{"class":84,"line":85},[82,1737,659],{"class":109},[82,1739,926],{"class":662},[82,1741,929],{"class":88},[82,1743,113],{"class":109},[82,1745,1395],{"class":99},[82,1747,1748],{"class":109},"city ",[82,1750,1751],{"class":88},"in",[82,1753,1754],{"class":109}," cities",[82,1756,1395],{"class":99},[82,1758,529],{"class":109},[82,1760,1723],{"class":188},[82,1762,113],{"class":109},[82,1764,1395],{"class":99},[82,1766,1767],{"class":109},"city.id",[82,1769,1395],{"class":99},[82,1771,669],{"class":109},[82,1773,1774],{"class":84,"line":103},[82,1775,1776],{"class":109}," \u003Cspan>{{ city.name }}: {{ city.temp }}℃\u003C\u002Fspan>\n",[82,1778,1779],{"class":84,"line":119},[82,1780,1781],{"class":109}," \u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n",[82,1783,1784,1786,1788],{"class":84,"line":126},[82,1785,898],{"class":109},[82,1787,926],{"class":662},[82,1789,669],{"class":109},[15,1791,1792,1795],{},[37,1793,1794],{},"city","는 반복문 밖에서는 존재하지 않는다.",[73,1797,1799],{"className":650,"code":1798,"language":652,"meta":78,"style":78},"\u003Cdiv v-for=\"city in cities\" :key=\"city.id\">\n {{ city.name }}\n\u003C\u002Fdiv>\n\n\u003C!-- 오류: city는 v-for 바깥에서 사용할 수 없음 -->\n\u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n",[37,1800,1801,1835,1840,1848,1852,1857],{"__ignoreMap":78},[82,1802,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829,1831,1833],{"class":84,"line":85},[82,1804,659],{"class":109},[82,1806,926],{"class":662},[82,1808,929],{"class":88},[82,1810,113],{"class":109},[82,1812,1395],{"class":99},[82,1814,1748],{"class":109},[82,1816,1751],{"class":88},[82,1818,1754],{"class":109},[82,1820,1395],{"class":99},[82,1822,529],{"class":109},[82,1824,1723],{"class":188},[82,1826,113],{"class":109},[82,1828,1395],{"class":99},[82,1830,1767],{"class":109},[82,1832,1395],{"class":99},[82,1834,669],{"class":109},[82,1836,1837],{"class":84,"line":103},[82,1838,1839],{"class":109}," {{ city.name }}\n",[82,1841,1842,1844,1846],{"class":84,"line":119},[82,1843,898],{"class":109},[82,1845,926],{"class":662},[82,1847,669],{"class":109},[82,1849,1850],{"class":84,"line":126},[82,1851,123],{"emptyLinePlaceholder":122},[82,1853,1854],{"class":84,"line":139},[82,1855,1856],{"class":691},"\u003C!-- 오류: city는 v-for 바깥에서 사용할 수 없음 -->\n",[82,1858,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879,1881],{"class":84,"line":151},[82,1860,659],{"class":109},[82,1862,953],{"class":662},[82,1864,1464],{"class":109},[82,1866,1467],{"class":188},[82,1868,113],{"class":109},[82,1870,1395],{"class":99},[82,1872,1539],{"class":188},[82,1874,1542],{"class":109},[82,1876,1395],{"class":99},[82,1878,1547],{"class":109},[82,1880,953],{"class":662},[82,1882,669],{"class":109},[15,1884,1885,1887],{},[37,1886,1723],{},"는 각 항목의 고유한 정체성을 Vue에 알려준다. 목록의 순서가 바뀌거나 항목이 삭제될 때 Vue가 어떤 DOM을 재사용하고 제거할지 정확하게 판단할 수 있다.",[73,1889,1891],{"className":650,"code":1890,"language":652,"meta":78,"style":78},"\u003Cdiv v-for=\"user in users\" :key=\"user.id\">\n {{ user.name }}\n\u003C\u002Fdiv>\n",[37,1892,1893,1929,1934],{"__ignoreMap":78},[82,1894,1895,1897,1899,1901,1903,1905,1908,1910,1912,1914,1916,1918,1920,1922,1925,1927],{"class":84,"line":85},[82,1896,659],{"class":109},[82,1898,926],{"class":662},[82,1900,929],{"class":88},[82,1902,113],{"class":109},[82,1904,1395],{"class":99},[82,1906,1907],{"class":109},"user ",[82,1909,1751],{"class":88},[82,1911,215],{"class":109},[82,1913,1395],{"class":99},[82,1915,529],{"class":109},[82,1917,1723],{"class":188},[82,1919,113],{"class":109},[82,1921,1395],{"class":99},[82,1923,1924],{"class":109},"user.id",[82,1926,1395],{"class":99},[82,1928,669],{"class":109},[82,1930,1931],{"class":84,"line":103},[82,1932,1933],{"class":109}," {{ user.name }}\n",[82,1935,1936,1938,1940],{"class":84,"line":119},[82,1937,898],{"class":109},[82,1939,926],{"class":662},[82,1941,669],{"class":109},[68,1943,1945,1946,1949],{"id":1944},"_7-computed와-일반-함수","7. ",[37,1947,1948],{},"computed","와 일반 함수",[15,1951,1952],{},"Vue에서는",[15,1954,1955,1956,1958],{},"상태에서 새로운 값을 계산하면 ",[37,1957,1948],{},"를 사용하고,",[15,1960,1961],{},"사용자 행동을 처리하려면 일반 함수를 사용한다.",[73,1963,1965],{"className":75,"code":1964,"language":77,"meta":78,"style":78},"const totalPrice = computed(() => {\n return products.value.reduce((sum, product) => {\n return sum + product.price\n }, 0)\n})\n\nconst save = () => {\n alert('저장되었습니다.')\n}\n",[37,1966,1967,1983,2005,2015,2023,2027,2031,2046,2058],{"__ignoreMap":78},[82,1968,1969,1971,1973,1975,1977,1979,1981],{"class":84,"line":85},[82,1970,89],{"class":88},[82,1972,786],{"class":92},[82,1974,96],{"class":88},[82,1976,791],{"class":188},[82,1978,794],{"class":109},[82,1980,305],{"class":88},[82,1982,136],{"class":109},[82,1984,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003],{"class":84,"line":103},[82,1986,312],{"class":88},[82,1988,805],{"class":109},[82,1990,49],{"class":188},[82,1992,397],{"class":109},[82,1994,812],{"class":293},[82,1996,40],{"class":109},[82,1998,817],{"class":293},[82,2000,302],{"class":109},[82,2002,305],{"class":88},[82,2004,136],{"class":109},[82,2006,2007,2009,2011,2013],{"class":84,"line":119},[82,2008,828],{"class":88},[82,2010,831],{"class":109},[82,2012,318],{"class":88},[82,2014,836],{"class":109},[82,2016,2017,2019,2021],{"class":84,"line":126},[82,2018,841],{"class":109},[82,2020,490],{"class":92},[82,2022,464],{"class":109},[82,2024,2025],{"class":84,"line":139},[82,2026,851],{"class":109},[82,2028,2029],{"class":84,"line":151},[82,2030,123],{"emptyLinePlaceholder":122},[82,2032,2033,2035,2038,2040,2042,2044],{"class":84,"line":162},[82,2034,89],{"class":88},[82,2036,2037],{"class":188}," save",[82,2039,96],{"class":88},[82,2041,577],{"class":109},[82,2043,305],{"class":88},[82,2045,136],{"class":109},[82,2047,2048,2051,2053,2056],{"class":84,"line":171},[82,2049,2050],{"class":188}," alert",[82,2052,600],{"class":109},[82,2054,2055],{"class":99},"'저장되었습니다.'",[82,2057,464],{"class":109},[82,2059,2060],{"class":84,"line":177},[82,2061,174],{"class":109},[73,2063,2065],{"className":650,"code":2064,"language":652,"meta":78,"style":78},"\u003Cp>총가격: {{ totalPrice }}원\u003C\u002Fp>\n\u003Cbutton @click=\"save\">저장\u003C\u002Fbutton>\n",[37,2066,2067,2079],{"__ignoreMap":78},[82,2068,2069,2071,2073,2075,2077],{"class":84,"line":85},[82,2070,659],{"class":109},[82,2072,15],{"class":662},[82,2074,1004],{"class":109},[82,2076,15],{"class":662},[82,2078,669],{"class":109},[82,2080,2081,2083,2085,2087,2089,2091,2093,2096,2098,2101,2103],{"class":84,"line":103},[82,2082,659],{"class":109},[82,2084,953],{"class":662},[82,2086,1464],{"class":109},[82,2088,1467],{"class":188},[82,2090,113],{"class":109},[82,2092,1395],{"class":99},[82,2094,2095],{"class":109},"save",[82,2097,1395],{"class":99},[82,2099,2100],{"class":109},">저장\u003C\u002F",[82,2102,953],{"class":662},[82,2104,669],{"class":109},[15,2106,2107,2109],{},[37,2108,1948],{},"는 계산된 값이므로 템플릿에서 함수처럼 호출하지 않는다.",[73,2111,2113],{"className":650,"code":2112,"language":652,"meta":78,"style":78},"\u003C!-- 잘못된 사용 -->\n\u003Cbutton @click=\"totalPrice(products)\">총가격\u003C\u002Fbutton>\n",[37,2114,2115,2120],{"__ignoreMap":78},[82,2116,2117],{"class":84,"line":85},[82,2118,2119],{"class":691},"\u003C!-- 잘못된 사용 -->\n",[82,2121,2122,2124,2126,2128,2130,2132,2134,2136,2139,2141,2144,2146],{"class":84,"line":103},[82,2123,659],{"class":109},[82,2125,953],{"class":662},[82,2127,1464],{"class":109},[82,2129,1467],{"class":188},[82,2131,113],{"class":109},[82,2133,1395],{"class":99},[82,2135,1075],{"class":188},[82,2137,2138],{"class":109},"(products)",[82,2140,1395],{"class":99},[82,2142,2143],{"class":109},">총가격\u003C\u002F",[82,2145,953],{"class":662},[82,2147,669],{"class":109},[15,2149,2150,2151],{},"자! 다시 한 번 외워보자! ",[2152,2153,2154],"del",{},"외울거 없다면서",[22,2156,2157,2160],{},[25,2158,2159],{},"증가, 삭제, 선택, 저장 → 일반 함수",[25,2161,2162,2163],{},"총합, 개수, 평균, 필터 결과 → ",[37,2164,1948],{},[68,2166,2168,2169,2172],{"id":2167},"_8-v-model은-입력-요소에-사용","8. ",[37,2170,2171],{},"v-model","은 입력 요소에 사용",[15,2174,2175,2177],{},[37,2176,2171],{},"은 사용자가 값을 입력하거나 선택하는 요소에 연결한다.",[73,2179,2181],{"className":650,"code":2180,"language":652,"meta":78,"style":78},"\u003Cinput v-model=\"name\" \u002F>\n\u003Ctextarea v-model=\"content\">\u003C\u002Ftextarea>\n\n\u003Cselect v-model=\"selectedCity\">\n \u003Coption value=\"서울\">서울\u003C\u002Foption>\n\u003C\u002Fselect>\n",[37,2182,2183,2203,2228,2232,2252,2257],{"__ignoreMap":78},[82,2184,2185,2187,2190,2193,2195,2197,2199,2201],{"class":84,"line":85},[82,2186,659],{"class":109},[82,2188,2189],{"class":662},"input",[82,2191,2192],{"class":188}," v-model",[82,2194,113],{"class":109},[82,2196,1395],{"class":99},[82,2198,339],{"class":109},[82,2200,1395],{"class":99},[82,2202,1411],{"class":109},[82,2204,2205,2207,2210,2212,2214,2216,2219,2221,2224,2226],{"class":84,"line":103},[82,2206,659],{"class":109},[82,2208,2209],{"class":662},"textarea",[82,2211,2192],{"class":188},[82,2213,113],{"class":109},[82,2215,1395],{"class":99},[82,2217,2218],{"class":109},"content",[82,2220,1395],{"class":99},[82,2222,2223],{"class":109},">\u003C\u002F",[82,2225,2209],{"class":662},[82,2227,669],{"class":109},[82,2229,2230],{"class":84,"line":119},[82,2231,123],{"emptyLinePlaceholder":122},[82,2233,2234,2236,2239,2241,2243,2245,2248,2250],{"class":84,"line":126},[82,2235,659],{"class":109},[82,2237,2238],{"class":662},"select",[82,2240,2192],{"class":188},[82,2242,113],{"class":109},[82,2244,1395],{"class":99},[82,2246,2247],{"class":109},"selectedCity",[82,2249,1395],{"class":99},[82,2251,669],{"class":109},[82,2253,2254],{"class":84,"line":139},[82,2255,2256],{"class":109}," \u003Coption value=\"서울\">서울\u003C\u002Foption>\n",[82,2258,2259,2261,2263],{"class":84,"line":151},[82,2260,898],{"class":109},[82,2262,2238],{"class":662},[82,2264,669],{"class":109},[15,2266,2267,2269],{},[37,2268,15],{},"는 값을 입력받는 요소가 아니라 결과를 보여주는 요소다.",[73,2271,2273],{"className":650,"code":2272,"language":652,"meta":78,"style":78},"\u003C!-- 잘못된 사용 -->\n\u003Cp input v-model=\"name\">{{ name }}\u003C\u002Fp>\n\n\u003C!-- 올바른 사용 -->\n\u003Cinput v-model=\"name\" \u002F>\n\u003Cp>{{ name }}\u003C\u002Fp>\n",[37,2274,2275,2279,2305,2309,2314,2332],{"__ignoreMap":78},[82,2276,2277],{"class":84,"line":85},[82,2278,2119],{"class":691},[82,2280,2281,2283,2285,2288,2290,2292,2294,2296,2298,2301,2303],{"class":84,"line":103},[82,2282,659],{"class":109},[82,2284,15],{"class":662},[82,2286,2287],{"class":188}," input",[82,2289,2192],{"class":188},[82,2291,113],{"class":109},[82,2293,1395],{"class":99},[82,2295,339],{"class":109},[82,2297,1395],{"class":99},[82,2299,2300],{"class":109},">{{ name }}\u003C\u002F",[82,2302,15],{"class":662},[82,2304,669],{"class":109},[82,2306,2307],{"class":84,"line":119},[82,2308,123],{"emptyLinePlaceholder":122},[82,2310,2311],{"class":84,"line":126},[82,2312,2313],{"class":691},"\u003C!-- 올바른 사용 -->\n",[82,2315,2316,2318,2320,2322,2324,2326,2328,2330],{"class":84,"line":139},[82,2317,659],{"class":109},[82,2319,2189],{"class":662},[82,2321,2192],{"class":188},[82,2323,113],{"class":109},[82,2325,1395],{"class":99},[82,2327,339],{"class":109},[82,2329,1395],{"class":99},[82,2331,1411],{"class":109},[82,2333,2334,2336,2338,2340,2342],{"class":84,"line":151},[82,2335,659],{"class":109},[82,2337,15],{"class":662},[82,2339,2300],{"class":109},[82,2341,15],{"class":662},[82,2343,669],{"class":109},[15,2345,2346],{},"입력과 출력의 흐름은 다음과 같다.",[73,2348,2353],{"className":2349,"code":2351,"language":2352,"meta":78},[2350],"language-text","사용자가 input에 입력\n ↓\nv-model이 name 상태를 변경\n ↓\n실제로는 name.value가 변경\n ↓\n{{ name }}을 사용하는 화면이 갱신\n","text",[37,2354,2351],{"__ignoreMap":78},[68,2356,2358],{"id":2357},"_9-부모와-자식-컴포넌트-통신","9. 부모와 자식 컴포넌트 통신",[15,2360,2361],{},"여기는 중요한 내용이므로 집중하자.",[15,2363,2364],{},"지금부터 Vue에서 컴포넌트 간 데이터 전달 방식에 대해 설명하겠다.",[15,2366,2367],{},"Vue에서는 컴포넌트 간에 데이터를 주고받을 수 있다.",[15,2369,2370,2371,2374,2375,2378],{},"부모에서 자식으로는 ",[37,2372,2373],{},"props",", 자식에서 부모로는 ",[37,2376,2377],{},"emit","을 사용한다.",[73,2380,2382],{"className":650,"code":2381,"language":652,"meta":78,"style":78},"\u003C!-- 부모 컴포넌트 -->\n\u003CUserCard :name=\"userName\" @select=\"handleSelect\" \u002F>\n",[37,2383,2384,2389],{"__ignoreMap":78},[82,2385,2386],{"class":84,"line":85},[82,2387,2388],{"class":691},"\u003C!-- 부모 컴포넌트 -->\n",[82,2390,2391,2393,2396,2398,2400,2402,2404,2407,2409,2411,2413,2415,2417,2420,2422],{"class":84,"line":103},[82,2392,659],{"class":109},[82,2394,2395],{"class":662},"UserCard",[82,2397,529],{"class":109},[82,2399,339],{"class":188},[82,2401,113],{"class":109},[82,2403,1395],{"class":99},[82,2405,2406],{"class":109},"userName",[82,2408,1395],{"class":99},[82,2410,1464],{"class":109},[82,2412,2238],{"class":188},[82,2414,113],{"class":109},[82,2416,1395],{"class":99},[82,2418,2419],{"class":109},"handleSelect",[82,2421,1395],{"class":99},[82,2423,1411],{"class":109},[73,2425,2427],{"className":650,"code":2426,"language":652,"meta":78,"style":78},"\u003C!-- 자식 컴포넌트 -->\n\u003Cscript setup>\ndefineProps({\n name: String\n})\n\nconst emit = defineEmits(['select'])\n\nconst handleClick = () => {\n emit('select', 10)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cp>{{ name }}\u003C\u002Fp>\n \u003Cbutton @click=\"handleClick\">선택\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[37,2428,2429,2434,2444,2452,2457,2461,2465,2485,2489,2503,2519,2523,2531,2535,2543,2555,2574],{"__ignoreMap":78},[82,2430,2431],{"class":84,"line":85},[82,2432,2433],{"class":691},"\u003C!-- 자식 컴포넌트 -->\n",[82,2435,2436,2438,2440,2442],{"class":84,"line":103},[82,2437,659],{"class":109},[82,2439,663],{"class":662},[82,2441,666],{"class":188},[82,2443,669],{"class":109},[82,2445,2446,2449],{"class":84,"line":119},[82,2447,2448],{"class":188},"defineProps",[82,2450,2451],{"class":109},"({\n",[82,2453,2454],{"class":84,"line":126},[82,2455,2456],{"class":109}," name: String\n",[82,2458,2459],{"class":84,"line":139},[82,2460,851],{"class":109},[82,2462,2463],{"class":84,"line":151},[82,2464,123],{"emptyLinePlaceholder":122},[82,2466,2467,2469,2472,2474,2477,2480,2483],{"class":84,"line":162},[82,2468,89],{"class":88},[82,2470,2471],{"class":92}," emit",[82,2473,96],{"class":88},[82,2475,2476],{"class":188}," defineEmits",[82,2478,2479],{"class":109},"([",[82,2481,2482],{"class":99},"'select'",[82,2484,753],{"class":109},[82,2486,2487],{"class":84,"line":171},[82,2488,123],{"emptyLinePlaceholder":122},[82,2490,2491,2493,2495,2497,2499,2501],{"class":84,"line":177},[82,2492,89],{"class":88},[82,2494,1597],{"class":188},[82,2496,96],{"class":88},[82,2498,577],{"class":109},[82,2500,305],{"class":88},[82,2502,136],{"class":109},[82,2504,2505,2508,2510,2512,2514,2517],{"class":84,"line":182},[82,2506,2507],{"class":188}," emit",[82,2509,600],{"class":109},[82,2511,2482],{"class":99},[82,2513,40],{"class":109},[82,2515,2516],{"class":92},"10",[82,2518,464],{"class":109},[82,2520,2521],{"class":84,"line":195},[82,2522,174],{"class":109},[82,2524,2525,2527,2529],{"class":84,"line":205},[82,2526,898],{"class":109},[82,2528,663],{"class":662},[82,2530,669],{"class":109},[82,2532,2533],{"class":84,"line":210},[82,2534,123],{"emptyLinePlaceholder":122},[82,2536,2537,2539,2541],{"class":84,"line":223},[82,2538,659],{"class":109},[82,2540,915],{"class":662},[82,2542,669],{"class":109},[82,2544,2545,2547,2549,2551,2553],{"class":84,"line":245},[82,2546,923],{"class":109},[82,2548,15],{"class":662},[82,2550,2300],{"class":109},[82,2552,15],{"class":662},[82,2554,669],{"class":109},[82,2556,2557,2559,2561,2563,2565,2568,2570,2572],{"class":84,"line":266},[82,2558,923],{"class":109},[82,2560,953],{"class":662},[82,2562,956],{"class":188},[82,2564,113],{"class":109},[82,2566,2567],{"class":99},"\"handleClick\"",[82,2569,1547],{"class":109},[82,2571,953],{"class":662},[82,2573,669],{"class":109},[82,2575,2576,2578,2580],{"class":84,"line":848},[82,2577,898],{"class":109},[82,2579,915],{"class":662},[82,2581,669],{"class":109},[15,2583,2584],{},"흐름은 다음과 같다.",[73,2586,2589],{"className":2587,"code":2588,"language":2352,"meta":78},[2350],"부모 → 자식: props\n자식 → 부모: emit\n",[37,2590,2588],{"__ignoreMap":78},[68,2592,2594],{"id":2593},"_10-버튼-클릭부터-화면-변경까지","10. 버튼 클릭부터 화면 변경까지",[73,2596,2598],{"className":650,"code":2597,"language":652,"meta":78,"style":78},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst count = ref(0)\n\nconst increase = () => {\n count.value++\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cp>{{ count }}\u003C\u002Fp>\n \u003Cbutton @click=\"increase\">증가\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[37,2599,2600,2610,2620,2624,2640,2644,2658,2664,2668,2676,2680,2688,2700,2719],{"__ignoreMap":78},[82,2601,2602,2604,2606,2608],{"class":84,"line":85},[82,2603,659],{"class":109},[82,2605,663],{"class":662},[82,2607,666],{"class":188},[82,2609,669],{"class":109},[82,2611,2612,2614,2616,2618],{"class":84,"line":103},[82,2613,54],{"class":88},[82,2615,1164],{"class":109},[82,2617,679],{"class":88},[82,2619,682],{"class":99},[82,2621,2622],{"class":84,"line":119},[82,2623,123],{"emptyLinePlaceholder":122},[82,2625,2626,2628,2630,2632,2634,2636,2638],{"class":84,"line":126},[82,2627,89],{"class":88},[82,2629,1179],{"class":92},[82,2631,96],{"class":88},[82,2633,708],{"class":188},[82,2635,600],{"class":109},[82,2637,490],{"class":92},[82,2639,464],{"class":109},[82,2641,2642],{"class":84,"line":139},[82,2643,123],{"emptyLinePlaceholder":122},[82,2645,2646,2648,2650,2652,2654,2656],{"class":84,"line":151},[82,2647,89],{"class":88},[82,2649,1495],{"class":188},[82,2651,96],{"class":88},[82,2653,577],{"class":109},[82,2655,305],{"class":88},[82,2657,136],{"class":109},[82,2659,2660,2662],{"class":84,"line":162},[82,2661,1508],{"class":109},[82,2663,1146],{"class":88},[82,2665,2666],{"class":84,"line":171},[82,2667,174],{"class":109},[82,2669,2670,2672,2674],{"class":84,"line":177},[82,2671,898],{"class":109},[82,2673,663],{"class":662},[82,2675,669],{"class":109},[82,2677,2678],{"class":84,"line":182},[82,2679,123],{"emptyLinePlaceholder":122},[82,2681,2682,2684,2686],{"class":84,"line":195},[82,2683,659],{"class":109},[82,2685,915],{"class":662},[82,2687,669],{"class":109},[82,2689,2690,2692,2694,2696,2698],{"class":84,"line":205},[82,2691,923],{"class":109},[82,2693,15],{"class":662},[82,2695,1335],{"class":109},[82,2697,15],{"class":662},[82,2699,669],{"class":109},[82,2701,2702,2704,2706,2708,2710,2713,2715,2717],{"class":84,"line":210},[82,2703,923],{"class":109},[82,2705,953],{"class":662},[82,2707,956],{"class":188},[82,2709,113],{"class":109},[82,2711,2712],{"class":99},"\"increase\"",[82,2714,1479],{"class":109},[82,2716,953],{"class":662},[82,2718,669],{"class":109},[82,2720,2721,2723,2725],{"class":84,"line":223},[82,2722,898],{"class":109},[82,2724,915],{"class":662},[82,2726,669],{"class":109},[73,2728,2731],{"className":2729,"code":2730,"language":2352,"meta":78},[2350],"사용자가 버튼을 클릭\n ↓\n@click이 increase 실행\n ↓\ncount.value 변경\n ↓\nVue가 변경을 감지\n ↓\n{{ count }}를 사용하는 화면 갱신\n",[37,2732,2730],{"__ignoreMap":78},[10,2734,2736],{"id":2735},"코드-따라치기-작은-관리-화면-만들기","코드 따라치기: 작은 관리 화면 만들기",[15,2738,2739,2740,40,2742,40,2744,40,2746,40,2748,2750],{},"앞에서 배운 ",[37,2741,1120],{},[37,2743,1948],{},[37,2745,2171],{},[37,2747,1631],{},[37,2749,1720],{},", 이벤트를 한 번에 연습해보자.",[73,2752,2754],{"className":650,"code":2753,"language":652,"meta":78,"style":78},"\u003Cscript setup>\nimport { computed, ref } from 'vue'\n\n\u002F\u002F 1. 카운터\nconst count = ref(0)\n\nconst increase = () => {\n count.value++\n}\n\nconst decrease = () => {\n count.value--\n}\n\nconst reset = () => {\n count.value = 0\n}\n\n\u002F\u002F 2. 이름 입력\nconst name = ref('')\n\n\u002F\u002F 3. 도시 목록\nconst cities = ref([\n { id: 1, name: '서울', temp: 28 },\n { id: 2, name: '수원', temp: 27 },\n { id: 3, name: '부산', temp: 26 }\n])\n\nconst selectedCity = ref(null)\n\nconst selectCity = (city) => {\n selectedCity.value = city\n}\n\n\u002F\u002F 4. 상품 목록\nconst products = ref([\n { id: 1, name: '키보드', price: 50000 },\n { id: 2, name: '마우스', price: 30000 },\n { id: 3, name: '모니터', price: 250000 }\n])\n\nconst totalPrice = computed(() => {\n return products.value.reduce((sum, product) => {\n return sum + product.price\n }, 0)\n})\n\n\u002F\u002F 5. 할 일 목록\nconst newTodo = ref('')\nconst todos = ref([\n { id: 1, text: 'Vue 공부하기' }\n])\n\nconst addTodo = () => {\n const text = newTodo.value.trim()\n\n if (text === '') {\n return\n }\n\n todos.value.push({\n id: Date.now(),\n text\n })\n\n newTodo.value = ''\n}\n\nconst deleteTodo = (todoId) => {\n todos.value = todos.value.filter((todo) => {\n return todo.id !== todoId\n })\n}\n\nconst todoCount = computed(() => {\n return todos.value.length\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n \u003Cmain>\n \u003Csection>\n \u003Ch2>1. 카운터\u003C\u002Fh2>\n\n \u003Cp>현재 숫자: {{ count }}\u003C\u002Fp>\n \u003Cbutton @click=\"increase\">증가\u003C\u002Fbutton>\n \u003Cbutton @click=\"decrease\">감소\u003C\u002Fbutton>\n \u003Cbutton @click=\"reset\">초기화\u003C\u002Fbutton>\n\n \u003Cp v-if=\"count > 0\">양수입니다.\u003C\u002Fp>\n \u003Cp v-else-if=\"count === 0\">0입니다.\u003C\u002Fp>\n \u003Cp v-else>음수입니다.\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection>\n \u003Ch2>2. 이름 입력\u003C\u002Fh2>\n\n \u003Cinput v-model=\"name\" placeholder=\"이름을 입력하세요\" \u002F>\n \u003Cp v-if=\"name.trim() === ''\">이름을 입력하세요.\u003C\u002Fp>\n \u003Cp v-else>안녕하세요, {{ name }}님!\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection>\n \u003Ch2>3. 도시 목록\u003C\u002Fh2>\n\n \u003Cdiv v-for=\"city in cities\" :key=\"city.id\">\n \u003Cspan>{{ city.name }}: {{ city.temp }}℃\u003C\u002Fspan>\n \u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\n \u003Cp v-if=\"selectedCity\">\n 선택된 도시: {{ selectedCity.name }}\n \u003C\u002Fp>\n \u003Cp v-else>선택된 도시가 없습니다.\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection>\n \u003Ch2>4. 상품 목록\u003C\u002Fh2>\n\n \u003Cdiv v-for=\"product in products\" :key=\"product.id\">\n {{ product.name }}: {{ product.price }}원\n \u003C\u002Fdiv>\n\n \u003Cp>총가격: {{ totalPrice }}원\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection>\n \u003Ch2>5. 할 일 목록\u003C\u002Fh2>\n\n \u003Cinput\n v-model=\"newTodo\"\n placeholder=\"할 일을 입력하세요\"\n @keyup.enter=\"addTodo\"\n \u002F>\n \u003Cbutton @click=\"addTodo\">추가\u003C\u002Fbutton>\n\n \u003Cp>현재 할 일: {{ todoCount }}개\u003C\u002Fp>\n\n \u003Cp v-if=\"todos.length === 0\">등록된 할 일이 없습니다.\u003C\u002Fp>\n \u003Cul v-else>\n \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n {{ todo.text }}\n \u003Cbutton @click=\"deleteTodo(todo.id)\">삭제\u003C\u002Fbutton>\n \u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fsection>\n \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[37,2755,2756,2766,2776,2780,2785,2801,2805,2819,2825,2829,2833,2848,2855,2859,2863,2878,2887,2891,2895,2900,2917,2921,2926,2938,2957,2975,2994,2998,3002,3019,3023,3042,3052,3056,3060,3065,3077,3094,3111,3130,3135,3140,3157,3180,3191,3200,3205,3210,3216,3234,3248,3263,3268,3273,3289,3307,3312,3329,3335,3341,3346,3357,3369,3375,3381,3386,3397,3402,3407,3428,3452,3466,3471,3476,3481,3499,3509,3514,3523,3528,3537,3547,3557,3572,3577,3591,3610,3631,3652,3657,3678,3700,3717,3726,3731,3740,3754,3759,3783,3804,3820,3829,3834,3843,3857,3862,3885,3900,3920,3930,3935,3951,3957,3966,3982,3991,3996,4005,4019,4024,4045,4051,4060,4065,4078,4087,4092,4101,4115,4120,4128,4139,4150,4161,4167,4188,4193,4207,4212,4233,4244,4267,4273,4295,4305,4314,4323,4332],{"__ignoreMap":78},[82,2757,2758,2760,2762,2764],{"class":84,"line":85},[82,2759,659],{"class":109},[82,2761,663],{"class":662},[82,2763,666],{"class":188},[82,2765,669],{"class":109},[82,2767,2768,2770,2772,2774],{"class":84,"line":103},[82,2769,54],{"class":88},[82,2771,676],{"class":109},[82,2773,679],{"class":88},[82,2775,682],{"class":99},[82,2777,2778],{"class":84,"line":119},[82,2779,123],{"emptyLinePlaceholder":122},[82,2781,2782],{"class":84,"line":126},[82,2783,2784],{"class":691},"\u002F\u002F 1. 카운터\n",[82,2786,2787,2789,2791,2793,2795,2797,2799],{"class":84,"line":139},[82,2788,89],{"class":88},[82,2790,1179],{"class":92},[82,2792,96],{"class":88},[82,2794,708],{"class":188},[82,2796,600],{"class":109},[82,2798,490],{"class":92},[82,2800,464],{"class":109},[82,2802,2803],{"class":84,"line":151},[82,2804,123],{"emptyLinePlaceholder":122},[82,2806,2807,2809,2811,2813,2815,2817],{"class":84,"line":162},[82,2808,89],{"class":88},[82,2810,1495],{"class":188},[82,2812,96],{"class":88},[82,2814,577],{"class":109},[82,2816,305],{"class":88},[82,2818,136],{"class":109},[82,2820,2821,2823],{"class":84,"line":171},[82,2822,1508],{"class":109},[82,2824,1146],{"class":88},[82,2826,2827],{"class":84,"line":177},[82,2828,174],{"class":109},[82,2830,2831],{"class":84,"line":182},[82,2832,123],{"emptyLinePlaceholder":122},[82,2834,2835,2837,2840,2842,2844,2846],{"class":84,"line":195},[82,2836,89],{"class":88},[82,2838,2839],{"class":188}," decrease",[82,2841,96],{"class":88},[82,2843,577],{"class":109},[82,2845,305],{"class":88},[82,2847,136],{"class":109},[82,2849,2850,2852],{"class":84,"line":205},[82,2851,1508],{"class":109},[82,2853,2854],{"class":88},"--\n",[82,2856,2857],{"class":84,"line":210},[82,2858,174],{"class":109},[82,2860,2861],{"class":84,"line":223},[82,2862,123],{"emptyLinePlaceholder":122},[82,2864,2865,2867,2870,2872,2874,2876],{"class":84,"line":245},[82,2866,89],{"class":88},[82,2868,2869],{"class":188}," reset",[82,2871,96],{"class":88},[82,2873,577],{"class":109},[82,2875,305],{"class":88},[82,2877,136],{"class":109},[82,2879,2880,2883,2885],{"class":84,"line":266},[82,2881,2882],{"class":109}," count.value ",[82,2884,113],{"class":88},[82,2886,116],{"class":92},[82,2888,2889],{"class":84,"line":848},[82,2890,174],{"class":109},[82,2892,2893],{"class":84,"line":854},[82,2894,123],{"emptyLinePlaceholder":122},[82,2896,2897],{"class":84,"line":859},[82,2898,2899],{"class":691},"\u002F\u002F 2. 이름 입력\n",[82,2901,2902,2904,2906,2908,2910,2912,2915],{"class":84,"line":879},[82,2903,89],{"class":88},[82,2905,93],{"class":92},[82,2907,96],{"class":88},[82,2909,708],{"class":188},[82,2911,600],{"class":109},[82,2913,2914],{"class":99},"''",[82,2916,464],{"class":109},[82,2918,2919],{"class":84,"line":890},[82,2920,123],{"emptyLinePlaceholder":122},[82,2922,2923],{"class":84,"line":895},[82,2924,2925],{"class":691},"\u002F\u002F 3. 도시 목록\n",[82,2927,2928,2930,2932,2934,2936],{"class":84,"line":905},[82,2929,89],{"class":88},[82,2931,1754],{"class":92},[82,2933,96],{"class":88},[82,2935,708],{"class":188},[82,2937,711],{"class":109},[82,2939,2940,2942,2944,2946,2949,2952,2955],{"class":84,"line":910},[82,2941,226],{"class":109},[82,2943,145],{"class":92},[82,2945,231],{"class":109},[82,2947,2948],{"class":99},"'서울'",[82,2950,2951],{"class":109},", temp: ",[82,2953,2954],{"class":92},"28",[82,2956,242],{"class":109},[82,2958,2959,2961,2963,2965,2968,2970,2973],{"class":84,"line":920},[82,2960,226],{"class":109},[82,2962,250],{"class":92},[82,2964,231],{"class":109},[82,2966,2967],{"class":99},"'수원'",[82,2969,2951],{"class":109},[82,2971,2972],{"class":92},"27",[82,2974,242],{"class":109},[82,2976,2977,2979,2982,2984,2987,2989,2992],{"class":84,"line":947},[82,2978,226],{"class":109},[82,2980,2981],{"class":92},"3",[82,2983,231],{"class":109},[82,2985,2986],{"class":99},"'부산'",[82,2988,2951],{"class":109},[82,2990,2991],{"class":92},"26",[82,2993,263],{"class":109},[82,2995,2996],{"class":84,"line":966},[82,2997,753],{"class":109},[82,2999,3000],{"class":84,"line":972},[82,3001,123],{"emptyLinePlaceholder":122},[82,3003,3004,3006,3009,3011,3013,3015,3017],{"class":84,"line":982},[82,3005,89],{"class":88},[82,3007,3008],{"class":92}," selectedCity",[82,3010,96],{"class":88},[82,3012,708],{"class":188},[82,3014,600],{"class":109},[82,3016,773],{"class":92},[82,3018,464],{"class":109},[82,3020,3021],{"class":84,"line":992},[82,3022,123],{"emptyLinePlaceholder":122},[82,3024,3025,3027,3030,3032,3034,3036,3038,3040],{"class":84,"line":997},[82,3026,89],{"class":88},[82,3028,3029],{"class":188}," selectCity",[82,3031,96],{"class":88},[82,3033,290],{"class":109},[82,3035,1794],{"class":293},[82,3037,302],{"class":109},[82,3039,305],{"class":88},[82,3041,136],{"class":109},[82,3043,3044,3047,3049],{"class":84,"line":1011},[82,3045,3046],{"class":109}," selectedCity.value ",[82,3048,113],{"class":88},[82,3050,3051],{"class":109}," city\n",[82,3053,3054],{"class":84,"line":1016},[82,3055,174],{"class":109},[82,3057,3058],{"class":84,"line":1033},[82,3059,123],{"emptyLinePlaceholder":122},[82,3061,3062],{"class":84,"line":1039},[82,3063,3064],{"class":691},"\u002F\u002F 4. 상품 목록\n",[82,3066,3067,3069,3071,3073,3075],{"class":84,"line":1048},[82,3068,89],{"class":88},[82,3070,703],{"class":92},[82,3072,96],{"class":88},[82,3074,708],{"class":188},[82,3076,711],{"class":109},[82,3078,3080,3082,3084,3086,3088,3090,3092],{"class":84,"line":3079},37,[82,3081,226],{"class":109},[82,3083,145],{"class":92},[82,3085,231],{"class":109},[82,3087,722],{"class":99},[82,3089,725],{"class":109},[82,3091,728],{"class":92},[82,3093,242],{"class":109},[82,3095,3097,3099,3101,3103,3105,3107,3109],{"class":84,"line":3096},38,[82,3098,226],{"class":109},[82,3100,250],{"class":92},[82,3102,231],{"class":109},[82,3104,741],{"class":99},[82,3106,725],{"class":109},[82,3108,746],{"class":92},[82,3110,242],{"class":109},[82,3112,3114,3116,3118,3120,3123,3125,3128],{"class":84,"line":3113},39,[82,3115,226],{"class":109},[82,3117,2981],{"class":92},[82,3119,231],{"class":109},[82,3121,3122],{"class":99},"'모니터'",[82,3124,725],{"class":109},[82,3126,3127],{"class":92},"250000",[82,3129,263],{"class":109},[82,3131,3133],{"class":84,"line":3132},40,[82,3134,753],{"class":109},[82,3136,3138],{"class":84,"line":3137},41,[82,3139,123],{"emptyLinePlaceholder":122},[82,3141,3143,3145,3147,3149,3151,3153,3155],{"class":84,"line":3142},42,[82,3144,89],{"class":88},[82,3146,786],{"class":92},[82,3148,96],{"class":88},[82,3150,791],{"class":188},[82,3152,794],{"class":109},[82,3154,305],{"class":88},[82,3156,136],{"class":109},[82,3158,3160,3162,3164,3166,3168,3170,3172,3174,3176,3178],{"class":84,"line":3159},43,[82,3161,312],{"class":88},[82,3163,805],{"class":109},[82,3165,49],{"class":188},[82,3167,397],{"class":109},[82,3169,812],{"class":293},[82,3171,40],{"class":109},[82,3173,817],{"class":293},[82,3175,302],{"class":109},[82,3177,305],{"class":88},[82,3179,136],{"class":109},[82,3181,3183,3185,3187,3189],{"class":84,"line":3182},44,[82,3184,828],{"class":88},[82,3186,831],{"class":109},[82,3188,318],{"class":88},[82,3190,836],{"class":109},[82,3192,3194,3196,3198],{"class":84,"line":3193},45,[82,3195,841],{"class":109},[82,3197,490],{"class":92},[82,3199,464],{"class":109},[82,3201,3203],{"class":84,"line":3202},46,[82,3204,851],{"class":109},[82,3206,3208],{"class":84,"line":3207},47,[82,3209,123],{"emptyLinePlaceholder":122},[82,3211,3213],{"class":84,"line":3212},48,[82,3214,3215],{"class":691},"\u002F\u002F 5. 할 일 목록\n",[82,3217,3219,3221,3224,3226,3228,3230,3232],{"class":84,"line":3218},49,[82,3220,89],{"class":88},[82,3222,3223],{"class":92}," newTodo",[82,3225,96],{"class":88},[82,3227,708],{"class":188},[82,3229,600],{"class":109},[82,3231,2914],{"class":99},[82,3233,464],{"class":109},[82,3235,3237,3239,3242,3244,3246],{"class":84,"line":3236},50,[82,3238,89],{"class":88},[82,3240,3241],{"class":92}," todos",[82,3243,96],{"class":88},[82,3245,708],{"class":188},[82,3247,711],{"class":109},[82,3249,3251,3253,3255,3258,3261],{"class":84,"line":3250},51,[82,3252,226],{"class":109},[82,3254,145],{"class":92},[82,3256,3257],{"class":109},", text: ",[82,3259,3260],{"class":99},"'Vue 공부하기'",[82,3262,263],{"class":109},[82,3264,3266],{"class":84,"line":3265},52,[82,3267,753],{"class":109},[82,3269,3271],{"class":84,"line":3270},53,[82,3272,123],{"emptyLinePlaceholder":122},[82,3274,3276,3278,3281,3283,3285,3287],{"class":84,"line":3275},54,[82,3277,89],{"class":88},[82,3279,3280],{"class":188}," addTodo",[82,3282,96],{"class":88},[82,3284,577],{"class":109},[82,3286,305],{"class":88},[82,3288,136],{"class":109},[82,3290,3292,3294,3297,3299,3302,3305],{"class":84,"line":3291},55,[82,3293,586],{"class":88},[82,3295,3296],{"class":92}," text",[82,3298,96],{"class":88},[82,3300,3301],{"class":109}," newTodo.value.",[82,3303,3304],{"class":188},"trim",[82,3306,625],{"class":109},[82,3308,3310],{"class":84,"line":3309},56,[82,3311,123],{"emptyLinePlaceholder":122},[82,3313,3315,3318,3321,3323,3326],{"class":84,"line":3314},57,[82,3316,3317],{"class":88}," if",[82,3319,3320],{"class":109}," (text ",[82,3322,458],{"class":88},[82,3324,3325],{"class":99}," ''",[82,3327,3328],{"class":109},") {\n",[82,3330,3332],{"class":84,"line":3331},58,[82,3333,3334],{"class":88}," return\n",[82,3336,3338],{"class":84,"line":3337},59,[82,3339,3340],{"class":109}," }\n",[82,3342,3344],{"class":84,"line":3343},60,[82,3345,123],{"emptyLinePlaceholder":122},[82,3347,3349,3352,3355],{"class":84,"line":3348},61,[82,3350,3351],{"class":109}," todos.value.",[82,3353,3354],{"class":188},"push",[82,3356,2451],{"class":109},[82,3358,3360,3363,3366],{"class":84,"line":3359},62,[82,3361,3362],{"class":109}," id: Date.",[82,3364,3365],{"class":188},"now",[82,3367,3368],{"class":109},"(),\n",[82,3370,3372],{"class":84,"line":3371},63,[82,3373,3374],{"class":109}," text\n",[82,3376,3378],{"class":84,"line":3377},64,[82,3379,3380],{"class":109}," })\n",[82,3382,3384],{"class":84,"line":3383},65,[82,3385,123],{"emptyLinePlaceholder":122},[82,3387,3389,3392,3394],{"class":84,"line":3388},66,[82,3390,3391],{"class":109}," newTodo.value ",[82,3393,113],{"class":88},[82,3395,3396],{"class":99}," ''\n",[82,3398,3400],{"class":84,"line":3399},67,[82,3401,174],{"class":109},[82,3403,3405],{"class":84,"line":3404},68,[82,3406,123],{"emptyLinePlaceholder":122},[82,3408,3410,3412,3415,3417,3419,3422,3424,3426],{"class":84,"line":3409},69,[82,3411,89],{"class":88},[82,3413,3414],{"class":188}," deleteTodo",[82,3416,96],{"class":88},[82,3418,290],{"class":109},[82,3420,3421],{"class":293},"todoId",[82,3423,302],{"class":109},[82,3425,305],{"class":88},[82,3427,136],{"class":109},[82,3429,3431,3434,3436,3439,3441,3443,3446,3448,3450],{"class":84,"line":3430},70,[82,3432,3433],{"class":109}," todos.value ",[82,3435,113],{"class":88},[82,3437,3438],{"class":109}," todos.value.",[82,3440,43],{"class":188},[82,3442,397],{"class":109},[82,3444,3445],{"class":293},"todo",[82,3447,302],{"class":109},[82,3449,305],{"class":88},[82,3451,136],{"class":109},[82,3453,3455,3457,3460,3463],{"class":84,"line":3454},71,[82,3456,828],{"class":88},[82,3458,3459],{"class":109}," todo.id ",[82,3461,3462],{"class":88},"!==",[82,3464,3465],{"class":109}," todoId\n",[82,3467,3469],{"class":84,"line":3468},72,[82,3470,3380],{"class":109},[82,3472,3474],{"class":84,"line":3473},73,[82,3475,174],{"class":109},[82,3477,3479],{"class":84,"line":3478},74,[82,3480,123],{"emptyLinePlaceholder":122},[82,3482,3484,3486,3489,3491,3493,3495,3497],{"class":84,"line":3483},75,[82,3485,89],{"class":88},[82,3487,3488],{"class":92}," todoCount",[82,3490,96],{"class":88},[82,3492,791],{"class":188},[82,3494,794],{"class":109},[82,3496,305],{"class":88},[82,3498,136],{"class":109},[82,3500,3502,3504,3506],{"class":84,"line":3501},76,[82,3503,312],{"class":88},[82,3505,3438],{"class":109},[82,3507,3508],{"class":92},"length\n",[82,3510,3512],{"class":84,"line":3511},77,[82,3513,851],{"class":109},[82,3515,3517,3519,3521],{"class":84,"line":3516},78,[82,3518,898],{"class":109},[82,3520,663],{"class":662},[82,3522,669],{"class":109},[82,3524,3526],{"class":84,"line":3525},79,[82,3527,123],{"emptyLinePlaceholder":122},[82,3529,3531,3533,3535],{"class":84,"line":3530},80,[82,3532,659],{"class":109},[82,3534,915],{"class":662},[82,3536,669],{"class":109},[82,3538,3540,3542,3545],{"class":84,"line":3539},81,[82,3541,923],{"class":109},[82,3543,3544],{"class":662},"main",[82,3546,669],{"class":109},[82,3548,3550,3552,3555],{"class":84,"line":3549},82,[82,3551,950],{"class":109},[82,3553,3554],{"class":662},"section",[82,3556,669],{"class":109},[82,3558,3560,3563,3565,3568,3570],{"class":84,"line":3559},83,[82,3561,3562],{"class":109}," \u003C",[82,3564,10],{"class":662},[82,3566,3567],{"class":109},">1. 카운터\u003C\u002F",[82,3569,10],{"class":662},[82,3571,669],{"class":109},[82,3573,3575],{"class":84,"line":3574},84,[82,3576,123],{"emptyLinePlaceholder":122},[82,3578,3580,3582,3584,3587,3589],{"class":84,"line":3579},85,[82,3581,3562],{"class":109},[82,3583,15],{"class":662},[82,3585,3586],{"class":109},">현재 숫자: {{ count }}\u003C\u002F",[82,3588,15],{"class":662},[82,3590,669],{"class":109},[82,3592,3594,3596,3598,3600,3602,3604,3606,3608],{"class":84,"line":3593},86,[82,3595,3562],{"class":109},[82,3597,953],{"class":662},[82,3599,956],{"class":188},[82,3601,113],{"class":109},[82,3603,2712],{"class":99},[82,3605,1479],{"class":109},[82,3607,953],{"class":662},[82,3609,669],{"class":109},[82,3611,3613,3615,3617,3619,3621,3624,3627,3629],{"class":84,"line":3612},87,[82,3614,3562],{"class":109},[82,3616,953],{"class":662},[82,3618,956],{"class":188},[82,3620,113],{"class":109},[82,3622,3623],{"class":99},"\"decrease\"",[82,3625,3626],{"class":109},">감소\u003C\u002F",[82,3628,953],{"class":662},[82,3630,669],{"class":109},[82,3632,3634,3636,3638,3640,3642,3645,3648,3650],{"class":84,"line":3633},88,[82,3635,3562],{"class":109},[82,3637,953],{"class":662},[82,3639,956],{"class":188},[82,3641,113],{"class":109},[82,3643,3644],{"class":99},"\"reset\"",[82,3646,3647],{"class":109},">초기화\u003C\u002F",[82,3649,953],{"class":662},[82,3651,669],{"class":109},[82,3653,3655],{"class":84,"line":3654},89,[82,3656,123],{"emptyLinePlaceholder":122},[82,3658,3660,3662,3664,3666,3668,3671,3674,3676],{"class":84,"line":3659},90,[82,3661,3562],{"class":109},[82,3663,15],{"class":662},[82,3665,1023],{"class":188},[82,3667,113],{"class":109},[82,3669,3670],{"class":99},"\"count > 0\"",[82,3672,3673],{"class":109},">양수입니다.\u003C\u002F",[82,3675,15],{"class":662},[82,3677,669],{"class":109},[82,3679,3681,3683,3685,3688,3690,3693,3696,3698],{"class":84,"line":3680},91,[82,3682,3562],{"class":109},[82,3684,15],{"class":662},[82,3686,3687],{"class":188}," v-else-if",[82,3689,113],{"class":109},[82,3691,3692],{"class":99},"\"count === 0\"",[82,3694,3695],{"class":109},">0입니다.\u003C\u002F",[82,3697,15],{"class":662},[82,3699,669],{"class":109},[82,3701,3703,3705,3707,3710,3713,3715],{"class":84,"line":3702},92,[82,3704,3562],{"class":109},[82,3706,15],{"class":662},[82,3708,3709],{"class":188}," v-else",[82,3711,3712],{"class":109},">음수입니다.\u003C\u002F",[82,3714,15],{"class":662},[82,3716,669],{"class":109},[82,3718,3720,3722,3724],{"class":84,"line":3719},93,[82,3721,975],{"class":109},[82,3723,3554],{"class":662},[82,3725,669],{"class":109},[82,3727,3729],{"class":84,"line":3728},94,[82,3730,123],{"emptyLinePlaceholder":122},[82,3732,3734,3736,3738],{"class":84,"line":3733},95,[82,3735,950],{"class":109},[82,3737,3554],{"class":662},[82,3739,669],{"class":109},[82,3741,3743,3745,3747,3750,3752],{"class":84,"line":3742},96,[82,3744,3562],{"class":109},[82,3746,10],{"class":662},[82,3748,3749],{"class":109},">2. 이름 입력\u003C\u002F",[82,3751,10],{"class":662},[82,3753,669],{"class":109},[82,3755,3757],{"class":84,"line":3756},97,[82,3758,123],{"emptyLinePlaceholder":122},[82,3760,3762,3764,3766,3768,3770,3773,3776,3778,3781],{"class":84,"line":3761},98,[82,3763,3562],{"class":109},[82,3765,2189],{"class":662},[82,3767,2192],{"class":188},[82,3769,113],{"class":109},[82,3771,3772],{"class":99},"\"name\"",[82,3774,3775],{"class":188}," placeholder",[82,3777,113],{"class":109},[82,3779,3780],{"class":99},"\"이름을 입력하세요\"",[82,3782,1411],{"class":109},[82,3784,3786,3788,3790,3792,3794,3797,3800,3802],{"class":84,"line":3785},99,[82,3787,3562],{"class":109},[82,3789,15],{"class":662},[82,3791,1023],{"class":188},[82,3793,113],{"class":109},[82,3795,3796],{"class":99},"\"name.trim() === ''\"",[82,3798,3799],{"class":109},">이름을 입력하세요.\u003C\u002F",[82,3801,15],{"class":662},[82,3803,669],{"class":109},[82,3805,3807,3809,3811,3813,3816,3818],{"class":84,"line":3806},100,[82,3808,3562],{"class":109},[82,3810,15],{"class":662},[82,3812,3709],{"class":188},[82,3814,3815],{"class":109},">안녕하세요, {{ name }}님!\u003C\u002F",[82,3817,15],{"class":662},[82,3819,669],{"class":109},[82,3821,3823,3825,3827],{"class":84,"line":3822},101,[82,3824,975],{"class":109},[82,3826,3554],{"class":662},[82,3828,669],{"class":109},[82,3830,3832],{"class":84,"line":3831},102,[82,3833,123],{"emptyLinePlaceholder":122},[82,3835,3837,3839,3841],{"class":84,"line":3836},103,[82,3838,950],{"class":109},[82,3840,3554],{"class":662},[82,3842,669],{"class":109},[82,3844,3846,3848,3850,3853,3855],{"class":84,"line":3845},104,[82,3847,3562],{"class":109},[82,3849,10],{"class":662},[82,3851,3852],{"class":109},">3. 도시 목록\u003C\u002F",[82,3854,10],{"class":662},[82,3856,669],{"class":109},[82,3858,3860],{"class":84,"line":3859},105,[82,3861,123],{"emptyLinePlaceholder":122},[82,3863,3865,3867,3869,3871,3873,3876,3878,3880,3883],{"class":84,"line":3864},106,[82,3866,3562],{"class":109},[82,3868,926],{"class":662},[82,3870,929],{"class":188},[82,3872,113],{"class":109},[82,3874,3875],{"class":99},"\"city in cities\"",[82,3877,937],{"class":188},[82,3879,113],{"class":109},[82,3881,3882],{"class":99},"\"city.id\"",[82,3884,669],{"class":109},[82,3886,3888,3891,3893,3896,3898],{"class":84,"line":3887},107,[82,3889,3890],{"class":109}," \u003C",[82,3892,82],{"class":662},[82,3894,3895],{"class":109},">{{ city.name }}: {{ city.temp }}℃\u003C\u002F",[82,3897,82],{"class":662},[82,3899,669],{"class":109},[82,3901,3903,3905,3907,3909,3911,3914,3916,3918],{"class":84,"line":3902},108,[82,3904,3890],{"class":109},[82,3906,953],{"class":662},[82,3908,956],{"class":188},[82,3910,113],{"class":109},[82,3912,3913],{"class":99},"\"selectCity(city)\"",[82,3915,1547],{"class":109},[82,3917,953],{"class":662},[82,3919,669],{"class":109},[82,3921,3923,3926,3928],{"class":84,"line":3922},109,[82,3924,3925],{"class":109}," \u003C\u002F",[82,3927,926],{"class":662},[82,3929,669],{"class":109},[82,3931,3933],{"class":84,"line":3932},110,[82,3934,123],{"emptyLinePlaceholder":122},[82,3936,3938,3940,3942,3944,3946,3949],{"class":84,"line":3937},111,[82,3939,3562],{"class":109},[82,3941,15],{"class":662},[82,3943,1023],{"class":188},[82,3945,113],{"class":109},[82,3947,3948],{"class":99},"\"selectedCity\"",[82,3950,669],{"class":109},[82,3952,3954],{"class":84,"line":3953},112,[82,3955,3956],{"class":109}," 선택된 도시: {{ selectedCity.name }}\n",[82,3958,3960,3962,3964],{"class":84,"line":3959},113,[82,3961,3925],{"class":109},[82,3963,15],{"class":662},[82,3965,669],{"class":109},[82,3967,3969,3971,3973,3975,3978,3980],{"class":84,"line":3968},114,[82,3970,3562],{"class":109},[82,3972,15],{"class":662},[82,3974,3709],{"class":188},[82,3976,3977],{"class":109},">선택된 도시가 없습니다.\u003C\u002F",[82,3979,15],{"class":662},[82,3981,669],{"class":109},[82,3983,3985,3987,3989],{"class":84,"line":3984},115,[82,3986,975],{"class":109},[82,3988,3554],{"class":662},[82,3990,669],{"class":109},[82,3992,3994],{"class":84,"line":3993},116,[82,3995,123],{"emptyLinePlaceholder":122},[82,3997,3999,4001,4003],{"class":84,"line":3998},117,[82,4000,950],{"class":109},[82,4002,3554],{"class":662},[82,4004,669],{"class":109},[82,4006,4008,4010,4012,4015,4017],{"class":84,"line":4007},118,[82,4009,3562],{"class":109},[82,4011,10],{"class":662},[82,4013,4014],{"class":109},">4. 상품 목록\u003C\u002F",[82,4016,10],{"class":662},[82,4018,669],{"class":109},[82,4020,4022],{"class":84,"line":4021},119,[82,4023,123],{"emptyLinePlaceholder":122},[82,4025,4027,4029,4031,4033,4035,4037,4039,4041,4043],{"class":84,"line":4026},120,[82,4028,3562],{"class":109},[82,4030,926],{"class":662},[82,4032,929],{"class":188},[82,4034,113],{"class":109},[82,4036,934],{"class":99},[82,4038,937],{"class":188},[82,4040,113],{"class":109},[82,4042,942],{"class":99},[82,4044,669],{"class":109},[82,4046,4048],{"class":84,"line":4047},121,[82,4049,4050],{"class":109}," {{ product.name }}: {{ product.price }}원\n",[82,4052,4054,4056,4058],{"class":84,"line":4053},122,[82,4055,3925],{"class":109},[82,4057,926],{"class":662},[82,4059,669],{"class":109},[82,4061,4063],{"class":84,"line":4062},123,[82,4064,123],{"emptyLinePlaceholder":122},[82,4066,4068,4070,4072,4074,4076],{"class":84,"line":4067},124,[82,4069,3562],{"class":109},[82,4071,15],{"class":662},[82,4073,1004],{"class":109},[82,4075,15],{"class":662},[82,4077,669],{"class":109},[82,4079,4081,4083,4085],{"class":84,"line":4080},125,[82,4082,975],{"class":109},[82,4084,3554],{"class":662},[82,4086,669],{"class":109},[82,4088,4090],{"class":84,"line":4089},126,[82,4091,123],{"emptyLinePlaceholder":122},[82,4093,4095,4097,4099],{"class":84,"line":4094},127,[82,4096,950],{"class":109},[82,4098,3554],{"class":662},[82,4100,669],{"class":109},[82,4102,4104,4106,4108,4111,4113],{"class":84,"line":4103},128,[82,4105,3562],{"class":109},[82,4107,10],{"class":662},[82,4109,4110],{"class":109},">5. 할 일 목록\u003C\u002F",[82,4112,10],{"class":662},[82,4114,669],{"class":109},[82,4116,4118],{"class":84,"line":4117},129,[82,4119,123],{"emptyLinePlaceholder":122},[82,4121,4123,4125],{"class":84,"line":4122},130,[82,4124,3562],{"class":109},[82,4126,4127],{"class":662},"input\n",[82,4129,4131,4134,4136],{"class":84,"line":4130},131,[82,4132,4133],{"class":188}," v-model",[82,4135,113],{"class":109},[82,4137,4138],{"class":99},"\"newTodo\"\n",[82,4140,4142,4145,4147],{"class":84,"line":4141},132,[82,4143,4144],{"class":188}," placeholder",[82,4146,113],{"class":109},[82,4148,4149],{"class":99},"\"할 일을 입력하세요\"\n",[82,4151,4153,4156,4158],{"class":84,"line":4152},133,[82,4154,4155],{"class":188}," @keyup.enter",[82,4157,113],{"class":109},[82,4159,4160],{"class":99},"\"addTodo\"\n",[82,4162,4164],{"class":84,"line":4163},134,[82,4165,4166],{"class":109}," \u002F>\n",[82,4168,4170,4172,4174,4176,4178,4181,4184,4186],{"class":84,"line":4169},135,[82,4171,3562],{"class":109},[82,4173,953],{"class":662},[82,4175,956],{"class":188},[82,4177,113],{"class":109},[82,4179,4180],{"class":99},"\"addTodo\"",[82,4182,4183],{"class":109},">추가\u003C\u002F",[82,4185,953],{"class":662},[82,4187,669],{"class":109},[82,4189,4191],{"class":84,"line":4190},136,[82,4192,123],{"emptyLinePlaceholder":122},[82,4194,4196,4198,4200,4203,4205],{"class":84,"line":4195},137,[82,4197,3562],{"class":109},[82,4199,15],{"class":662},[82,4201,4202],{"class":109},">현재 할 일: {{ todoCount }}개\u003C\u002F",[82,4204,15],{"class":662},[82,4206,669],{"class":109},[82,4208,4210],{"class":84,"line":4209},138,[82,4211,123],{"emptyLinePlaceholder":122},[82,4213,4215,4217,4219,4221,4223,4226,4229,4231],{"class":84,"line":4214},139,[82,4216,3562],{"class":109},[82,4218,15],{"class":662},[82,4220,1023],{"class":188},[82,4222,113],{"class":109},[82,4224,4225],{"class":99},"\"todos.length === 0\"",[82,4227,4228],{"class":109},">등록된 할 일이 없습니다.\u003C\u002F",[82,4230,15],{"class":662},[82,4232,669],{"class":109},[82,4234,4236,4238,4240,4242],{"class":84,"line":4235},140,[82,4237,3562],{"class":109},[82,4239,22],{"class":662},[82,4241,3709],{"class":188},[82,4243,669],{"class":109},[82,4245,4247,4249,4251,4253,4255,4258,4260,4262,4265],{"class":84,"line":4246},141,[82,4248,3890],{"class":109},[82,4250,25],{"class":662},[82,4252,929],{"class":188},[82,4254,113],{"class":109},[82,4256,4257],{"class":99},"\"todo in todos\"",[82,4259,937],{"class":188},[82,4261,113],{"class":109},[82,4263,4264],{"class":99},"\"todo.id\"",[82,4266,669],{"class":109},[82,4268,4270],{"class":84,"line":4269},142,[82,4271,4272],{"class":109}," {{ todo.text }}\n",[82,4274,4276,4279,4281,4283,4285,4288,4291,4293],{"class":84,"line":4275},143,[82,4277,4278],{"class":109}," \u003C",[82,4280,953],{"class":662},[82,4282,956],{"class":188},[82,4284,113],{"class":109},[82,4286,4287],{"class":99},"\"deleteTodo(todo.id)\"",[82,4289,4290],{"class":109},">삭제\u003C\u002F",[82,4292,953],{"class":662},[82,4294,669],{"class":109},[82,4296,4298,4301,4303],{"class":84,"line":4297},144,[82,4299,4300],{"class":109}," \u003C\u002F",[82,4302,25],{"class":662},[82,4304,669],{"class":109},[82,4306,4308,4310,4312],{"class":84,"line":4307},145,[82,4309,3925],{"class":109},[82,4311,22],{"class":662},[82,4313,669],{"class":109},[82,4315,4317,4319,4321],{"class":84,"line":4316},146,[82,4318,975],{"class":109},[82,4320,3554],{"class":662},[82,4322,669],{"class":109},[82,4324,4326,4328,4330],{"class":84,"line":4325},147,[82,4327,985],{"class":109},[82,4329,3544],{"class":662},[82,4331,669],{"class":109},[82,4333,4335,4337,4339],{"class":84,"line":4334},148,[82,4336,898],{"class":109},[82,4338,915],{"class":662},[82,4340,669],{"class":109},[10,4342,4344],{"id":4343},"자주-발생하는-문법-오류","자주 발생하는 문법 오류",[68,4346,4348,4349,4351,4352,4354],{"id":4347},"_1-ref-값을-value-없이-변경","1. ",[37,4350,1120],{}," 값을 ",[37,4353,1260],{}," 없이 변경",[73,4356,4358],{"className":75,"code":4357,"language":77,"meta":78,"style":78},"const count = ref(0)\n\n\u002F\u002F 잘못된 사용\nconst increase = () => {\n count++\n}\n\n\u002F\u002F 올바른 사용\nconst increase = () => {\n count.value++\n}\n",[37,4359,4360,4376,4380,4385,4399,4406,4410,4414,4419,4433,4439],{"__ignoreMap":78},[82,4361,4362,4364,4366,4368,4370,4372,4374],{"class":84,"line":85},[82,4363,89],{"class":88},[82,4365,1179],{"class":92},[82,4367,96],{"class":88},[82,4369,708],{"class":188},[82,4371,600],{"class":109},[82,4373,490],{"class":92},[82,4375,464],{"class":109},[82,4377,4378],{"class":84,"line":103},[82,4379,123],{"emptyLinePlaceholder":122},[82,4381,4382],{"class":84,"line":119},[82,4383,4384],{"class":691},"\u002F\u002F 잘못된 사용\n",[82,4386,4387,4389,4391,4393,4395,4397],{"class":84,"line":126},[82,4388,89],{"class":88},[82,4390,1495],{"class":188},[82,4392,96],{"class":88},[82,4394,577],{"class":109},[82,4396,305],{"class":88},[82,4398,136],{"class":109},[82,4400,4401,4404],{"class":84,"line":139},[82,4402,4403],{"class":109}," count",[82,4405,1146],{"class":88},[82,4407,4408],{"class":84,"line":151},[82,4409,174],{"class":109},[82,4411,4412],{"class":84,"line":162},[82,4413,123],{"emptyLinePlaceholder":122},[82,4415,4416],{"class":84,"line":171},[82,4417,4418],{"class":691},"\u002F\u002F 올바른 사용\n",[82,4420,4421,4423,4425,4427,4429,4431],{"class":84,"line":177},[82,4422,89],{"class":88},[82,4424,1495],{"class":188},[82,4426,96],{"class":88},[82,4428,577],{"class":109},[82,4430,305],{"class":88},[82,4432,136],{"class":109},[82,4434,4435,4437],{"class":84,"line":182},[82,4436,1508],{"class":109},[82,4438,1146],{"class":88},[82,4440,4441],{"class":84,"line":195},[82,4442,174],{"class":109},[68,4444,4446],{"id":4445},"_2-화살표-함수-문법-오류","2. 화살표 함수 문법 오류",[73,4448,4450],{"className":75,"code":4449,"language":77,"meta":78,"style":78},"\u002F\u002F 잘못된 사용\nconst handleClick() = () => {\n alert('클릭')\n}\n\n\u002F\u002F 올바른 사용 1\nconst handleClick = () => {\n alert('클릭')\n}\n\n\u002F\u002F 올바른 사용 2\nfunction handleClick() {\n alert('클릭')\n}\n",[37,4451,4452,4456,4473,4484,4488,4492,4497,4511,4521,4525,4529,4534,4544,4554],{"__ignoreMap":78},[82,4453,4454],{"class":84,"line":85},[82,4455,4384],{"class":691},[82,4457,4458,4460,4462,4465,4467,4469,4471],{"class":84,"line":103},[82,4459,89],{"class":88},[82,4461,1597],{"class":92},[82,4463,4464],{"class":109},"() ",[82,4466,113],{"class":88},[82,4468,577],{"class":109},[82,4470,305],{"class":88},[82,4472,136],{"class":109},[82,4474,4475,4477,4479,4482],{"class":84,"line":119},[82,4476,2050],{"class":188},[82,4478,600],{"class":109},[82,4480,4481],{"class":99},"'클릭'",[82,4483,464],{"class":109},[82,4485,4486],{"class":84,"line":126},[82,4487,174],{"class":109},[82,4489,4490],{"class":84,"line":139},[82,4491,123],{"emptyLinePlaceholder":122},[82,4493,4494],{"class":84,"line":151},[82,4495,4496],{"class":691},"\u002F\u002F 올바른 사용 1\n",[82,4498,4499,4501,4503,4505,4507,4509],{"class":84,"line":162},[82,4500,89],{"class":88},[82,4502,1597],{"class":188},[82,4504,96],{"class":88},[82,4506,577],{"class":109},[82,4508,305],{"class":88},[82,4510,136],{"class":109},[82,4512,4513,4515,4517,4519],{"class":84,"line":171},[82,4514,2050],{"class":188},[82,4516,600],{"class":109},[82,4518,4481],{"class":99},[82,4520,464],{"class":109},[82,4522,4523],{"class":84,"line":177},[82,4524,174],{"class":109},[82,4526,4527],{"class":84,"line":182},[82,4528,123],{"emptyLinePlaceholder":122},[82,4530,4531],{"class":84,"line":195},[82,4532,4533],{"class":691},"\u002F\u002F 올바른 사용 2\n",[82,4535,4536,4539,4541],{"class":84,"line":205},[82,4537,4538],{"class":88},"function",[82,4540,1597],{"class":188},[82,4542,4543],{"class":109},"() {\n",[82,4545,4546,4548,4550,4552],{"class":84,"line":210},[82,4547,2050],{"class":188},[82,4549,600],{"class":109},[82,4551,4481],{"class":99},[82,4553,464],{"class":109},[82,4555,4556],{"class":84,"line":223},[82,4557,174],{"class":109},[15,4559,4560],{},"화살표 함수와 일반 함수 문법을 섞으면 안 된다.",[68,4562,4564],{"id":4563},"_3-배열-객체-사이의-쉼표-누락","3. 배열 객체 사이의 쉼표 누락",[73,4566,4568],{"className":75,"code":4567,"language":77,"meta":78,"style":78},"\u002F\u002F 잘못된 사용\nconst cities = ref([\n { id: 1, name: '서울' }\n { id: 2, name: '부산' }\n])\n\n\u002F\u002F 올바른 사용\nconst cities = ref([\n { id: 1, name: '서울' },\n { id: 2, name: '부산' }\n])\n",[37,4569,4570,4574,4586,4598,4610,4614,4618,4622,4634,4646,4658],{"__ignoreMap":78},[82,4571,4572],{"class":84,"line":85},[82,4573,4384],{"class":691},[82,4575,4576,4578,4580,4582,4584],{"class":84,"line":103},[82,4577,89],{"class":88},[82,4579,1754],{"class":92},[82,4581,96],{"class":88},[82,4583,708],{"class":188},[82,4585,711],{"class":109},[82,4587,4588,4590,4592,4594,4596],{"class":84,"line":119},[82,4589,226],{"class":109},[82,4591,145],{"class":92},[82,4593,231],{"class":109},[82,4595,2948],{"class":99},[82,4597,263],{"class":109},[82,4599,4600,4602,4604,4606,4608],{"class":84,"line":126},[82,4601,226],{"class":109},[82,4603,250],{"class":92},[82,4605,231],{"class":109},[82,4607,2986],{"class":99},[82,4609,263],{"class":109},[82,4611,4612],{"class":84,"line":139},[82,4613,753],{"class":109},[82,4615,4616],{"class":84,"line":151},[82,4617,123],{"emptyLinePlaceholder":122},[82,4619,4620],{"class":84,"line":162},[82,4621,4418],{"class":691},[82,4623,4624,4626,4628,4630,4632],{"class":84,"line":171},[82,4625,89],{"class":88},[82,4627,1754],{"class":92},[82,4629,96],{"class":88},[82,4631,708],{"class":188},[82,4633,711],{"class":109},[82,4635,4636,4638,4640,4642,4644],{"class":84,"line":177},[82,4637,226],{"class":109},[82,4639,145],{"class":92},[82,4641,231],{"class":109},[82,4643,2948],{"class":99},[82,4645,242],{"class":109},[82,4647,4648,4650,4652,4654,4656],{"class":84,"line":182},[82,4649,226],{"class":109},[82,4651,250],{"class":92},[82,4653,231],{"class":109},[82,4655,2986],{"class":99},[82,4657,263],{"class":109},[82,4659,4660],{"class":84,"line":195},[82,4661,753],{"class":109},[68,4663,1441,4665,4667],{"id":4664},"_4-v-for-변수의-범위-착각",[37,4666,1720],{}," 변수의 범위 착각",[73,4669,4671],{"className":650,"code":4670,"language":652,"meta":78,"style":78},"\u003Cdiv v-for=\"city in cities\" :key=\"city.id\">\n {{ city.name }}\n\u003C\u002Fdiv>\n\n\u003C!-- city는 이 위치에 없음 -->\n\u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n",[37,4672,4673,4707,4711,4719,4723,4728],{"__ignoreMap":78},[82,4674,4675,4677,4679,4681,4683,4685,4687,4689,4691,4693,4695,4697,4699,4701,4703,4705],{"class":84,"line":85},[82,4676,659],{"class":109},[82,4678,926],{"class":662},[82,4680,929],{"class":88},[82,4682,113],{"class":109},[82,4684,1395],{"class":99},[82,4686,1748],{"class":109},[82,4688,1751],{"class":88},[82,4690,1754],{"class":109},[82,4692,1395],{"class":99},[82,4694,529],{"class":109},[82,4696,1723],{"class":188},[82,4698,113],{"class":109},[82,4700,1395],{"class":99},[82,4702,1767],{"class":109},[82,4704,1395],{"class":99},[82,4706,669],{"class":109},[82,4708,4709],{"class":84,"line":103},[82,4710,1839],{"class":109},[82,4712,4713,4715,4717],{"class":84,"line":119},[82,4714,898],{"class":109},[82,4716,926],{"class":662},[82,4718,669],{"class":109},[82,4720,4721],{"class":84,"line":126},[82,4722,123],{"emptyLinePlaceholder":122},[82,4724,4725],{"class":84,"line":139},[82,4726,4727],{"class":691},"\u003C!-- city는 이 위치에 없음 -->\n",[82,4729,4730,4732,4734,4736,4738,4740,4742,4744,4746,4748,4750,4752],{"class":84,"line":151},[82,4731,659],{"class":109},[82,4733,953],{"class":662},[82,4735,1464],{"class":109},[82,4737,1467],{"class":188},[82,4739,113],{"class":109},[82,4741,1395],{"class":99},[82,4743,1539],{"class":188},[82,4745,1542],{"class":109},[82,4747,1395],{"class":99},[82,4749,1547],{"class":109},[82,4751,953],{"class":662},[82,4753,669],{"class":109},[15,4755,4756],{},"반복 중인 항목을 사용하려면 버튼도 반복 범위 안에 넣어야 한다.",[73,4758,4760],{"className":650,"code":4759,"language":652,"meta":78,"style":78},"\u003Cdiv v-for=\"city in cities\" :key=\"city.id\">\n {{ city.name }}\n \u003Cbutton @click=\"selectCity(city)\">선택\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[37,4761,4762,4796,4800,4804],{"__ignoreMap":78},[82,4763,4764,4766,4768,4770,4772,4774,4776,4778,4780,4782,4784,4786,4788,4790,4792,4794],{"class":84,"line":85},[82,4765,659],{"class":109},[82,4767,926],{"class":662},[82,4769,929],{"class":88},[82,4771,113],{"class":109},[82,4773,1395],{"class":99},[82,4775,1748],{"class":109},[82,4777,1751],{"class":88},[82,4779,1754],{"class":109},[82,4781,1395],{"class":99},[82,4783,529],{"class":109},[82,4785,1723],{"class":188},[82,4787,113],{"class":109},[82,4789,1395],{"class":99},[82,4791,1767],{"class":109},[82,4793,1395],{"class":99},[82,4795,669],{"class":109},[82,4797,4798],{"class":84,"line":103},[82,4799,1839],{"class":109},[82,4801,4802],{"class":84,"line":119},[82,4803,1781],{"class":109},[82,4805,4806,4808,4810],{"class":84,"line":126},[82,4807,898],{"class":109},[82,4809,926],{"class":662},[82,4811,669],{"class":109},[68,4813,1628,4815,4817,4818,4820],{"id":4814},"_5-ref-import와-value-누락",[37,4816,1120],{}," import와 ",[37,4819,1260],{}," 누락",[73,4822,4824],{"className":650,"code":4823,"language":652,"meta":78,"style":78},"\u003Cscript setup>\nimport { ref } from 'vue'\n\nconst selectedCity = ref(null)\n\nconst selectCity = (city) => {\n selectedCity.value = city\n}\n\u003C\u002Fscript>\n",[37,4825,4826,4836,4846,4850,4866,4870,4888,4896,4900],{"__ignoreMap":78},[82,4827,4828,4830,4832,4834],{"class":84,"line":85},[82,4829,659],{"class":109},[82,4831,663],{"class":662},[82,4833,666],{"class":188},[82,4835,669],{"class":109},[82,4837,4838,4840,4842,4844],{"class":84,"line":103},[82,4839,54],{"class":88},[82,4841,1164],{"class":109},[82,4843,679],{"class":88},[82,4845,682],{"class":99},[82,4847,4848],{"class":84,"line":119},[82,4849,123],{"emptyLinePlaceholder":122},[82,4851,4852,4854,4856,4858,4860,4862,4864],{"class":84,"line":126},[82,4853,89],{"class":88},[82,4855,3008],{"class":92},[82,4857,96],{"class":88},[82,4859,708],{"class":188},[82,4861,600],{"class":109},[82,4863,773],{"class":92},[82,4865,464],{"class":109},[82,4867,4868],{"class":84,"line":139},[82,4869,123],{"emptyLinePlaceholder":122},[82,4871,4872,4874,4876,4878,4880,4882,4884,4886],{"class":84,"line":151},[82,4873,89],{"class":88},[82,4875,3029],{"class":188},[82,4877,96],{"class":88},[82,4879,290],{"class":109},[82,4881,1794],{"class":293},[82,4883,302],{"class":109},[82,4885,305],{"class":88},[82,4887,136],{"class":109},[82,4889,4890,4892,4894],{"class":84,"line":162},[82,4891,3046],{"class":109},[82,4893,113],{"class":88},[82,4895,3051],{"class":109},[82,4897,4898],{"class":84,"line":171},[82,4899,174],{"class":109},[82,4901,4902,4904,4906],{"class":84,"line":177},[82,4903,898],{"class":109},[82,4905,663],{"class":662},[82,4907,669],{"class":109},[15,4909,4910,4912,4913,553],{},[37,4911,1120],{},"를 사용하면 import가 필요하고, JavaScript에서 값을 변경할 때는 ",[37,4914,1260],{},[68,4916,4918],{"id":4917},"_6-html-부모자식-구조-오류","6. HTML 부모·자식 구조 오류",[15,4920,4921],{},"목록 전체를 버튼 안에 넣기보다, 입력, 버튼, 목록을 자연스러운 형제로 구성한다.",[73,4923,4925],{"className":650,"code":4924,"language":652,"meta":78,"style":78},"\u003C!-- 잘못된 구조 -->\n\u003Cbutton @click=\"addTodo\">\n \u003Cul>\n \u003Cli>Vue 공부\u003C\u002Fli>\n \u003C\u002Ful>\n\u003C\u002Fbutton>\n\n\u003C!-- 올바른 구조 -->\n\u003Csection>\n \u003Cinput v-model=\"newTodo\" \u002F>\n \u003Cbutton @click=\"addTodo\">추가\u003C\u002Fbutton>\n\n \u003Cul>\n \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n {{ todo.text }}\n \u003Cbutton @click=\"deleteTodo(todo.id)\">삭제\u003C\u002Fbutton>\n \u003C\u002Fli>\n \u003C\u002Ful>\n\u003C\u002Fsection>\n",[37,4926,4927,4932,4953,4958,4963,4968,4976,4980,4985,4993,4998,5003,5007,5011,5016,5021,5026,5031,5035],{"__ignoreMap":78},[82,4928,4929],{"class":84,"line":85},[82,4930,4931],{"class":691},"\u003C!-- 잘못된 구조 -->\n",[82,4933,4934,4936,4938,4940,4942,4944,4946,4949,4951],{"class":84,"line":103},[82,4935,659],{"class":109},[82,4937,953],{"class":662},[82,4939,1464],{"class":109},[82,4941,1467],{"class":188},[82,4943,113],{"class":109},[82,4945,1395],{"class":99},[82,4947,4948],{"class":109},"addTodo",[82,4950,1395],{"class":99},[82,4952,669],{"class":109},[82,4954,4955],{"class":84,"line":119},[82,4956,4957],{"class":109}," \u003Cul>\n",[82,4959,4960],{"class":84,"line":126},[82,4961,4962],{"class":109}," \u003Cli>Vue 공부\u003C\u002Fli>\n",[82,4964,4965],{"class":84,"line":139},[82,4966,4967],{"class":109}," \u003C\u002Ful>\n",[82,4969,4970,4972,4974],{"class":84,"line":151},[82,4971,898],{"class":109},[82,4973,953],{"class":662},[82,4975,669],{"class":109},[82,4977,4978],{"class":84,"line":162},[82,4979,123],{"emptyLinePlaceholder":122},[82,4981,4982],{"class":84,"line":171},[82,4983,4984],{"class":691},"\u003C!-- 올바른 구조 -->\n",[82,4986,4987,4989,4991],{"class":84,"line":177},[82,4988,659],{"class":109},[82,4990,3554],{"class":662},[82,4992,669],{"class":109},[82,4994,4995],{"class":84,"line":182},[82,4996,4997],{"class":109}," \u003Cinput v-model=\"newTodo\" \u002F>\n",[82,4999,5000],{"class":84,"line":195},[82,5001,5002],{"class":109}," \u003Cbutton @click=\"addTodo\">추가\u003C\u002Fbutton>\n",[82,5004,5005],{"class":84,"line":205},[82,5006,123],{"emptyLinePlaceholder":122},[82,5008,5009],{"class":84,"line":210},[82,5010,4957],{"class":109},[82,5012,5013],{"class":84,"line":223},[82,5014,5015],{"class":109}," \u003Cli v-for=\"todo in todos\" :key=\"todo.id\">\n",[82,5017,5018],{"class":84,"line":245},[82,5019,5020],{"class":109}," {{ todo.text }}\n",[82,5022,5023],{"class":84,"line":266},[82,5024,5025],{"class":109}," \u003Cbutton @click=\"deleteTodo(todo.id)\">삭제\u003C\u002Fbutton>\n",[82,5027,5028],{"class":84,"line":848},[82,5029,5030],{"class":109}," \u003C\u002Fli>\n",[82,5032,5033],{"class":84,"line":854},[82,5034,4967],{"class":109},[82,5036,5037,5039,5041],{"class":84,"line":859},[82,5038,898],{"class":109},[82,5040,3554],{"class":662},[82,5042,669],{"class":109},[10,5044,5046],{"id":5045},"최종-점검","최종 점검",[15,5048,5049],{},"아래 질문에 답할 수 있으면 Vue 기초 흐름은 잘 잡힌 것이다.",[1059,5051,5052,5059,5068,5071,5076,5081,5086],{},[25,5053,5054,5056,5057],{},[37,5055,1120],{}," 값은 JavaScript에서 어떻게 읽고 변경하는가? → ",[37,5058,1260],{},[25,5060,5061,5062,5064,5065,5067],{},"템플릿에서 ",[37,5063,1120],{},"의 ",[37,5066,1260],{},"를 생략할 수 있는 이유는? → 자동 ref 언래핑",[25,5069,5070],{},"이벤트가 함수를 실행하고 함수가 상태를 변경하는 흐름을 설명할 수 있는가?",[25,5072,5073,5075],{},[37,5074,1720],{},"로 만든 변수는 어느 범위에서 사용할 수 있는가? → 반복 요소와 자식 요소 안",[25,5077,5078,5080],{},[37,5079,1948],{},"와 일반 함수의 차이는 무엇인가? → 계산된 값과 사용자 행동 처리",[25,5082,5083,5085],{},[37,5084,2171],{},"은 어떤 요소에 사용하는가? → 값을 입력하거나 선택하는 요소",[25,5087,5088,5089,40,5091],{},"부모에서 자식으로, 자식에서 부모로 데이터를 전달할 때 무엇을 사용하는가? → ",[37,5090,2373],{},[37,5092,2377],{},[73,5094,5097],{"className":5095,"code":5096,"language":2352,"meta":78},[2350],"ref 선언\n ↓\n템플릿과 v-model, 이벤트 연결\n ↓\n함수가 상태 변경\n ↓\ncomputed가 필요한 값을 계산\n ↓\nVue가 화면을 갱신\n",[37,5098,5096],{"__ignoreMap":78},[15,5100,5101],{},"여기까지 이해했으면 이제부터는 문법 자체보다, 어떤 상태를 만들고 어떤 흐름으로 화면에 연결할지 생각하면 될 듯하다.",[15,5103,5104],{},[2152,5105,5106],{},"잘 이해했지?",[10,5108,5110],{"id":5109},"참고-자료","참고 자료",[22,5112,5113,5121,5128],{},[25,5114,5115],{},[294,5116,5120],{"href":5117,"rel":5118},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Ftemplate-syntax.html",[5119],"nofollow","Vue 공식 문서: Template Syntax",[25,5122,5123],{},[294,5124,5127],{"href":5125,"rel":5126},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Freactivity-fundamentals.html",[5119],"Vue 공식 문서: Reactivity Fundamentals",[25,5129,5130],{},[294,5131,5134],{"href":5132,"rel":5133},"https:\u002F\u002Fvuejs.org\u002Fguide\u002Fessentials\u002Flist.html",[5119],"Vue 공식 문서: List Rendering",[5136,5137],"hr",{},[5139,5140,5141],"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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .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}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":78,"searchDepth":103,"depth":103,"links":5143},[5144,5150,5151,5171,5172,5183,5184],{"id":12,"depth":103,"text":13,"children":5145},[5146,5147,5148,5149],{"id":70,"depth":119,"text":71},{"id":272,"depth":119,"text":273},{"id":374,"depth":119,"text":375},{"id":556,"depth":119,"text":557},{"id":643,"depth":103,"text":644},{"id":1112,"depth":103,"text":1113,"children":5152},[5153,5155,5157,5159,5161,5163,5165,5167,5169,5170],{"id":1116,"depth":119,"text":5154},"1. 일반 변수와 ref",{"id":1256,"depth":119,"text":5156},"2. JavaScript에서는 .value, 템플릿에서는 생략",{"id":1352,"depth":119,"text":5158},"3. v-bind:src와 :src",{"id":1440,"depth":119,"text":5160},"4. @click=\"increase\"와 @click=\"increase()\"",{"id":1627,"depth":119,"text":5162},"5. v-if와 v-show",{"id":1716,"depth":119,"text":5164},"6. v-for와 key",{"id":1944,"depth":119,"text":5166},"7. computed와 일반 함수",{"id":2167,"depth":119,"text":5168},"8. v-model은 입력 요소에 사용",{"id":2357,"depth":119,"text":2358},{"id":2593,"depth":119,"text":2594},{"id":2735,"depth":103,"text":2736},{"id":4343,"depth":103,"text":4344,"children":5173},[5174,5176,5177,5178,5180,5182],{"id":4347,"depth":119,"text":5175},"1. ref 값을 .value 없이 변경",{"id":4445,"depth":119,"text":4446},{"id":4563,"depth":119,"text":4564},{"id":4664,"depth":119,"text":5179},"4. v-for 변수의 범위 착각",{"id":4814,"depth":119,"text":5181},"5. ref import와 .value 누락",{"id":4917,"depth":119,"text":4918},{"id":5045,"depth":103,"text":5046},{"id":5109,"depth":103,"text":5110},[5186,5187],"Frontend","Vue","2026-07-31 09:00:00 +0900","Vue 학습에 필요한 JavaScript 문법과 ref, 디렉티브, 이벤트, 컴포넌트 통신의 기초를 알아보자.","md",null,[5193,5194,5195],"객체와 배열, 함수, 모듈, 비동기 문법은 Vue 코드를 읽는 기반.","템플릿은 디렉티브와 이벤트를 통해 반응형 상태에 연결.","상태 변경은 이벤트에서 시작해 계산값과 화면 갱신으로 이어짐.","\u002Ffrontend\u002Fvue\u002F2026\u002F07\u002F31\u002Fvue_intro2\u002F",{"layout":5198,"excerpt_separator":5199,"excerpt":5200},"post","\u003C!--more-->",{"type":7,"value":5201},[5202,5204,5206,5208],[10,5203,13],{"id":12},[15,5205,17],{},[15,5207,20],{},[22,5209,5210,5212,5214,5216,5226,5232],{},[25,5211,27],{},[25,5213,30],{},[25,5215,33],{},[25,5217,5218,40,5220,40,5222,40,5224],{},[37,5219,39],{},[37,5221,43],{},[37,5223,46],{},[37,5225,49],{},[25,5227,5228,55,5230],{},[37,5229,54],{},[37,5231,58],{},[25,5233,5234,55,5236],{},[37,5235,63],{},[37,5237,66],{},"\u002Fposts\u002Ffrontend\u002Fvue\u002F2026-07-31-vue_intro2",{"title":5,"description":5189},"posts\u002FFrontend\u002FVue\u002F2026-07-31-vue_intro2","JavaScript 기초부터 Vue 템플릿과 반응형 상태를 연결하는 방법까지 알아본다.",[5186,5243,5244,5245,5246],"Vue.js","JavaScript","Template","Directive","pb842FfxkPwOB2pwY_G5azRXL2bvVpMWE1rZvQIkpdY",1788744789711]