From c0fb80a8d8d391eb3ace3af8e8cfef22129bf48e Mon Sep 17 00:00:00 2001 From: joshua1988 Date: Sat, 16 Dec 2023 08:51:13 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20joshua19?= =?UTF-8?q?88/vue-camp@4a881b85b951cfa816b777c28df56fdeaf32b629=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 404.html | 6 +- advanced/code-splitting.html | 8 +- advanced/folder-structure.html | 12 +- advanced/navigation-guard.html | 8 +- advanced/transition.html | 8 +- .../js/{100.69578271.js => 100.c7e88112.js} | 2 +- .../js/{101.5e7db157.js => 101.0c567d03.js} | 2 +- .../js/{103.5d2f323b.js => 103.a6c769cb.js} | 2 +- .../js/{104.c441390a.js => 104.46c807ed.js} | 2 +- .../js/{105.83d0ab8e.js => 105.d9ee0cc4.js} | 2 +- .../js/{106.31aadaca.js => 106.34993fc7.js} | 2 +- .../js/{107.a92d76ab.js => 107.1687675c.js} | 2 +- .../js/{108.0d0667a0.js => 108.84c5043f.js} | 2 +- .../js/{109.3176191f.js => 109.7d7a7fee.js} | 2 +- .../js/{110.1e015302.js => 110.41fc92e6.js} | 2 +- assets/js/111.5946729b.js | 1 + assets/js/111.7f207cc2.js | 1 - assets/js/112.a40a6922.js | 1 + .../js/{112.dce105f6.js => 113.52cb1d80.js} | 2 +- .../js/{113.edc9dfa8.js => 114.b58e33ae.js} | 2 +- .../js/{114.48e70423.js => 115.460a6d29.js} | 2 +- .../js/{115.91265fc4.js => 116.166298b6.js} | 2 +- .../js/{116.3e4ea202.js => 117.9b6e6556.js} | 2 +- .../js/{117.f3a1402f.js => 118.dd2bbeb4.js} | 2 +- .../js/{118.a483ded4.js => 119.9e1fa163.js} | 2 +- .../js/{119.e7ac5b48.js => 120.a21a4ee0.js} | 2 +- .../js/{120.9ca810c0.js => 121.7b9ec2c6.js} | 2 +- .../js/{121.bbbc45fd.js => 122.46fe4d73.js} | 2 +- .../js/{122.d85aa2c2.js => 123.639f011d.js} | 2 +- .../js/{123.5299a8e1.js => 124.332ca2e5.js} | 2 +- .../js/{124.88575b35.js => 125.316cce7f.js} | 2 +- .../js/{125.c75b2fc2.js => 126.05d26361.js} | 2 +- .../js/{126.1e65ab24.js => 127.399bacb2.js} | 2 +- .../js/{127.660fc323.js => 128.ff7f50c6.js} | 2 +- .../js/{128.66906099.js => 129.b2650f6b.js} | 2 +- .../js/{129.da26e144.js => 130.7883317b.js} | 2 +- .../js/{130.02af490e.js => 131.fe2bdf42.js} | 2 +- .../js/{131.5edf54e1.js => 132.eb493660.js} | 2 +- .../js/{132.90554013.js => 133.4d5faee4.js} | 2 +- .../js/{133.af40b3db.js => 134.a71c1cda.js} | 2 +- .../js/{134.9ec87292.js => 135.5f2ac542.js} | 2 +- .../js/{135.c8bde2c4.js => 136.7170417c.js} | 2 +- .../js/{136.b184e284.js => 137.0915b056.js} | 2 +- .../js/{137.a06000a6.js => 138.dcc79470.js} | 2 +- .../js/{138.b615f794.js => 139.b1854740.js} | 2 +- .../js/{139.6bdf4e71.js => 140.b0a9717c.js} | 2 +- .../js/{140.8659badb.js => 141.4abd0510.js} | 2 +- .../js/{141.3118490c.js => 142.276e9d31.js} | 2 +- .../js/{142.8863199e.js => 143.58a12a09.js} | 2 +- .../js/{143.c31a05ac.js => 144.bb781e35.js} | 2 +- .../js/{144.f3f95b8e.js => 145.9e847167.js} | 2 +- .../js/{145.1175a406.js => 146.32114899.js} | 2 +- .../js/{146.b1036541.js => 147.10a69eb5.js} | 2 +- .../js/{147.a5757438.js => 148.f85e9deb.js} | 2 +- .../js/{148.ffe7ba1e.js => 149.4e860c1e.js} | 2 +- assets/js/{15.a8539f52.js => 15.9fe6f43b.js} | 2 +- .../js/{149.9ff2dbfc.js => 150.46ed9999.js} | 2 +- .../js/{150.4bf22828.js => 151.03fb014b.js} | 2 +- .../js/{151.263fc747.js => 152.108dcc72.js} | 2 +- .../js/{152.38b9ecbe.js => 153.24d439d0.js} | 2 +- .../js/{153.8fb96f5c.js => 154.bfec3b44.js} | 2 +- assets/js/{19.5bbe449b.js => 19.9bf7d508.js} | 2 +- assets/js/{21.718a59c2.js => 21.beb0220b.js} | 2 +- assets/js/{22.ae0e793d.js => 22.c46afeff.js} | 2 +- assets/js/{23.c1ab7cf8.js => 23.62158fac.js} | 2 +- assets/js/{28.4e87b8e0.js => 28.8772bc3e.js} | 2 +- assets/js/{29.087f783e.js => 29.50ab0a26.js} | 2 +- assets/js/{30.932a6072.js => 30.995cdf44.js} | 2 +- assets/js/{31.9c69518f.js => 31.f6e515b6.js} | 2 +- assets/js/{32.8ae14b84.js => 32.9e8e8419.js} | 2 +- assets/js/{34.972e9179.js => 34.c059872c.js} | 2 +- assets/js/{36.c7b9f519.js => 36.d099754f.js} | 2 +- assets/js/{38.78d175f7.js => 38.ef320cf6.js} | 2 +- assets/js/{39.31dc783f.js => 39.e06bb285.js} | 2 +- assets/js/{40.84b9fae8.js => 40.0f840ec1.js} | 2 +- assets/js/{41.5787636b.js => 41.2c549979.js} | 2 +- assets/js/{42.c64e033e.js => 42.fc04ce81.js} | 2 +- assets/js/{43.2cf569cb.js => 43.35176ec8.js} | 2 +- assets/js/{44.2f118623.js => 44.3e1a242f.js} | 2 +- assets/js/{45.d90d9984.js => 45.c9b2838a.js} | 2 +- assets/js/{46.7e6cb028.js => 46.98eced2f.js} | 2 +- assets/js/{47.e1f5f6c7.js => 47.e373fd95.js} | 2 +- assets/js/{48.24031e63.js => 48.9592e646.js} | 2 +- assets/js/{50.0cdc960c.js => 50.6baab332.js} | 2 +- assets/js/{51.2fe7aad0.js => 51.c51a7033.js} | 2 +- assets/js/{52.bd76059c.js => 52.e65fe818.js} | 2 +- assets/js/{53.21bba709.js => 53.2d410f5c.js} | 2 +- assets/js/{54.d6fcf87f.js => 54.08009ce2.js} | 2 +- assets/js/{55.f5442027.js => 55.5f1d1bd9.js} | 2 +- assets/js/{56.2c1240e7.js => 56.fc13bf8b.js} | 2 +- assets/js/{58.61a049ba.js => 58.7732e3ce.js} | 2 +- assets/js/{59.f8615a67.js => 59.a29c842f.js} | 2 +- assets/js/{60.32a5b52c.js => 60.b4cf278f.js} | 2 +- assets/js/{61.f84de811.js => 61.2ea40373.js} | 2 +- assets/js/{62.8b646aa4.js => 62.2db2fd80.js} | 2 +- assets/js/{63.9da5ff19.js => 63.f5c254f0.js} | 2 +- assets/js/{66.65ac30c0.js => 66.f131c1bf.js} | 2 +- assets/js/{67.245a0899.js => 67.16e0b5d2.js} | 2 +- assets/js/{68.efe1c122.js => 68.d8fd4afb.js} | 2 +- assets/js/{71.f9a3c22d.js => 71.8950123a.js} | 2 +- assets/js/{74.5e719040.js => 74.aa1e7923.js} | 2 +- assets/js/{75.b23455db.js => 75.2fd5127d.js} | 2 +- assets/js/{76.7f81a59f.js => 76.12bd7474.js} | 2 +- assets/js/{79.90052d5e.js => 79.22285445.js} | 2 +- assets/js/{80.5c413616.js => 80.7d7cf4dd.js} | 2 +- assets/js/{81.f94396dc.js => 81.b2d01e9c.js} | 2 +- assets/js/{88.de9910b5.js => 88.b531a870.js} | 2 +- assets/js/{89.c1ab9526.js => 89.5796fe7c.js} | 2 +- assets/js/{90.25013bb0.js => 90.b5c57567.js} | 2 +- assets/js/{91.d9871fb7.js => 91.3e7131f7.js} | 2 +- assets/js/{92.08768c04.js => 92.c8f2ef5e.js} | 2 +- assets/js/{94.cc7bcfa5.js => 94.27e9f757.js} | 2 +- assets/js/{95.b66835b8.js => 95.3806ec3e.js} | 2 +- assets/js/{96.5adbd877.js => 96.55f3d21f.js} | 2 +- assets/js/{97.12ddcb08.js => 97.ead84f4e.js} | 2 +- assets/js/{99.527dd0d1.js => 99.bc4a514c.js} | 2 +- .../js/{app.b07532c0.js => app.e782f374.js} | 4 +- composition/computed.html | 8 +- composition/event-emit.html | 8 +- composition/lifecycle.html | 8 +- composition/props.html | 8 +- composition/script-setup.html | 8 +- composition/watch.html | 8 +- d3/d3.html | 8 +- d3/index.html | 8 +- d3/tutorial.html | 8 +- d3/vue-with-d3.html | 8 +- deploy/cli3-rules.html | 8 +- deploy/env-setup.html | 8 +- deploy/intro.html | 6 +- design/pattern1.html | 8 +- design/pattern2.html | 8 +- design/pattern3.html | 8 +- design/pattern4.html | 6 +- design/pattern5.html | 8 +- es6+/async-await.html | 8 +- es6+/class.html | 6 +- es6+/const-let.html | 8 +- es6+/default-parameter.html | 8 +- es6+/destructuring.html | 8 +- es6+/enhanced-object-literals.html | 8 +- es6+/fat-arrow.html | 8 +- es6+/modules.html | 8 +- es6+/nullish-coalescing-operator.html | 8 +- es6+/optional-chaning.html | 8 +- es6+/promise.html | 8 +- es6+/spread-operator.html | 8 +- es6+/template-literal.html | 8 +- format/official.html | 8 +- format/prettier.html | 8 +- front-dev.html | 6 +- index.html | 6 +- js/array.html | 8 +- js/closure.html | 8 +- js/collection.html | 8 +- js/condition.html | 8 +- js/function.html | 8 +- js/loop.html | 8 +- js/number.html | 6 +- js/object.html | 8 +- js/operator.html | 8 +- js/prototype.html | 8 +- js/scope.html | 8 +- js/string.html | 8 +- js/this.html | 8 +- js/variable.html | 8 +- legacy/chart.html | 6 +- legacy/datepicker.html | 6 +- legacy/form.html | 8 +- legacy/jquery-to-vue.html | 8 +- nuxt/automatic-routing.html | 8 +- nuxt/data-fetching.html | 8 +- nuxt/deployment.html | 8 +- nuxt/folder-structure.html | 6 +- nuxt/intro.html | 8 +- nuxt/layouts.html | 8 +- nuxt/lifecycle.html | 6 +- nuxt/meta-tags.html | 8 +- nuxt/middleware.html | 8 +- nuxt/nuxt-axios.html | 8 +- nuxt/nuxt-config.html | 6 +- nuxt/ssr.html | 8 +- nuxt/store.html | 8 +- nuxt/universal-mode.html | 8 +- package-manager/npm-vs-yarn.html | 8 +- pinia/intro.html | 8 +- pinia/state.html | 68 ++ pinia/store.html | 30 +- pwa/cli-pwa-plugin.html | 8 +- pwa/workbox-caching.html | 8 +- pwa/workbox.html | 8 +- reuse/composition.html | 8 +- reuse/mixins-vs-hoc.html | 8 +- reuse/mixins.html | 8 +- reuse/plugins.html | 8 +- reuse/scoped-slot.html | 8 +- reuse/slots.html | 8 +- reuse/v-slot.html | 8 +- service-worker.js | 708 +++++++++--------- syntax/computed.html | 8 +- syntax/filters.html | 8 +- syntax/form.html | 8 +- syntax/methods.html | 8 +- syntax/watch.html | 6 +- testing/api.html | 8 +- testing/component-tutorial-1.html | 8 +- testing/coverage.html | 6 +- testing/getting-started.html | 8 +- testing/jest-api.html | 8 +- testing/jest-testing.html | 8 +- testing/overview.html | 8 +- testing/snapshots.html | 8 +- testing/tutorial-todo-app.html | 8 +- testing/vue-test-util.html | 8 +- textbook.html | 8 +- ts/getting-started.html | 8 +- ts/intro.html | 8 +- ts/pdecorator.html | 8 +- ts/refs.html | 8 +- ts/vuex.html | 8 +- ts/with-vue.html | 8 +- vite/intro.html | 8 +- vue/axios.html | 8 +- vue/cli.html | 8 +- vue/components-communication.html | 6 +- vue/components.html | 8 +- vue/event-emit.html | 8 +- vue/instance.html | 8 +- vue/life-cycle.html | 8 +- vue/props.html | 8 +- vue/router.html | 8 +- vue/sfc.html | 8 +- vue/template.html | 8 +- vue3.html | 6 +- vuepress/learning-note.html | 8 +- vuex/actions.html | 8 +- vuex/concept.html | 8 +- vuex/getters.html | 8 +- vuex/helper.html | 8 +- vuex/modules.html | 8 +- vuex/mutations.html | 8 +- vuex/state-vs-data.html | 8 +- vuex/state.html | 8 +- webpack/project-setup.html | 8 +- 244 files changed, 1047 insertions(+), 986 deletions(-) rename assets/js/{100.69578271.js => 100.c7e88112.js} (99%) rename assets/js/{101.5e7db157.js => 101.0c567d03.js} (99%) rename assets/js/{103.5d2f323b.js => 103.a6c769cb.js} (98%) rename assets/js/{104.c441390a.js => 104.46c807ed.js} (99%) rename assets/js/{105.83d0ab8e.js => 105.d9ee0cc4.js} (99%) rename assets/js/{106.31aadaca.js => 106.34993fc7.js} (92%) rename assets/js/{107.a92d76ab.js => 107.1687675c.js} (99%) rename assets/js/{108.0d0667a0.js => 108.84c5043f.js} (86%) rename assets/js/{109.3176191f.js => 109.7d7a7fee.js} (99%) rename assets/js/{110.1e015302.js => 110.41fc92e6.js} (99%) create mode 100644 assets/js/111.5946729b.js delete mode 100644 assets/js/111.7f207cc2.js create mode 100644 assets/js/112.a40a6922.js rename assets/js/{112.dce105f6.js => 113.52cb1d80.js} (98%) rename assets/js/{113.edc9dfa8.js => 114.b58e33ae.js} (99%) rename assets/js/{114.48e70423.js => 115.460a6d29.js} (98%) rename assets/js/{115.91265fc4.js => 116.166298b6.js} (99%) rename assets/js/{116.3e4ea202.js => 117.9b6e6556.js} (98%) rename assets/js/{117.f3a1402f.js => 118.dd2bbeb4.js} (99%) rename assets/js/{118.a483ded4.js => 119.9e1fa163.js} (99%) rename assets/js/{119.e7ac5b48.js => 120.a21a4ee0.js} (99%) rename assets/js/{120.9ca810c0.js => 121.7b9ec2c6.js} (99%) rename assets/js/{121.bbbc45fd.js => 122.46fe4d73.js} (99%) rename assets/js/{122.d85aa2c2.js => 123.639f011d.js} (99%) rename assets/js/{123.5299a8e1.js => 124.332ca2e5.js} (99%) rename assets/js/{124.88575b35.js => 125.316cce7f.js} (99%) rename assets/js/{125.c75b2fc2.js => 126.05d26361.js} (99%) rename assets/js/{126.1e65ab24.js => 127.399bacb2.js} (99%) rename assets/js/{127.660fc323.js => 128.ff7f50c6.js} (99%) rename assets/js/{128.66906099.js => 129.b2650f6b.js} (95%) rename assets/js/{129.da26e144.js => 130.7883317b.js} (99%) rename assets/js/{130.02af490e.js => 131.fe2bdf42.js} (98%) rename assets/js/{131.5edf54e1.js => 132.eb493660.js} (99%) rename assets/js/{132.90554013.js => 133.4d5faee4.js} (98%) rename assets/js/{133.af40b3db.js => 134.a71c1cda.js} (98%) rename assets/js/{134.9ec87292.js => 135.5f2ac542.js} (96%) rename assets/js/{135.c8bde2c4.js => 136.7170417c.js} (99%) rename assets/js/{136.b184e284.js => 137.0915b056.js} (99%) rename assets/js/{137.a06000a6.js => 138.dcc79470.js} (99%) rename assets/js/{138.b615f794.js => 139.b1854740.js} (98%) rename assets/js/{139.6bdf4e71.js => 140.b0a9717c.js} (99%) rename assets/js/{140.8659badb.js => 141.4abd0510.js} (99%) rename assets/js/{141.3118490c.js => 142.276e9d31.js} (99%) rename assets/js/{142.8863199e.js => 143.58a12a09.js} (98%) rename assets/js/{143.c31a05ac.js => 144.bb781e35.js} (99%) rename assets/js/{144.f3f95b8e.js => 145.9e847167.js} (99%) rename assets/js/{145.1175a406.js => 146.32114899.js} (99%) rename assets/js/{146.b1036541.js => 147.10a69eb5.js} (99%) rename assets/js/{147.a5757438.js => 148.f85e9deb.js} (98%) rename assets/js/{148.ffe7ba1e.js => 149.4e860c1e.js} (99%) rename assets/js/{15.a8539f52.js => 15.9fe6f43b.js} (99%) rename assets/js/{149.9ff2dbfc.js => 150.46ed9999.js} (99%) rename assets/js/{150.4bf22828.js => 151.03fb014b.js} (99%) rename assets/js/{151.263fc747.js => 152.108dcc72.js} (99%) rename assets/js/{152.38b9ecbe.js => 153.24d439d0.js} (98%) rename assets/js/{153.8fb96f5c.js => 154.bfec3b44.js} (96%) rename assets/js/{19.5bbe449b.js => 19.9bf7d508.js} (97%) rename assets/js/{21.718a59c2.js => 21.beb0220b.js} (96%) rename assets/js/{22.ae0e793d.js => 22.c46afeff.js} (99%) rename assets/js/{23.c1ab7cf8.js => 23.62158fac.js} (97%) rename assets/js/{28.4e87b8e0.js => 28.8772bc3e.js} (91%) rename assets/js/{29.087f783e.js => 29.50ab0a26.js} (99%) rename assets/js/{30.932a6072.js => 30.995cdf44.js} (99%) rename assets/js/{31.9c69518f.js => 31.f6e515b6.js} (99%) rename assets/js/{32.8ae14b84.js => 32.9e8e8419.js} (99%) rename assets/js/{34.972e9179.js => 34.c059872c.js} (99%) rename assets/js/{36.c7b9f519.js => 36.d099754f.js} (99%) rename assets/js/{38.78d175f7.js => 38.ef320cf6.js} (99%) rename assets/js/{39.31dc783f.js => 39.e06bb285.js} (99%) rename assets/js/{40.84b9fae8.js => 40.0f840ec1.js} (99%) rename assets/js/{41.5787636b.js => 41.2c549979.js} (97%) rename assets/js/{42.c64e033e.js => 42.fc04ce81.js} (98%) rename assets/js/{43.2cf569cb.js => 43.35176ec8.js} (98%) rename assets/js/{44.2f118623.js => 44.3e1a242f.js} (97%) rename assets/js/{45.d90d9984.js => 45.c9b2838a.js} (98%) rename assets/js/{46.7e6cb028.js => 46.98eced2f.js} (99%) rename assets/js/{47.e1f5f6c7.js => 47.e373fd95.js} (99%) rename assets/js/{48.24031e63.js => 48.9592e646.js} (99%) rename assets/js/{50.0cdc960c.js => 50.6baab332.js} (99%) rename assets/js/{51.2fe7aad0.js => 51.c51a7033.js} (99%) rename assets/js/{52.bd76059c.js => 52.e65fe818.js} (98%) rename assets/js/{53.21bba709.js => 53.2d410f5c.js} (86%) rename assets/js/{54.d6fcf87f.js => 54.08009ce2.js} (99%) rename assets/js/{55.f5442027.js => 55.5f1d1bd9.js} (98%) rename assets/js/{56.2c1240e7.js => 56.fc13bf8b.js} (97%) rename assets/js/{58.61a049ba.js => 58.7732e3ce.js} (99%) rename assets/js/{59.f8615a67.js => 59.a29c842f.js} (98%) rename assets/js/{60.32a5b52c.js => 60.b4cf278f.js} (99%) rename assets/js/{61.f84de811.js => 61.2ea40373.js} (99%) rename assets/js/{62.8b646aa4.js => 62.2db2fd80.js} (99%) rename assets/js/{63.9da5ff19.js => 63.f5c254f0.js} (99%) rename assets/js/{66.65ac30c0.js => 66.f131c1bf.js} (85%) rename assets/js/{67.245a0899.js => 67.16e0b5d2.js} (99%) rename assets/js/{68.efe1c122.js => 68.d8fd4afb.js} (99%) rename assets/js/{71.f9a3c22d.js => 71.8950123a.js} (99%) rename assets/js/{74.5e719040.js => 74.aa1e7923.js} (86%) rename assets/js/{75.b23455db.js => 75.2fd5127d.js} (99%) rename assets/js/{76.7f81a59f.js => 76.12bd7474.js} (99%) rename assets/js/{79.90052d5e.js => 79.22285445.js} (99%) rename assets/js/{80.5c413616.js => 80.7d7cf4dd.js} (99%) rename assets/js/{81.f94396dc.js => 81.b2d01e9c.js} (99%) rename assets/js/{88.de9910b5.js => 88.b531a870.js} (99%) rename assets/js/{89.c1ab9526.js => 89.5796fe7c.js} (99%) rename assets/js/{90.25013bb0.js => 90.b5c57567.js} (99%) rename assets/js/{91.d9871fb7.js => 91.3e7131f7.js} (99%) rename assets/js/{92.08768c04.js => 92.c8f2ef5e.js} (99%) rename assets/js/{94.cc7bcfa5.js => 94.27e9f757.js} (99%) rename assets/js/{95.b66835b8.js => 95.3806ec3e.js} (85%) rename assets/js/{96.5adbd877.js => 96.55f3d21f.js} (98%) rename assets/js/{97.12ddcb08.js => 97.ead84f4e.js} (99%) rename assets/js/{99.527dd0d1.js => 99.bc4a514c.js} (98%) rename assets/js/{app.b07532c0.js => app.e782f374.js} (57%) create mode 100644 pinia/state.html diff --git a/404.html b/404.html index 42e2aeba1..b533ccf72 100644 --- a/404.html +++ b/404.html @@ -16,13 +16,13 @@ - + -

404

How did we get here?
+ - + diff --git a/advanced/code-splitting.html b/advanced/code-splitting.html index 24242f2ff..3632c52c1 100644 --- a/advanced/code-splitting.html +++ b/advanced/code-splitting.html @@ -16,7 +16,7 @@ - + @@ -44,7 +44,7 @@ ๐Ÿ“† ์ง์ ‘ ๋ฌผ์–ด๋ณด๊ธฐ (opens new window)
๐Ÿ’ป ๊นƒํ—™ - (opens new window)

# ์ฝ”๋“œ ๋ถ„ํ• 

์ฝ”๋“œ ๋ถ„ํ• (Code Splitting)์€ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(Single Page Application)์€ ์ดˆ๊ธฐ ์‹คํ–‰์‹œ์— ํ•„์š”ํ•œ ์›น ์ž์›์„ ๋ชจ๋‘ ๋‹ค์šด ๋ฐ›๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ถ„ํ• ์„ ํ™œ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์ดˆ๊ธฐ ๋กœ๋”ฉ์‹œ์— ๋ชจ๋“  ์›น ์ž์›์„ ๋‹ค์šด๋ฐ›์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ์‹œ์ ์— ๋‹ค์šด ๋ฐ›์•„ ์„ฑ๋Šฅ ์ƒ์˜ ์ด์ ์ด ์ƒ๊น๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๋ทฐ์—์„œ ์ฝ”๋“œ ๋ถ„ํ• ์ด ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” ๋ทฐ์˜ ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ ๋กœ๋”ฉ (opens new window)๊ณผ ์›นํŒฉ์˜ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ๊ธฐ์ˆ  (opens new window) ๋•ํƒ์ž…๋‹ˆ๋‹ค.

# ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์กฐ๊ฑด

๋‹ค๋งŒ ์ง€์—ฐ๋œ ๋กœ๋”ฉ(Lazy Loading) ๋ฐฉ๋ฒ•์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ฐ–๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. ์‹ฑ๊ธ€ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ ์ฒด๊ณ„ (.vue)
  2. ์›นํŒฉ - ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ (2.x ์ด์ƒ)
  3. ๋ฐ”๋ฒจ Syntax-dynamic-import ํ”Œ๋Ÿฌ๊ทธ์ธ (opens new window)

# ๋ฐ”๋ฒจ Syntax-dynamic-import ์„ค์น˜ ๋ฐฉ๋ฒ•

๋ทฐ CLI๋กœ ์ƒ์„ฑํ•œ ๊ฒฝ์šฐ์—๋Š” ์ด๋ฏธ 1๋ฒˆ๊ณผ 2๋ฒˆ์„ ๋งŒ์กฑํ•˜๊ณ  ๊ณ„์‹คํ…Œ์ง€๋งŒ 3๋ฒˆ์˜ ๊ฒฝ์šฐ์—๋Š” ๋ณ„๋„์˜ ์„ค์น˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. + (opens new window)

# ์ฝ”๋“œ ๋ถ„ํ• 

์ฝ”๋“œ ๋ถ„ํ• (Code Splitting)์€ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ค๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(Single Page Application)์€ ์ดˆ๊ธฐ ์‹คํ–‰์‹œ์— ํ•„์š”ํ•œ ์›น ์ž์›์„ ๋ชจ๋‘ ๋‹ค์šด ๋ฐ›๋Š” ํŠน์ง•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ถ„ํ• ์„ ํ™œ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ์ดˆ๊ธฐ ๋กœ๋”ฉ์‹œ์— ๋ชจ๋“  ์›น ์ž์›์„ ๋‹ค์šด๋ฐ›์ง€ ์•Š๊ณ  ํ•„์š”ํ•œ ์‹œ์ ์— ๋‹ค์šด ๋ฐ›์•„ ์„ฑ๋Šฅ ์ƒ์˜ ์ด์ ์ด ์ƒ๊น๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ๋ทฐ์—์„œ ์ฝ”๋“œ ๋ถ„ํ• ์ด ๊ฐ€๋Šฅํ•œ ์ด์œ ๋Š” ๋ทฐ์˜ ๋น„๋™๊ธฐ ์ปดํฌ๋„ŒํŠธ ๋กœ๋”ฉ (opens new window)๊ณผ ์›นํŒฉ์˜ ์ฝ”๋“œ ์Šคํ”Œ๋ฆฌํŒ… ๊ธฐ์ˆ  (opens new window) ๋•ํƒ์ž…๋‹ˆ๋‹ค.

# ๊ฐœ๋ฐœ ํ™˜๊ฒฝ ์กฐ๊ฑด

๋‹ค๋งŒ ์ง€์—ฐ๋œ ๋กœ๋”ฉ(Lazy Loading) ๋ฐฉ๋ฒ•์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ฐ–๊ณ  ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. ์‹ฑ๊ธ€ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ ์ฒด๊ณ„ (.vue)
  2. ์›นํŒฉ - ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ (2.x ์ด์ƒ)
  3. ๋ฐ”๋ฒจ Syntax-dynamic-import ํ”Œ๋Ÿฌ๊ทธ์ธ (opens new window)

# ๋ฐ”๋ฒจ Syntax-dynamic-import ์„ค์น˜ ๋ฐฉ๋ฒ•

๋ทฐ CLI๋กœ ์ƒ์„ฑํ•œ ๊ฒฝ์šฐ์—๋Š” ์ด๋ฏธ 1๋ฒˆ๊ณผ 2๋ฒˆ์„ ๋งŒ์กฑํ•˜๊ณ  ๊ณ„์‹คํ…Œ์ง€๋งŒ 3๋ฒˆ์˜ ๊ฒฝ์šฐ์—๋Š” ๋ณ„๋„์˜ ์„ค์น˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ”๋ฒจ Syntax-dynamic-import ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜๋Š” ์•„๋ž˜์˜ ์ ˆ์ฐจ๋ฅผ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.

  1. syntax-dynamic-import ํ”Œ๋Ÿฌ๊ทธ์ธ (opens new window) ์„ค์น˜
npm install --save-dev babel-plugin-syntax-dynamic-import
  1. .babelrc ํŒŒ์ผ์— ์•„๋ž˜์™€ ๊ฐ™์ด ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์ • ์ถ”๊ฐ€
{
   "plugins": ["syntax-dynamic-import"]
@@ -71,7 +71,7 @@
 	mode: 'history',
 	routes: routes,
 });
-

+

โ† โ†’

- + diff --git a/advanced/folder-structure.html b/advanced/folder-structure.html index d1fdf7345..28e57b74d 100644 --- a/advanced/folder-structure.html +++ b/advanced/folder-structure.html @@ -16,7 +16,7 @@ - + @@ -44,7 +44,7 @@ ๐Ÿ“† ์ง์ ‘ ๋ฌผ์–ด๋ณด๊ธฐ (opens new window) ๐Ÿ’ป ๊นƒํ—™ - (opens new window)

# ๋ทฐ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ

๋ทฐ์˜ ์žฅ์  ์ค‘ ํ•˜๋‚˜๋Š” ๋น ๋ฅธ ํ”„ํ† ํ†  ํƒ€์ดํ•‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ทฐ CLI๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜๋ฉด npm์œผ๋กœ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๋น ๋ฅด๊ฒŒ ํ™•์žฅํ•ด ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” ๋ณต์žกํ•ด์ง„ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฒ ์ €ํžˆ ์ €์˜ ๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ์ด ๋ฐ˜์˜๋œ ํด๋” ๊ตฌ์กฐ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ๊ณ ๋งŒ ํ•˜์‹œ๊ณ  ํ•„์š”ํ•œ ๊ฒƒ๋งŒ ์ทจํ•ด๊ฐ€์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ˜ƒ

# ๋ทฐ CLI๋กœ ์ƒ์„ฑํ•œ ๊ธฐ๋ณธ ํด๋” ๊ตฌ์กฐ

๋ทฐ CLI 2.9 ๋ฒ„์ „์„ ์ด์šฉํ•˜์—ฌ webpack-simple ํ”„๋กœ์ ํŠธ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

vue init webpack-simple folder-structure
+     (opens new window)    
 
# ๋ทฐ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ
 
๋ทฐ์˜ ์žฅ์  ์ค‘ ํ•˜๋‚˜๋Š” ๋น ๋ฅธ ํ”„ํ† ํ†  ํƒ€์ดํ•‘์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ทฐ CLI๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜๋ฉด npm์œผ๋กœ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ๋“ค์„ ๋น ๋ฅด๊ฒŒ ํ™•์žฅํ•ด ๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 
์ด๋ฒˆ ์ฑ•ํ„ฐ์—์„œ๋Š” ๋ณต์žกํ•ด์ง„ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฒ ์ €ํžˆ ์ €์˜ ๊ฐœ์ธ์ ์ธ ์˜๊ฒฌ์ด ๋ฐ˜์˜๋œ ํด๋” ๊ตฌ์กฐ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ฐธ๊ณ ๋งŒ ํ•˜์‹œ๊ณ  ํ•„์š”ํ•œ ๊ฒƒ๋งŒ ์ทจํ•ด๊ฐ€์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ˜ƒ
 
# ๋ทฐ CLI๋กœ ์ƒ์„ฑํ•œ ๊ธฐ๋ณธ ํด๋” ๊ตฌ์กฐ
 
๋ทฐ CLI 2.9 ๋ฒ„์ „์„ ์ด์šฉํ•˜์—ฌ webpack-simple ํ”„๋กœ์ ํŠธ๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
 
vue init webpack-simple folder-structure
 
ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜๋ฉด ๊ธฐ๋ณธ์ ์ธ ํด๋” ๊ตฌ์กฐ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.
 
.
 โ”œโ”€ README.md
 โ”œโ”€ index.html
@@ -98,15 +98,15 @@
       โ”œโ”€ css
       โ”œโ”€ images
       โ””โ”€ ...
-
  

+

โ† - Code Splitting โ†’

- + diff --git a/advanced/navigation-guard.html b/advanced/navigation-guard.html index 054e814e4..1b0e1e1aa 100644 --- a/advanced/navigation-guard.html +++ b/advanced/navigation-guard.html @@ -16,7 +16,7 @@ - + @@ -44,7 +44,7 @@ ๐Ÿ“† ์ง์ ‘ ๋ฌผ์–ด๋ณด๊ธฐ (opens new window) ๐Ÿ’ป ๊นƒํ—™ - (opens new window)

# ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ

๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ(Navigation Guard (opens new window))๋Š” ํŠน์ • URL์— ์ ‘๊ทผ(Navigation) ํ•˜๊ธฐ ์ „์— ๋ถˆ๋ ค์ง€๋Š” ํ›…(Hook)์˜ ์ผ์ข…์œผ๋กœ, ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์šฐํšŒ ํ•˜๊ฑฐ๋‚˜ ์ ‘๊ทผ ์ž์ฒด๋ฅผ ์ทจ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ๋ผ๊ณ  ๋ถˆ๋ฆฝ๋‹ˆ๋‹ค.

์‚ฌ์šฉ์ž์˜ ๊ถŒํ•œ์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ์ ‘๊ทผ์„ ๋ง‰๊ฑฐ๋‚˜ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๊ธฐ ์ „์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ฏธ๋ฆฌ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์€ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค์ƒ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„ํ•  ๋•Œ๋Š” ๊ฑฐ์˜ ํ•„์ˆ˜๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

# ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ ์ข…๋ฅ˜

๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ์˜ ์ข…๋ฅ˜๋Š” ์ ์šฉ๋˜๋Š” ์œ„์น˜, ๋ฒ”์œ„์— ๋”ฐ๋ผ์„œ ์ „์—ญ, ์ง€์—ญ, ์ปดํฌ๋„ŒํŠธ 3๊ฐ€์ง€๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.

# ์ „์—ญ ๊ฐ€๋“œ

์ „์—ญ ๊ฐ€๋“œ๋Š” ๋ชจ๋“  ๋ผ์šฐํŒ…์— ์ ์šฉ๋˜๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ์ž…๋‹ˆ๋‹ค. ๋ผ์šฐํ„ฐ์˜ beforeEach๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด ์ „์—ญ๊ฐ€๋“œ์˜ ๋กœ์ง์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์ „์—ญ ๊ฐ€๋“œ๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ˆ์‹œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

var router = new VueRouter();
+     (opens new window)    
 
# ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ
 
๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ(Navigation Guard (opens new window))๋Š” ํŠน์ • URL์— ์ ‘๊ทผ(Navigation) ํ•˜๊ธฐ ์ „์— ๋ถˆ๋ ค์ง€๋Š” ํ›…(Hook)์˜ ์ผ์ข…์œผ๋กœ, ๋‹ค๋ฅธ ํŽ˜์ด์ง€๋กœ ์šฐํšŒ ํ•˜๊ฑฐ๋‚˜ ์ ‘๊ทผ ์ž์ฒด๋ฅผ ์ทจ์†Œ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ๋ผ๊ณ  ๋ถˆ๋ฆฝ๋‹ˆ๋‹ค.
 
์‚ฌ์šฉ์ž์˜ ๊ถŒํ•œ์— ๋”ฐ๋ผ ํŽ˜์ด์ง€ ์ ‘๊ทผ์„ ๋ง‰๊ฑฐ๋‚˜ ํŽ˜์ด์ง€๋ฅผ ๋กœ๋”ฉํ•˜๊ธฐ ์ „์— ๋ฐ์ดํ„ฐ๋ฅผ ๋ฏธ๋ฆฌ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๊ธฐ ์ข‹์€ ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค์ƒ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌํ˜„ํ•  ๋•Œ๋Š” ๊ฑฐ์˜ ํ•„์ˆ˜๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
 
# ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ ์ข…๋ฅ˜
 
๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ์˜ ์ข…๋ฅ˜๋Š” ์ ์šฉ๋˜๋Š” ์œ„์น˜, ๋ฒ”์œ„์— ๋”ฐ๋ผ์„œ ์ „์—ญ, ์ง€์—ญ, ์ปดํฌ๋„ŒํŠธ 3๊ฐ€์ง€๋กœ ๋‚˜๋‰ฉ๋‹ˆ๋‹ค.
 
# ์ „์—ญ ๊ฐ€๋“œ
 
์ „์—ญ ๊ฐ€๋“œ๋Š” ๋ชจ๋“  ๋ผ์šฐํŒ…์— ์ ์šฉ๋˜๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ฐ€๋“œ์ž…๋‹ˆ๋‹ค. ๋ผ์šฐํ„ฐ์˜ beforeEach๋ผ๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด ์ „์—ญ๊ฐ€๋“œ์˜ ๋กœ์ง์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์ „์—ญ ๊ฐ€๋“œ๋ฅผ ์„ค์ •ํ•˜๋Š” ์˜ˆ์‹œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
 
var router = new VueRouter();
 
 router.beforeEach(function(to, from, next) {
   // ...
@@ -116,7 +116,7 @@
     next(); // ํŽ˜์ด์ง€ ์ „ํ™˜
   }
 });
-
# ์ฐธ๊ณ  ์ž๋ฃŒ
 
  

+

# ์ฐธ๊ณ  ์ž๋ฃŒ

โ† โ†’

- + diff --git a/advanced/transition.html b/advanced/transition.html index 14caa2b02..db4fea317 100644 --- a/advanced/transition.html +++ b/advanced/transition.html @@ -16,7 +16,7 @@ - + @@ -44,7 +44,7 @@ ๐Ÿ“† ์ง์ ‘ ๋ฌผ์–ด๋ณด๊ธฐ (opens new window) ๐Ÿ’ป ๊นƒํ—™ - (opens new window)

# Transition & Animation

๋ทฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๋ถ€์ ์œผ๋กœ ํŠธ๋žœ์ง€์…˜, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ธฐ๋Šฅ์„ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ„๋‹จํ•œ ๊ทœ์น™๊ณผ ์†์„ฑ๋“ค๋งŒ ์•Œ๋ฉด ์‰ฝ๊ฒŒ ๋ฉ‹์ง„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# ํŠธ๋žœ์ง€์…˜ ์˜ˆ์‹œ

๋ทฐ ํŠธ๋žœ์ง€์…˜ ์ฝ”๋“œ๋ฅผ ๊ฐ„๋‹จํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

<div>
+     (opens new window)    
 
# Transition & Animation
 
๋ทฐ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๋ถ€์ ์œผ๋กœ ํŠธ๋žœ์ง€์…˜, ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ธฐ๋Šฅ์„ ๊ฐ–๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ„๋‹จํ•œ ๊ทœ์น™๊ณผ ์†์„ฑ๋“ค๋งŒ ์•Œ๋ฉด ์‰ฝ๊ฒŒ ๋ฉ‹์ง„ ์• ๋‹ˆ๋ฉ”์ด์…˜ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
 
# ํŠธ๋žœ์ง€์…˜ ์˜ˆ์‹œ
 
๋ทฐ ํŠธ๋žœ์ง€์…˜ ์ฝ”๋“œ๋ฅผ ๊ฐ„๋‹จํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
 
<div>
   <button @click="showComment">show</button>
   <transiton name="fade">
     <p v-if="status">This is a comment</p>
@@ -76,7 +76,7 @@
   opacity: 0;
 }
 
fade-enter-active, fade-leave-active ๋“ฑ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ์ด ๋ทฐ์˜ ํŠธ๋žœ์ง€์…˜ CSS ์ฝ”๋“œ๋Š” ์ผ์ •ํ•œ ๊ทœ์น™์„
-๊ฐ–์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์‚ฌ์šฉํ•˜๋Š” CSS ํด๋ž˜์Šค๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด 6๊ฐœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
 
์ฝ˜์†”์—์„œ ํ™•์ธํ•œ ์ธ์Šคํ„ด์Šค ๋‚ด์šฉ
 
์ผ๋ฐ˜์ ์œผ๋กœ v-enter, v-leave-to๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ณ , v-enter-to, v-leave๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆผ์˜ ์ƒ‰๊น”์„ ๋ณด๋ฉด ์ง ์ง€์–ด์ ธ์„œ ์ž˜ ๊ตฌ๋ถ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
  

+๊ฐ–์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์‚ฌ์šฉํ•˜๋Š” CSS ํด๋ž˜์Šค๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด 6๊ฐœ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.
 
์ฝ˜์†”์—์„œ ํ™•์ธํ•œ ์ธ์Šคํ„ด์Šค ๋‚ด์šฉ
 
์ผ๋ฐ˜์ ์œผ๋กœ v-enter, v-leave-to๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๊ณ , v-enter-to, v-leave๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆผ์˜ ์ƒ‰๊น”์„ ๋ณด๋ฉด ์ง ์ง€์–ด์ ธ์„œ ์ž˜ ๊ตฌ๋ถ„๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
  

       โ†
       
       โ†’
- + diff --git a/assets/js/100.69578271.js b/assets/js/100.c7e88112.js similarity index 99% rename from assets/js/100.69578271.js rename to assets/js/100.c7e88112.js index 47ecc088c..74613a772 100644 --- a/assets/js/100.69578271.js +++ b/assets/js/100.c7e88112.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{429:function(t,s,a){"use strict";a.r(s);var n=a(3),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#this"}},[t._v("#")]),t._v(" this")]),t._v(" "),s("p",[t._v("this๋Š” ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์˜ˆ์•ฝ์–ด์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‚ฌ์ „์ ์ธ ์ •์˜๋กœ '"),s("strong",[t._v("ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ํ™˜๊ฒฝ")]),t._v("'์ด๋ฉฐ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” '"),s("strong",[t._v("ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ์˜ ์ปจํ…์ŠคํŠธ")]),t._v("'๋กœ ์ดํ•ดํ•˜์‹œ๋Š” ๊ฒŒ ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋‹ค๋ฅด๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ this๋Š” ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฐ’๋“ค์„ ๊ฐ€๋ฅดํ‚ต๋‹ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์กฐ๊ธˆ ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง€๋Š” ๋ถ€๋ถ„๋„ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("์—ฌ๊ธฐ์„œ๋Š” this๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ํ™œ์šฉ๋˜๋Š” ์ƒํ™ฉ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„Žแ…ฅแ†บ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Žแ…ฅแ†บ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ์ฒซ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ฝ˜์†”์—์„œ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("this์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์ปจํ…์ŠคํŠธ๋Š” "),s("strong",[t._v("๊ธ€๋กœ๋ฒŒ(์ „์—ญ) ์ปจํ…์ŠคํŠธ")]),t._v("์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ถœ๋ ฅ๋œ window๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ตœ์ƒ์œ„ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„ƒแ…ฎ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„ƒแ…ฎ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ๋‘ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐ์ฒด๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("num")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("printNum")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("์—ฌ๊ธฐ์„œ "),s("code",[t._v("obj.printNum()")]),t._v("์„ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printNum")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 10")]),t._v("\n")])])]),s("p",[s("strong",[t._v("๊ฐ์ฒด ์†์„ฑ ํ•จ์ˆ˜ ์•ˆ์—์„œ์˜ this๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.")])]),t._v(" "),s("h2",{attrs:{id:"แ„‰แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ์„ธ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์„ธ ๋ฒˆ์งธ๋กœ ์‚ดํŽด๋ณผ this๋Š” ๋จผ์ € "),s("a",{attrs:{href:"#%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8"}},[t._v("ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v(", "),s("a",{attrs:{href:"#%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98"}},[t._v("์ƒ์„ฑ์ž ํ•จ์ˆ˜")]),t._v("๋ฅผ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ˜น์‹œ ์•„์ง ๊ฐœ๋…์ด ๋‚ฏ์„  ๋ถ„๋“ค์€ ๋งํฌ๋ฅผ ํด๋ฆญํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ดํŽด๋ณด์‹œ๊ณ  ๊ณ„์† ์ฝ์–ด๋‚˜๊ฐ€์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("์ž ๊ทธ๋Ÿผ ์ผ๋ฐ˜ ํ•จ์ˆ˜(ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ)์—์„œ์˜ this๋Š” ์–ด๋–ค ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚ฌ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showComment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("์œ„ ํ•จ์ˆ˜๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์‹คํ–‰์‹œํ‚ค๋ฉด "),s("code",[t._v("window")]),t._v(" ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ "),s("strong",[t._v("์ผ๋ฐ˜ ํ•จ์ˆ˜์˜ this๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค.")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showComment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("๊ทธ๋Ÿผ ์ด๋ฒˆ์—” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ this๋ฅผ ํ™•์ธํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dev "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” ์‹คํ–‰ํ•˜์ž๋งˆ์ž ๋ฐ”๋กœ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์ฝ˜์†”์— ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Developer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("๊ทธ ์ด์œ ๋Š” "),s("code",[t._v("new")]),t._v("๋กœ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ˆœ๊ฐ„ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์„œ ์•Œ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์‹ค์€ "),s("strong",[t._v("์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ this๋Š” ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค๋Š” ๊ฒƒ")]),t._v("์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„‚แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‚แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ๋„ค ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("๋„ค ๋ฒˆ์งธ๋กœ ์‚ดํŽด๋ณผ this๋Š” ์‹ค์ œ๋กœ ์›น ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜๋Š” this์ž…๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” HTTP ์š”์ฒญ๊ณผ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n axios"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'domain.com/products'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("์œ„ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ค ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚ ๊นŒ์š”? ์ •๋‹ต์€ window์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("๊ธฐ๋ณธ์ ์œผ๋กœ HTTP ์š”์ฒญ๊ณผ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ์ •๋ฆฌํ•ด์„œ "),s("strong",[t._v("๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค")]),t._v("๊ณ  ๋ณด๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„‡แ…ฎแ„…แ…ฉแ†จ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…ฎแ„…แ…ฉแ†จ"}},[t._v("#")]),t._v(" ๋ถ€๋ก")]),t._v(" "),s("p",[t._v("์œ„ ๋ณธ๋ฌธ์„ ์ดํ•ดํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ์ž๋ฃŒ๋“ค์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("h3",{attrs:{id:"แ„’แ…กแ†ทแ„‰แ…ฎ-แ„‰แ…ฅแ†ซแ„‹แ…ฅแ†ซแ„†แ…ฎแ†ซ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„’แ…กแ†ทแ„‰แ…ฎ-แ„‰แ…ฅแ†ซแ„‹แ…ฅแ†ซแ„†แ…ฎแ†ซ"}},[t._v("#")]),t._v(" ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v(" "),s("p",[t._v("ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์€ ์•„๋ž˜์™€ ๊ฐ™์€ ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ์‹์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("functionName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"แ„‰แ…ขแ†ผแ„‰แ…ฅแ†ผแ„Œแ…ก-แ„’แ…กแ†ทแ„‰แ…ฎ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ขแ†ผแ„‰แ…ฅแ†ผแ„Œแ…ก-แ„’แ…กแ†ทแ„‰แ…ฎ"}},[t._v("#")]),t._v(" ์ƒ์„ฑ์ž ํ•จ์ˆ˜")]),t._v(" "),s("p",[t._v("๊ทธ๋ฆฌ๊ณ  ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์ƒˆ ์ธ์Šคํ„ด์Šค๋ฅผ ์„ ์–ธํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dev "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ” ๊ฐœ๋ฐœ์ž ๋ถ„๋“ค์€ ํด๋ž˜์Šค๊ฐ€ ์—†๋‹ค๊ณ  ๋‹นํ™ฉํ•˜์ง€ ๋งˆ์„ธ์š” ๐Ÿ˜ƒ")])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{428:function(t,s,a){"use strict";a.r(s);var n=a(3),e=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#this"}},[t._v("#")]),t._v(" this")]),t._v(" "),s("p",[t._v("this๋Š” ํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์˜ˆ์•ฝ์–ด์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‚ฌ์ „์ ์ธ ์ •์˜๋กœ '"),s("strong",[t._v("ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ํ™˜๊ฒฝ")]),t._v("'์ด๋ฉฐ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” '"),s("strong",[t._v("ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ์˜ ์ปจํ…์ŠคํŠธ")]),t._v("'๋กœ ์ดํ•ดํ•˜์‹œ๋Š” ๊ฒŒ ์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋‹ค๋ฅด๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ this๋Š” ์ƒํ™ฉ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ๊ฐ’๋“ค์„ ๊ฐ€๋ฅดํ‚ต๋‹ˆ๋‹ค. ์ด ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์กฐ๊ธˆ ์–ด๋ ต๊ฒŒ ๋Š๊ปด์ง€๋Š” ๋ถ€๋ถ„๋„ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("์—ฌ๊ธฐ์„œ๋Š” this๊ฐ€ ๊ฐ€์žฅ ๋งŽ์ด ํ™œ์šฉ๋˜๋Š” ์ƒํ™ฉ๋“ค์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„Žแ…ฅแ†บ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Žแ…ฅแ†บ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ์ฒซ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์•„๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ๋ธŒ๋ผ์šฐ์ € ์ฝ˜์†”์—์„œ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("this์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ์ปจํ…์ŠคํŠธ๋Š” "),s("strong",[t._v("๊ธ€๋กœ๋ฒŒ(์ „์—ญ) ์ปจํ…์ŠคํŠธ")]),t._v("์ž…๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ถœ๋ ฅ๋œ window๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์ตœ์ƒ์œ„ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„ƒแ…ฎ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„ƒแ…ฎ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ๋‘ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐ์ฒด๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" obj "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("num")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("printNum")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("num"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("์—ฌ๊ธฐ์„œ "),s("code",[t._v("obj.printNum()")]),t._v("์„ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋ ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("obj"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("printNum")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 10")]),t._v("\n")])])]),s("p",[s("strong",[t._v("๊ฐ์ฒด ์†์„ฑ ํ•จ์ˆ˜ ์•ˆ์—์„œ์˜ this๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ํ•ด๋‹น ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ต๋‹ˆ๋‹ค.")])]),t._v(" "),s("h2",{attrs:{id:"แ„‰แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ์„ธ ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("์„ธ ๋ฒˆ์งธ๋กœ ์‚ดํŽด๋ณผ this๋Š” ๋จผ์ € "),s("a",{attrs:{href:"#%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EB%AC%B8"}},[t._v("ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v(", "),s("a",{attrs:{href:"#%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98"}},[t._v("์ƒ์„ฑ์ž ํ•จ์ˆ˜")]),t._v("๋ฅผ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. ํ˜น์‹œ ์•„์ง ๊ฐœ๋…์ด ๋‚ฏ์„  ๋ถ„๋“ค์€ ๋งํฌ๋ฅผ ํด๋ฆญํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์‚ดํŽด๋ณด์‹œ๊ณ  ๊ณ„์† ์ฝ์–ด๋‚˜๊ฐ€์‹œ๋Š” ๊ฒƒ์„ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("์ž ๊ทธ๋Ÿผ ์ผ๋ฐ˜ ํ•จ์ˆ˜(ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ)์—์„œ์˜ this๋Š” ์–ด๋–ค ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚ฌ๊นŒ์š”?")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showComment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("์œ„ ํ•จ์ˆ˜๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ์‹คํ–‰์‹œํ‚ค๋ฉด "),s("code",[t._v("window")]),t._v(" ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฒฐ๋ก ์ ์œผ๋กœ "),s("strong",[t._v("์ผ๋ฐ˜ ํ•จ์ˆ˜์˜ this๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ์ž…๋‹ˆ๋‹ค.")])]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("showComment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("๊ทธ๋Ÿผ ์ด๋ฒˆ์—” ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ this๋ฅผ ํ™•์ธํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dev "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” ์‹คํ–‰ํ•˜์ž๋งˆ์ž ๋ฐ”๋กœ ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์ฝ˜์†”์— ์ถœ๋ ฅํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[t._v("Developer "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("๊ทธ ์ด์œ ๋Š” "),s("code",[t._v("new")]),t._v("๋กœ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•˜๋Š” ์ˆœ๊ฐ„ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๊ธฐ์„œ ์•Œ ์ˆ˜ ์žˆ๋Š” ์‚ฌ์‹ค์€ "),s("strong",[t._v("์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ this๋Š” ํ•จ์ˆ˜์˜ ๋‚ด๋ถ€๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค๋Š” ๊ฒƒ")]),t._v("์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„‚แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‚แ…ฆ-แ„‡แ…ฅแ†ซแ„แ…ข-this"}},[t._v("#")]),t._v(" ๋„ค ๋ฒˆ์งธ this")]),t._v(" "),s("p",[t._v("๋„ค ๋ฒˆ์งธ๋กœ ์‚ดํŽด๋ณผ this๋Š” ์‹ค์ œ๋กœ ์›น ๊ฐœ๋ฐœ์„ ํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜๋Š” this์ž…๋‹ˆ๋‹ค. ๋ฐ”๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” HTTP ์š”์ฒญ๊ณผ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n axios"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'domain.com/products'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("์œ„ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜๋ฉด ์–ด๋–ค ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜ํƒ€๋‚ ๊นŒ์š”? ์ •๋‹ต์€ window์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("fetchData")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// window")]),t._v("\n")])])]),s("p",[t._v("๊ธฐ๋ณธ์ ์œผ๋กœ HTTP ์š”์ฒญ๊ณผ ๊ฐ™์€ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ–์Šต๋‹ˆ๋‹ค. ์ •๋ฆฌํ•ด์„œ "),s("strong",[t._v("๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ ์ฝ”๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ์ „์—ญ ์ปจํ…์ŠคํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค")]),t._v("๊ณ  ๋ณด๋ฉด ๋˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„‡แ…ฎแ„…แ…ฉแ†จ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…ฎแ„…แ…ฉแ†จ"}},[t._v("#")]),t._v(" ๋ถ€๋ก")]),t._v(" "),s("p",[t._v("์œ„ ๋ณธ๋ฌธ์„ ์ดํ•ดํ•˜๋Š”๋ฐ ๋„์›€์ด ๋˜๋Š” ์ž๋ฃŒ๋“ค์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("h3",{attrs:{id:"แ„’แ…กแ†ทแ„‰แ…ฎ-แ„‰แ…ฅแ†ซแ„‹แ…ฅแ†ซแ„†แ…ฎแ†ซ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„’แ…กแ†ทแ„‰แ…ฎ-แ„‰แ…ฅแ†ซแ„‹แ…ฅแ†ซแ„†แ…ฎแ†ซ"}},[t._v("#")]),t._v(" ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v(" "),s("p",[t._v("ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์€ ์•„๋ž˜์™€ ๊ฐ™์€ ํ•จ์ˆ˜ ์ •์˜ ๋ฐฉ์‹์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("functionName")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"แ„‰แ…ขแ†ผแ„‰แ…ฅแ†ผแ„Œแ…ก-แ„’แ…กแ†ทแ„‰แ…ฎ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ขแ†ผแ„‰แ…ฅแ†ผแ„Œแ…ก-แ„’แ…กแ†ทแ„‰แ…ฎ"}},[t._v("#")]),t._v(" ์ƒ์„ฑ์ž ํ•จ์ˆ˜")]),t._v(" "),s("p",[t._v("๊ทธ๋ฆฌ๊ณ  ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์ƒˆ ์ธ์Šคํ„ด์Šค๋ฅผ ์„ ์–ธํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dev "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Developer")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ํ”„๋กœํ† ํƒ€์ž… ๊ธฐ๋ฐ˜ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ํด๋ž˜์Šค ๊ธฐ๋ฐ˜ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ž๋ฐ” ๊ฐœ๋ฐœ์ž ๋ถ„๋“ค์€ ํด๋ž˜์Šค๊ฐ€ ์—†๋‹ค๊ณ  ๋‹นํ™ฉํ•˜์ง€ ๋งˆ์„ธ์š” ๐Ÿ˜ƒ")])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/101.5e7db157.js b/assets/js/101.0c567d03.js similarity index 99% rename from assets/js/101.5e7db157.js rename to assets/js/101.0c567d03.js index bf9198a92..6664db9cd 100644 --- a/assets/js/101.5e7db157.js +++ b/assets/js/101.0c567d03.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{431:function(t,a,s){"use strict";s.r(a);var n=s(3),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎ-variable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎ-variable"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜(Variable)")]),t._v(" "),a("h2",{attrs:{id:"แ„‰แ…ฉแ„€แ…ข"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ฉแ„€แ…ข"}},[t._v("#")]),t._v(" ์†Œ๊ฐœ")]),t._v(" "),a("p",[t._v("๋ณ€์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋Š” ๋ณ€ํ•˜๋Š” ๊ฐ’์„ ์˜๋ฏธํ•˜๊ณ  ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๋Š” ์šฉ๊ธฐ๋‚˜ ๊ทธ๋ฆ‡๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ณ€ํ•˜๋Š” ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„์„ ๋ณ€์ˆ˜๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ ๋กœ์ง์˜ ๋Œ€๋ถ€๋ถ„์€ ๋ณ€์ˆ˜๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํ•œ ๋ง์…ˆ ๋“ฑ์˜ ์‚ฌ์น™ ์—ฐ์‚ฐ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ณต์žกํ•œ ๋กœ์ง์˜ ๊ณ„์‚ฐ๊นŒ์ง€ ๋ชจ๋‘ ๋ณ€์ˆ˜๊ฐ€ ๊ด€์—ฌํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),a("p",[t._v("์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณ€์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์œ„๋Š” "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์•„๋ฌด ๊ฐ’๋„ ํ• ๋‹นํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ "),a("code",[t._v("undefined")]),t._v(" ๋ผ๋Š” ์ดˆ๊ธฐ๊ฐ’์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.")]),t._v(" "),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ฆ-แ„€แ…กแ†น-แ„’แ…กแ†ฏแ„ƒแ…กแ†ผแ„’แ…กแ„€แ…ต"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ฆ-แ„€แ…กแ†น-แ„’แ…กแ†ฏแ„ƒแ…กแ†ผแ„’แ…กแ„€แ…ต"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜์— ๊ฐ’ ํ• ๋‹นํ•˜๊ธฐ")]),t._v(" "),a("p",[t._v("์ผ๋ฐ˜์ ์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ๋‚˜๋ฉด ๋ณ€์ˆ˜ ์•ˆ์— ์›ํ•˜๋Š” ๊ฐ’์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ์ด ๋ณ€์ˆ˜์— "),a("code",[t._v("10")]),t._v("์ด๋ผ๋Š” ์ˆซ์ž๋ฅผ ํ• ๋‹นํ•œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์™€ ๋‹ฌ๋ฆฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ž…๋ฌธ์ž์—๊ฒŒ ์ข‹์€ ์ด์œ ๋Š” ์œ„์™€ ๊ฐ™์ด ๋ณ€์ˆ˜์˜ ํƒ€์ž…(์ข…๋ฅ˜)์„ ์ •์˜ํ•˜์ง€ ์•Š์•„๋„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ์ž๋™์œผ๋กœ ํƒ€์ž…์ด ๊ฒฐ์ •๋œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.")]),t._v(" "),a("p",[t._v("์•„๋ž˜์™€ ๊ฐ™์ด ์œ ์—ฐํ•˜๊ฒŒ ์ฝ”๋“œ์˜ ๊ฐ’์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 10")]),t._v("\n\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hi'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// hi")]),t._v("\n\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n")])])]),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„†แ…งแ†ผ-แ„€แ…ฒแ„Žแ…ตแ†จ"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„†แ…งแ†ผ-แ„€แ…ฒแ„Žแ…ตแ†จ"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜๋ช… ๊ทœ์น™")]),t._v(" "),a("p",[t._v("๋ณ€์ˆ˜๋ช…์€ ์˜์–ด์™€ ํ•œ๊ธ€ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆซ์ž๋„ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์ˆซ์ž๋กœ ์‹œ์ž‘๋˜์–ด์„  ์•ˆ๋ฉ๋‹ˆ๋‹ค. "),a("code",[t._v("$")]),t._v(", "),a("code",[t._v("_")]),t._v(" ๋“ฑ์˜ ํŠน์ˆ˜๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๋Œ€์†Œ๋ฌธ์ž๊ฐ€ ๊ตฌ๋ถ„๋ฉ๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๋ช…")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" ๋‚ด์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" ๋‚ด์ฒซ๋ฒˆ์งธ์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" _a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" $won"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("๋ณ€์ˆ˜๋ช…์— "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_keywords_as_of_ecmascript_2015",target:"_blank",rel:"noopener noreferrer"}},[t._v("์˜ˆ์•ฝ์–ด"),a("OutboundLink")],1),t._v("๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ๋ถˆ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๋ช…")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("continue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ด-แ„แ…กแ„‹แ…ตแ†ธ-แ„’แ…ชแ†จแ„‹แ…ตแ†ซแ„’แ…กแ„€แ…ต-typeof"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ด-แ„แ…กแ„‹แ…ตแ†ธ-แ„’แ…ชแ†จแ„‹แ…ตแ†ซแ„’แ…กแ„€แ…ต-typeof"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜์˜ ํƒ€์ž… ํ™•์ธํ•˜๊ธฐ - typeof")]),t._v(" "),a("p",[t._v("์•ž์—์„œ ๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์€ ์ˆซ์ž, ๋ฌธ์ž์—ด, ์ง„์œ„ ๊ฐ’ ์ˆœ์„œ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๋‹คํ–‰ํžˆ ํ• ๋‹นํ•œ ๊ฐ’์„ ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ ์‹ค์ œ๋กœ ์ฝ”๋”ฉํ•˜๋‹ค๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์‰ฝ๊ฒŒ ํƒ€์ž…์„ ์ถ”์ธกํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" divElement "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'input'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("divElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์ด ๋•Œ "),a("code",[t._v("divElement")]),t._v(" ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" divElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์ด์ฒ˜๋Ÿผ ๋ณ€์ˆ˜์˜ ํƒ€์ž…์€ typeof ๋ผ๋Š” ์˜ˆ์•ฝ์–ด๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("์˜ˆ์•ฝ์–ด : ์–ธ์–ด์—์„œ ๋ฏธ๋ฆฌ ์ง€์ •ํ•ด๋†“์€ ํ‚ค์›Œ๋“œ, ๋‹จ์–ด")])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{429:function(t,a,s){"use strict";s.r(a);var n=s(3),e=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎ-variable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎ-variable"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜(Variable)")]),t._v(" "),a("h2",{attrs:{id:"แ„‰แ…ฉแ„€แ…ข"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ฉแ„€แ…ข"}},[t._v("#")]),t._v(" ์†Œ๊ฐœ")]),t._v(" "),a("p",[t._v("๋ณ€์ˆ˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๊ฐœ๋…์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋Š” ๋ณ€ํ•˜๋Š” ๊ฐ’์„ ์˜๋ฏธํ•˜๊ณ  ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด๋Š” ์šฉ๊ธฐ๋‚˜ ๊ทธ๋ฆ‡๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ณ€ํ•˜๋Š” ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„์„ ๋ณ€์ˆ˜๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ ๋กœ์ง์˜ ๋Œ€๋ถ€๋ถ„์€ ๋ณ€์ˆ˜๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋‹จ์ˆœํ•œ ๋ง์…ˆ ๋“ฑ์˜ ์‚ฌ์น™ ์—ฐ์‚ฐ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•˜์—ฌ ๋ณต์žกํ•œ ๋กœ์ง์˜ ๊ณ„์‚ฐ๊นŒ์ง€ ๋ชจ๋‘ ๋ณ€์ˆ˜๊ฐ€ ๊ด€์—ฌํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),a("p",[t._v("์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๋ณ€์ˆ˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์œ„๋Š” "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์•„๋ฌด ๊ฐ’๋„ ํ• ๋‹นํ•˜์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ "),a("code",[t._v("undefined")]),t._v(" ๋ผ๋Š” ์ดˆ๊ธฐ๊ฐ’์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.")]),t._v(" "),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ฆ-แ„€แ…กแ†น-แ„’แ…กแ†ฏแ„ƒแ…กแ†ผแ„’แ…กแ„€แ…ต"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ฆ-แ„€แ…กแ†น-แ„’แ…กแ†ฏแ„ƒแ…กแ†ผแ„’แ…กแ„€แ…ต"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜์— ๊ฐ’ ํ• ๋‹นํ•˜๊ธฐ")]),t._v(" "),a("p",[t._v("์ผ๋ฐ˜์ ์œผ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ๋‚˜๋ฉด ๋ณ€์ˆ˜ ์•ˆ์— ์›ํ•˜๋Š” ๊ฐ’์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ณ  ์ด ๋ณ€์ˆ˜์— "),a("code",[t._v("10")]),t._v("์ด๋ผ๋Š” ์ˆซ์ž๋ฅผ ํ• ๋‹นํ•œ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์™€ ๋‹ฌ๋ฆฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์ž…๋ฌธ์ž์—๊ฒŒ ์ข‹์€ ์ด์œ ๋Š” ์œ„์™€ ๊ฐ™์ด ๋ณ€์ˆ˜์˜ ํƒ€์ž…(์ข…๋ฅ˜)์„ ์ •์˜ํ•˜์ง€ ์•Š์•„๋„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ์ž๋™์œผ๋กœ ํƒ€์ž…์ด ๊ฒฐ์ •๋œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค.")]),t._v(" "),a("p",[t._v("์•„๋ž˜์™€ ๊ฐ™์ด ์œ ์—ฐํ•˜๊ฒŒ ์ฝ”๋“œ์˜ ๊ฐ’์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 10")]),t._v("\n\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hi'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// hi")]),t._v("\n\na "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// false")]),t._v("\n")])])]),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„†แ…งแ†ผ-แ„€แ…ฒแ„Žแ…ตแ†จ"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„†แ…งแ†ผ-แ„€แ…ฒแ„Žแ…ตแ†จ"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜๋ช… ๊ทœ์น™")]),t._v(" "),a("p",[t._v("๋ณ€์ˆ˜๋ช…์€ ์˜์–ด์™€ ํ•œ๊ธ€ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆซ์ž๋„ ์‚ฌ์šฉํ•  ์ˆ˜๋Š” ์žˆ์ง€๋งŒ ์ˆซ์ž๋กœ ์‹œ์ž‘๋˜์–ด์„  ์•ˆ๋ฉ๋‹ˆ๋‹ค. "),a("code",[t._v("$")]),t._v(", "),a("code",[t._v("_")]),t._v(" ๋“ฑ์˜ ํŠน์ˆ˜๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ  ๋Œ€์†Œ๋ฌธ์ž๊ฐ€ ๊ตฌ๋ถ„๋ฉ๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๋ช…")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" ๋‚ด์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" ๋‚ด์ฒซ๋ฒˆ์งธ์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" _a"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" $won"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("๋ณ€์ˆ˜๋ช…์— "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#reserved_keywords_as_of_ecmascript_2015",target:"_blank",rel:"noopener noreferrer"}},[t._v("์˜ˆ์•ฝ์–ด"),a("OutboundLink")],1),t._v("๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ๋ถˆ๊ฐ€๋Šฅํ•œ ๋ณ€์ˆ˜๋ช…")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v("์ด๋ฆ„"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("continue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ด-แ„แ…กแ„‹แ…ตแ†ธ-แ„’แ…ชแ†จแ„‹แ…ตแ†ซแ„’แ…กแ„€แ…ต-typeof"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…งแ†ซแ„‰แ…ฎแ„‹แ…ด-แ„แ…กแ„‹แ…ตแ†ธ-แ„’แ…ชแ†จแ„‹แ…ตแ†ซแ„’แ…กแ„€แ…ต-typeof"}},[t._v("#")]),t._v(" ๋ณ€์ˆ˜์˜ ํƒ€์ž… ํ™•์ธํ•˜๊ธฐ - typeof")]),t._v(" "),a("p",[t._v("์•ž์—์„œ ๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ "),a("code",[t._v("a")]),t._v("๋ผ๋Š” ๋ณ€์ˆ˜์˜ ๊ฐ’์€ ์ˆซ์ž, ๋ฌธ์ž์—ด, ์ง„์œ„ ๊ฐ’ ์ˆœ์„œ๋กœ ๋ณ€๊ฒฝ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” ๋‹คํ–‰ํžˆ ํ• ๋‹นํ•œ ๊ฐ’์„ ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ์—ˆ์ง€๋งŒ ์‹ค์ œ๋กœ ์ฝ”๋”ฉํ•˜๋‹ค๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์‰ฝ๊ฒŒ ํƒ€์ž…์„ ์ถ”์ธกํ•˜๊ธฐ๊ฐ€ ์–ด๋ ต์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" divElement "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'input'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("divElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์ด ๋•Œ "),a("code",[t._v("divElement")]),t._v(" ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("typeof")]),t._v(" divElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("์ด์ฒ˜๋Ÿผ ๋ณ€์ˆ˜์˜ ํƒ€์ž…์€ typeof ๋ผ๋Š” ์˜ˆ์•ฝ์–ด๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),a("p",[t._v("์˜ˆ์•ฝ์–ด : ์–ธ์–ด์—์„œ ๋ฏธ๋ฆฌ ์ง€์ •ํ•ด๋†“์€ ํ‚ค์›Œ๋“œ, ๋‹จ์–ด")])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/103.5d2f323b.js b/assets/js/103.a6c769cb.js similarity index 98% rename from assets/js/103.5d2f323b.js rename to assets/js/103.a6c769cb.js index bff30a711..0ec69d694 100644 --- a/assets/js/103.5d2f323b.js +++ b/assets/js/103.a6c769cb.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{432:function(t,e,r){"use strict";r.r(e);var a=r(3),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"แ„‚แ…กแ†ฏแ„แ…ก-แ„‰แ…ฅแ†ซแ„แ…ขแ†จแ„€แ…ต-แ„…แ…กแ„‹แ…ตแ„‡แ…ณแ„…แ…ฅแ„…แ…ต-แ„แ…ฉแ†ผแ„’แ…กแ†ธ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‚แ…กแ†ฏแ„แ…ก-แ„‰แ…ฅแ†ซแ„แ…ขแ†จแ„€แ…ต-แ„…แ…กแ„‹แ…ตแ„‡แ…ณแ„…แ…ฅแ„…แ…ต-แ„แ…ฉแ†ผแ„’แ…กแ†ธ"}},[t._v("#")]),t._v(" ๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ†ตํ•ฉ")]),t._v(" "),e("p",[t._v("์‹ค๋ฌด์˜ ๋ ˆ๊ฑฐ์‹œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ทฐ๋กœ ๋ฐ”๊พธ๋Š” ๊ฒฝ์šฐ ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ๋กœ ๋ž˜ํ•‘ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๊ธฐ์กด ์‹œ์Šคํ…œ์— ์ ์šฉ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋˜๋Š” jQuery ๊ธฐ๋ฐ˜์œผ๋กœ ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ๋ทฐ ๊ฐœ๋ฐœ์ž๋Š” ์ด์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ์˜ ๋™์ž‘ ์›๋ฆฌ์— ๋งž์ถฐ ํ†ตํ•ฉํ•  ์ค„ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),e("p",[t._v("๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ๋กœ ๋ž˜ํ•‘ํ•  ๋•Œ ์•Œ์•„์•ผ ํ•˜๋Š” ๋ทฐ์˜ ํŠน์ง•์€ ๊ฐ€์ƒ ๋”(Virtual DOM) ๊ธฐ๋ฐ˜์œผ๋กœ ํ…œํ”Œ๋ฆฟ์„ ๊ตฌํ˜„ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ทฐ ์ธ์Šคํ„ด์Šค๊ฐ€ ํ™”๋ฉด์— ๋ถ€์ฐฉ๋˜๋Š” ์‹œ์ ์ด ์–ธ์ œ์ธ์ง€ ์ž˜ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„๋“ค์€ "),e("RouterLink",{attrs:{to:"/vue/life-cycle.html"}},[t._v("๋ทฐ ์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„์‚ฌ์ดํด")]),t._v("์„ ๋‹ค์‹œ ์‚ดํŽด๋ณด์„ธ์š”.")],1),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‹แ…จแ„Œแ…ฆ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‹แ…จแ„Œแ…ฆ"}},[t._v("#")]),t._v(" ์‹ค์Šต ์˜ˆ์ œ")]),t._v(" "),e("p",[t._v("๋ทฐ๋กœ ํ†ตํ•ฉํ•  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‚ ์งœ ์„ ํƒ๊ธฐ(DatePicker) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ๋„ ์žˆ๊ณ  ๋…๋ฆฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ๋„ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” "),e("a",{attrs:{href:"https://github.com/dbushell/Pikaday",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pickaday"),e("OutboundLink")],1),t._v("๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์‹ค์Šตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‘แ…ฉแ„‹แ…ตแ†ซแ„แ…ณ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‘แ…ฉแ„‹แ…ตแ†ซแ„แ…ณ"}},[t._v("#")]),t._v(" ์‹ค์Šต ํฌ์ธํŠธ")]),t._v(" "),e("ol",[e("li",[t._v("์ปดํฌ๋„ŒํŠธ ๋ชจ๋“ˆํ™”")]),t._v(" "),e("li",[t._v("๋ทฐ ๋ผ์ดํ”„์‚ฌ์ดํด์— ๋Œ€ํ•œ ์ดํ•ด")]),t._v(" "),e("li",[t._v("์ปดํฌ๋„ŒํŠธ ํ†ต์‹  ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด")]),t._v(" "),e("li",[t._v("v-model ๋‚ด๋ถ€ ๋™์ž‘ ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด")])]),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„แ…ฉแ„ƒแ…ณ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„แ…ฉแ„ƒแ…ณ"}},[t._v("#")]),t._v(" ์‹ค์Šต ์ฝ”๋“œ")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/2_todo/external-library/exercise",target:"_blank",rel:"noopener noreferrer"}},[t._v("์—ฐ์Šต ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/2_todo/external-library/answer",target:"_blank",rel:"noopener noreferrer"}},[t._v("๋‹ต์•ˆ ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),e("OutboundLink")],1)])])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[103],{500:function(t,e,r){"use strict";r.r(e);var a=r(3),s=Object(a.a)({},(function(){var t=this,e=t._self._c;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h1",{attrs:{id:"แ„‚แ…กแ†ฏแ„แ…ก-แ„‰แ…ฅแ†ซแ„แ…ขแ†จแ„€แ…ต-แ„…แ…กแ„‹แ…ตแ„‡แ…ณแ„…แ…ฅแ„…แ…ต-แ„แ…ฉแ†ผแ„’แ…กแ†ธ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‚แ…กแ†ฏแ„แ…ก-แ„‰แ…ฅแ†ซแ„แ…ขแ†จแ„€แ…ต-แ„…แ…กแ„‹แ…ตแ„‡แ…ณแ„…แ…ฅแ„…แ…ต-แ„แ…ฉแ†ผแ„’แ…กแ†ธ"}},[t._v("#")]),t._v(" ๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ†ตํ•ฉ")]),t._v(" "),e("p",[t._v("์‹ค๋ฌด์˜ ๋ ˆ๊ฑฐ์‹œ ํ”„๋กœ์ ํŠธ๋ฅผ ๋ทฐ๋กœ ๋ฐ”๊พธ๋Š” ๊ฒฝ์šฐ ๊ธฐ์กด์— ์‚ฌ์šฉํ•˜๋˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ๋กœ ๋ž˜ํ•‘ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ƒ๊น๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ๊ธฐ์กด ์‹œ์Šคํ…œ์— ์ ์šฉ๋œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋˜๋Š” jQuery ๊ธฐ๋ฐ˜์œผ๋กœ ๋˜์–ด ์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ, ๋ทฐ ๊ฐœ๋ฐœ์ž๋Š” ์ด์™€ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ์˜ ๋™์ž‘ ์›๋ฆฌ์— ๋งž์ถฐ ํ†ตํ•ฉํ•  ์ค„ ์•Œ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),e("p",[t._v("๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ทฐ๋กœ ๋ž˜ํ•‘ํ•  ๋•Œ ์•Œ์•„์•ผ ํ•˜๋Š” ๋ทฐ์˜ ํŠน์ง•์€ ๊ฐ€์ƒ ๋”(Virtual DOM) ๊ธฐ๋ฐ˜์œผ๋กœ ํ…œํ”Œ๋ฆฟ์„ ๊ตฌํ˜„ํ•œ๋‹ค๋Š” ์ ์ž…๋‹ˆ๋‹ค. ๋ทฐ ์ธ์Šคํ„ด์Šค๊ฐ€ ํ™”๋ฉด์— ๋ถ€์ฐฉ๋˜๋Š” ์‹œ์ ์ด ์–ธ์ œ์ธ์ง€ ์ž˜ ๋ชจ๋ฅด์‹œ๋Š” ๋ถ„๋“ค์€ "),e("RouterLink",{attrs:{to:"/vue/life-cycle.html"}},[t._v("๋ทฐ ์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„์‚ฌ์ดํด")]),t._v("์„ ๋‹ค์‹œ ์‚ดํŽด๋ณด์„ธ์š”.")],1),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‹แ…จแ„Œแ…ฆ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‹แ…จแ„Œแ…ฆ"}},[t._v("#")]),t._v(" ์‹ค์Šต ์˜ˆ์ œ")]),t._v(" "),e("p",[t._v("๋ทฐ๋กœ ํ†ตํ•ฉํ•  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋‚ ์งœ ์„ ํƒ๊ธฐ(DatePicker) ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ๋‚ ์งœ ์„ ํƒ๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” jQuery ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ๋„ ์žˆ๊ณ  ๋…๋ฆฝ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ๋„ ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” "),e("a",{attrs:{href:"https://github.com/dbushell/Pikaday",target:"_blank",rel:"noopener noreferrer"}},[t._v("Pickaday"),e("OutboundLink")],1),t._v("๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์‹ค์Šตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‘แ…ฉแ„‹แ…ตแ†ซแ„แ…ณ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„‘แ…ฉแ„‹แ…ตแ†ซแ„แ…ณ"}},[t._v("#")]),t._v(" ์‹ค์Šต ํฌ์ธํŠธ")]),t._v(" "),e("ol",[e("li",[t._v("์ปดํฌ๋„ŒํŠธ ๋ชจ๋“ˆํ™”")]),t._v(" "),e("li",[t._v("๋ทฐ ๋ผ์ดํ”„์‚ฌ์ดํด์— ๋Œ€ํ•œ ์ดํ•ด")]),t._v(" "),e("li",[t._v("์ปดํฌ๋„ŒํŠธ ํ†ต์‹  ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด")]),t._v(" "),e("li",[t._v("v-model ๋‚ด๋ถ€ ๋™์ž‘ ๋ฐฉ์‹์— ๋Œ€ํ•œ ์ดํ•ด")])]),t._v(" "),e("h2",{attrs:{id:"แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„แ…ฉแ„ƒแ…ณ"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#แ„‰แ…ตแ†ฏแ„‰แ…ณแ†ธ-แ„แ…ฉแ„ƒแ…ณ"}},[t._v("#")]),t._v(" ์‹ค์Šต ์ฝ”๋“œ")]),t._v(" "),e("ul",[e("li",[e("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/2_todo/external-library/exercise",target:"_blank",rel:"noopener noreferrer"}},[t._v("์—ฐ์Šต ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),e("OutboundLink")],1)]),t._v(" "),e("li",[e("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/2_todo/external-library/answer",target:"_blank",rel:"noopener noreferrer"}},[t._v("๋‹ต์•ˆ ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),e("OutboundLink")],1)])])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/104.c441390a.js b/assets/js/104.46c807ed.js similarity index 99% rename from assets/js/104.c441390a.js rename to assets/js/104.46c807ed.js index ae8cfa5e6..9f2f6ae1a 100644 --- a/assets/js/104.c441390a.js +++ b/assets/js/104.46c807ed.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{433:function(t,a,s){"use strict";s.r(a);var n=s(3),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" Form")]),t._v(" "),a("p",[t._v("์•ž์—์„œ ์—ฐ์Šตํ–ˆ๋˜ ์ œ์ด์ฟผ๋ฆฌ์˜ ์‚ฌ๊ณ  ๋ฐฉ์‹์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ ์œ„ํ•ด ์‹ค์Šต ํ•œ ๊ฐœ๋ฅผ ๋” ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ œ์ด์ฟผ๋ฆฌ๋กœ ๊ตฌํ˜„๋œ ์‚ฌ์šฉ์ž ์ž…๋ ฅํผ์ด ์•„๋ž˜์™€ ๊ฐ™์ด ์žˆ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๋ทฐ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์„๊นŒ์š”?")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mb-4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("block text-grey-darker text-sm font-bold mb-2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Username\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mb-6"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("block text-grey-darker text-sm font-bold mb-2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Password\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3 leading-tight focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("******************"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-red text-xs italic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Please choose a password."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex items-center justify-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("submit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Sign In\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("#"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Forgot Password?\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'form'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'submit'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("preventDefault")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" username "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#username'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" password "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#password'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n $"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ajax")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://jsonplaceholder.typicode.com/users/'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dataType")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("contentType")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json; charset=UTF-8"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("password")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/1_essentials/form/exercise",target:"_blank",rel:"noopener noreferrer"}},[t._v("์—ฐ์Šต ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),a("OutboundLink")],1),t._v(" "),a("br"),t._v(" "),a("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/1_essentials/form/answer",target:"_blank",rel:"noopener noreferrer"}},[t._v("๋‹ต์•ˆ ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),a("OutboundLink")],1)])])}),[],!1,null,null,null);a.default=p.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{432:function(t,a,s){"use strict";s.r(a);var n=s(3),p=Object(n.a)({},(function(){var t=this,a=t._self._c;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form"}},[t._v("#")]),t._v(" Form")]),t._v(" "),a("p",[t._v("์•ž์—์„œ ์—ฐ์Šตํ–ˆ๋˜ ์ œ์ด์ฟผ๋ฆฌ์˜ ์‚ฌ๊ณ  ๋ฐฉ์‹์—์„œ ๋ฒ—์–ด๋‚˜๊ธฐ ์œ„ํ•ด ์‹ค์Šต ํ•œ ๊ฐœ๋ฅผ ๋” ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ œ์ด์ฟผ๋ฆฌ๋กœ ๊ตฌํ˜„๋œ ์‚ฌ์šฉ์ž ์ž…๋ ฅํผ์ด ์•„๋ž˜์™€ ๊ฐ™์ด ์žˆ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๋ทฐ๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์„๊นŒ์š”?")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("form")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mb-4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("block text-grey-darker text-sm font-bold mb-2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Username\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("Username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("mb-6"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("block text-grey-darker text-sm font-bold mb-2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Password\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("input")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3 leading-tight focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("placeholder")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("******************"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text-red text-xs italic"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Please choose a password."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("flex items-center justify-between"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("submit"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Sign In\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("#"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n Forgot Password?\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ready")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'form'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'submit'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("preventDefault")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" username "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#username'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" password "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#password'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n $"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ajax")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'https://jsonplaceholder.typicode.com/users/'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("method")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'POST'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dataType")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'json'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("contentType")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"application/json; charset=UTF-8"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("password")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("response")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("response"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("catch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("error")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n username"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n password"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/1_essentials/form/exercise",target:"_blank",rel:"noopener noreferrer"}},[t._v("์—ฐ์Šต ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),a("OutboundLink")],1),t._v(" "),a("br"),t._v(" "),a("a",{attrs:{href:"https://github.com/joshua1988/vue-camp/tree/vue6-class/1_essentials/form/answer",target:"_blank",rel:"noopener noreferrer"}},[t._v("๋‹ต์•ˆ ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ์„œ"),a("OutboundLink")],1)])])}),[],!1,null,null,null);a.default=p.exports}}]); \ No newline at end of file diff --git a/assets/js/105.83d0ab8e.js b/assets/js/105.d9ee0cc4.js similarity index 99% rename from assets/js/105.83d0ab8e.js rename to assets/js/105.d9ee0cc4.js index a0e3cf185..919b4aac9 100644 --- a/assets/js/105.83d0ab8e.js +++ b/assets/js/105.d9ee0cc4.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{434:function(t,s,a){"use strict";a.r(s);var n=a(3),p=Object(n.a)({},(function(){var t=this,s=t._self._c;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ฆแ„‰แ…ฅ-แ„‡แ…ฒ-แ„‰แ…กแ„€แ…ฉ-แ„‡แ…กแ†ผแ„‰แ…ตแ†จแ„‹แ…ณแ„…แ…ฉ-แ„Œแ…ฅแ†ซแ„’แ…ชแ†ซแ„’แ…กแ„€แ…ต"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ฆแ„‰แ…ฅ-แ„‡แ…ฒ-แ„‰แ…กแ„€แ…ฉ-แ„‡แ…กแ†ผแ„‰แ…ตแ†จแ„‹แ…ณแ„…แ…ฉ-แ„Œแ…ฅแ†ซแ„’แ…ชแ†ซแ„’แ…กแ„€แ…ต"}},[t._v("#")]),t._v(" ์ œ์ด์ฟผ๋ฆฌ์—์„œ ๋ทฐ ์‚ฌ๊ณ  ๋ฐฉ์‹์œผ๋กœ ์ „ํ™˜ํ•˜๊ธฐ")]),t._v(" "),s("h2",{attrs:{id:"แ„‡แ…ฒ-แ„€แ…ขแ„‡แ…กแ†ฏแ„Œแ…กแ„€แ…ก-แ„†แ…กแ„Œแ…ฎแ„’แ…กแ„‚แ…ณแ†ซ-แ„’แ…งแ†ซแ„‰แ…ตแ†ฏ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…ฒ-แ„€แ…ขแ„‡แ…กแ†ฏแ„Œแ…กแ„€แ…ก-แ„†แ…กแ„Œแ…ฎแ„’แ…กแ„‚แ…ณแ†ซ-แ„’แ…งแ†ซแ„‰แ…ตแ†ฏ"}},[t._v("#")]),t._v(" ๋ทฐ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งˆ์ฃผํ•˜๋Š” ํ˜„์‹ค")]),t._v(" "),s("p",[t._v("์ œ์ด์ฟผ๋ฆฌ(jQuery)๋Š” ํ˜„์žฌ๊นŒ์ง€๋„ ๋งŽ์€ ๊ธฐ์—…๋“ค์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ์•„๋งˆ๋„ ๋ทฐ๋ฅผ ๋ฐฐ์šฐ๊ณ  ๋‚˜๋ฉด ๊ฐ€์žฅ ๋จผ์ € ๋ถ€๋”ชํžˆ๋Š” ์ผ๋“ค์ด ์ œ์ด์ฟผ๋ฆฌ๋กœ ์ œ์ž‘๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ธฐ๋Šฅ์„ ์ˆ˜์ •ํ•ด์•ผ ํ•˜๋Š” ์ผ ์ผ๊ฒ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("jQuery๋Š” DOM์„ ์‰ฝ๊ฒŒ ์กฐ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.")])]),t._v(" "),s("h2",{attrs:{id:"แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ช-แ„‡แ…ฒแ„‹แ…ด-แ„Žแ…กแ„‹แ…ตแ„Œแ…ฅแ†ท"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ช-แ„‡แ…ฒแ„‹แ…ด-แ„Žแ…กแ„‹แ…ตแ„Œแ…ฅแ†ท"}},[t._v("#")]),t._v(" ์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ์˜ ์ฐจ์ด์ ")]),t._v(" "),s("p",[t._v("์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ์˜ ๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€ ํ™”๋ฉด ์š”์†Œ๋ฅผ ์ง์ ‘ ์ ‘๊ทผํ•˜๋Š๋ƒ ๊ทธ๋ ‡์ง€ ์•Š๋Š๋ƒ์ž…๋‹ˆ๋‹ค. ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด ๋‘ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ DOM ์ ‘๊ทผ ๋ฐฉ๋ฒ•์„ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. HTML ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๊ฐ„๋‹จํ•œ ๋ฒ„ํŠผ ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click me"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h3",{attrs:{id:"แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ด-แ„‡แ…ฅแ„แ…ณแ†ซ-แ„แ…ขแ„€แ…ณ-แ„Œแ…ฅแ†ธแ„€แ…ณแ†ซ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ด-แ„‡แ…ฅแ„แ…ณแ†ซ-แ„แ…ขแ„€แ…ณ-แ„Œแ…ฅแ†ธแ„€แ…ณแ†ซ"}},[t._v("#")]),t._v(" ์ œ์ด์ฟผ๋ฆฌ์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ ์ ‘๊ทผ")]),t._v(" "),s("p",[t._v("์ œ์ด์ฟผ๋ฆฌ๋Š” ํŠน์ • ํƒœ๊ทธ๋ฅผ ์ ‘๊ทผํ•˜๊ธฐ ์ผ๋ฐ˜์ ์œผ๋กœ ํƒœ๊ทธ์— id ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ  ์ œ์ด์ฟผ๋ฆฌ ์„ ํƒ์ž($)๋ฅผ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click me"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” btn ์•„์ด๋””๋ฅผ ๊ฐ€์ง€๋Š” DOM์„ ์ ‘๊ทผํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("h3",{attrs:{id:"แ„‡แ…ฒแ„‹แ…ด-แ„‡แ…ฅแ„แ…ณแ†ซ-แ„แ…ขแ„€แ…ณ-แ„Œแ…ฅแ†ธแ„€แ…ณแ†ซ"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„‡แ…ฒแ„‹แ…ด-แ„‡แ…ฅแ„แ…ณแ†ซ-แ„แ…ขแ„€แ…ณ-แ„Œแ…ฅแ†ธแ„€แ…ณแ†ซ"}},[t._v("#")]),t._v(" ๋ทฐ์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ ์ ‘๊ทผ")]),t._v(" "),s("p",[t._v("์ด๋ฒˆ์—” ๋ทฐ์ž…๋‹ˆ๋‹ค. ๋ทฐ๋กœ ํŠน์ • ํƒœ๊ทธ๋กœ ์ ‘๊ทผํ•˜๋ ค๋ฉด ref ์†์„ฑ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ์œ„์˜ ๋ฒ„ํŠผ ํƒœ๊ทธ์— ref ์†์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ  ์ ‘๊ทผํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("ref")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click me"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$refs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn\n")])])]),s("p",[t._v("์ด์ฒ˜๋Ÿผ ๋ฐ”๋กœ ์ ‘๊ทผํ•˜๊ณ  ์‹ถ์€ ํƒœ๊ทธ์— ref ์†์„ฑ์„ ์ง€์ •ํ•˜์—ฌ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.")]),t._v(" "),s("h2",{attrs:{id:"แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ช-แ„‡แ…ฒแ„…แ…ณแ†ฏ-แ„€แ…กแ‡€แ„‹แ…ต-แ„Šแ…ณแ†ฏ-แ„„แ…ข-แ„Œแ…ฎแ„‹แ…ดแ„’แ…กแ†ฏ-แ„Œแ…ฅแ†ท"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#แ„Œแ…ฆแ„‹แ…ตแ„แ…ฏแ„…แ…ตแ„‹แ…ช-แ„‡แ…ฒแ„…แ…ณแ†ฏ-แ„€แ…กแ‡€แ„‹แ…ต-แ„Šแ…ณแ†ฏ-แ„„แ…ข-แ„Œแ…ฎแ„‹แ…ดแ„’แ…กแ†ฏ-แ„Œแ…ฅแ†ท"}},[t._v("#")]),t._v(" ์ œ์ด์ฟผ๋ฆฌ์™€ ๋ทฐ๋ฅผ ๊ฐ™์ด ์“ธ ๋•Œ ์ฃผ์˜ํ•  ์ ")]),t._v(" "),s("p",[t._v("๋ณดํ†ต ๋ทฐ๋ฅผ ๋ฐฐ์šฐ์‹œ๊ณ  ๋‚˜๋ฉด ๊ธฐ์กด์˜ ์ œ์ด์ฟผ๋ฆฌ ๊ธฐ๋ฐ˜ ์‹œ์Šคํ…œ์„ ๊ฐœํŽธํ•˜๊ฑฐ๋‚˜ ์ƒˆ๋กœ ์„œ๋น„์Šค๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ „์ž์˜ ๋น„์œจ์ด ์ƒ๋‹นํžˆ ๋†’์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ œ์ด์ฟผ๋ฆฌ ๊ธฐ๋ฐ˜์˜ ์ฝ”๋“œ, ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ์‹œ์— ์ฃผ์˜ํ•  ์ ์„ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฃผ์˜ํ•  ์ ์€ ๋ฐ”๋กœ ๋ทฐ์˜ ์ธ์Šคํ„ด์Šค ๋ผ์ดํ”„์‚ฌ์ดํด์ž…๋‹ˆ๋‹ค.")]),t._v(" "),s("p",[t._v("๋ทฐ์˜ ๋ผ์ดํ”„์‚ฌ์ดํด์ด๋ž€ ๋ทฐ์˜ ์ธ์Šคํ„ด์Šค๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ์†Œ๋ฉธ๋˜๊ธฐ๊นŒ์ง€์˜ ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ผ์ดํ”„์‚ฌ์ดํด ํ›…์ด๋ผ๋Š” ๊ฒŒ ์žˆ๋Š”๋ฐ ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฑด ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("ul",[s("li",[t._v("created")]),t._v(" "),s("li",[t._v("beforeMount")]),t._v(" "),s("li",[t._v("mounted")])]),t._v(" "),s("p",[t._v("์—ฌ๊ธฐ์„œ ์ œ์ด์ฟผ๋ฆฌ์˜ ์„ ํƒ์ž๋กœ HTML ํƒœ๊ทธ๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์‹œ์ ์€ mounted ๋‹จ๊ณ„์ž…๋‹ˆ๋‹ค. ์ฝ”๋“œ๋กœ ์˜ˆ๋ฅผ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("click me"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" $ "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'jquery'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("mounted")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#btn'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("click")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hi'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("์œ„ ์ฝ”๋“œ๋Š” ๋ทฐ์˜ ์‹ฑ๊ธ€ ํŒŒ์ผ ์ปดํฌ๋„ŒํŠธ(vue ํŒŒ์ผ ํ™•์žฅ์ž) ์ฝ”๋“œ ๊ตฌ์กฐ์—์„œ ์ œ์ด์ฟผ๋ฆฌ๋ฅผ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ์Šต์ž…๋‹ˆ๋‹ค. "),s("code",[t._v("