FE
λ‘컬μμ μ€νμν¬ λ κ°νΉ μ λμκ° λκ° μμλ€. (400λ²λ μλ¬)κ·Έλ΄ λλ§λ€ νμ μμ²νλ urlλ‘ μ λ μκ°κ³ μλμ§, ν΄λΌμ΄μΈνΈμ μλ² μ¬μ΄μ μ°κ²°μ΄ μ μ€μ λμ΄μλμ§ νμΈν΄μΌνλ€.vue.config.jsλ Webpack μ€μ μ νμ₯νκ±°λ μ¬μ©μ μ μνλ λ° μ¬μ©λλ κ΅¬μ± νμΌμ΄λ€.π vue.config.jsκ° νμν κ²½μ° - κΈ°λ³Έ μ€μ μ λμ΄ νλ‘μ νΈμ νΉμ μꡬμ¬νμ΄ μμ λ- κ°λ° μλ² μ€μ μ λ³κ²½νκ±°λ webpack νλ¬κ·ΈμΈμ μΆκ°ν λ- API νλ‘μλ₯Ό μ€μ νκ±°λ μΈλΆ CSS/JS λΌμ΄λΈλ¬λ¦¬λ₯Ό μΆκ°ν λ μμ κ°μ΄ ν΄λΉ νμΌμ ν΅ν΄ κΈ°λ³Έμ μΈ μ€μ μ λ³κ²½νκ±°λ μλ‘μ΄ κΈ°λ₯μ μΆκ°ν μ μλ€. μ΄ νμΌμμ μ€μ ν μ μλ μ΅μ
λ€μ λ€μκ³Ό κ°λ€. πΉ μ£Όμ μ€μ μ΅μ
λ€ publicPat..
FE
μ½λ°±κ³Ό νλ‘λ―Έμ€ κ°μ²΄calback ν¨μ νλμ λ°μ΄ν°μ²λΌ μ¬μ©λλ ν¨μλ€λ₯Έ ν¨μμ μΈμλ‘ μ λ¬λμ΄ ν΄λΉ ν¨μμ λ΄λΆμμ νΈμΆλλ ν¨μκΈ°λ³Έμ μΈ μ€νμ λ€μ μμλ₯Ό 보μ₯νλ μ₯μ κ°μ§κ³ μμμ¬μ©ν¨ν΄ λΆνΈ (μ½λ°±μ§μ₯)PromiseλΉλκΈ° μμ
μ μ²λ¦¬νκΈ° μν κ°μ²΄ async-awaitAsync-awaitν¨μ μμ async λΆμ΄λ©΄ νμ promise λ°ν await ν€μλλ async ν¨μ μμμλ§ μ¬μ© κ°λ₯νλ©° promiseκ° ν΄κ²°λ λκΉμ§ κΈ°λ€λ¦Ό μμΈμ²λ¦¬ (then, catch, finally)thenμμ
μ΄ μ±κ³΅νμ λ μ€νλ ν¨μ μ€μ catchμμ
μ΄ μ€ν¨νμ λ μ€νλ ν¨μ μ€μ finallyμ΅μ’
μ μΌλ‘ μ λλ‘ λμνλ νΉμ κ±°λΆλλ μκ΄μμ΄ κ°μ₯ λ§μ§λ§μ μ€νν λ΄μ© μ€μ try-catchtry { //..
FE
Vue.js μ ν리μΌμ΄μ
μμ μν κ΄λ¦¬λ₯Ό ν¨μ¨μ μΌλ‘ νκΈ° μν΄ μ¬μ©λλ μ€μ μ§μ€μ μν λΆλ¦¬ ν¨ν΄ λ° λΌμ΄λΈλ¬λ¦¬ βμ¬μ©νλ μ΄μ μ€μ μ§μ€μ μν κ΄λ¦¬ μ¬λ¬ μ»΄ν¬λνΈ κ°μ 곡μ λλ μνλ₯Ό λ³΄λ€ μ½κ² κ΄λ¦¬νκ³ μν νλ¦ μμΈ‘ κ°λ₯ λ¨λ°©ν₯ λ°μ΄ν° νλ¦μν(state)κ° λ³κ²½λ λλ§λ€ νΉμ ν λ°©λ²(mutations)μ ν΅ν΄μλ§ μν λ³κ²½νλλ‘ κ°μ νμ¬ μ ν리μΌμ΄μ
μ μν λ³κ²½μ μΆμ νκ³ λλ²κΉ
νκΈ° μ½κ² λ§λ¦μν μμΈ‘ κ°λ₯μ±μνλ₯Ό λ³κ²½ν λ νμ λͺ
μμ μΈ λ³μ΄(mutations)μ ν΅ν΄μλ§ λ³κ²½ κ°λ₯ μ½λμ λͺ¨λν κ°λ
μ± λμ΄κ³ κ° λͺ¨λμ λ
립μ μΌλ‘ κ°λ° λ° ν
μ€νΈ 볡μ‘ν μν κ΄λ¦¬λ₯Ό κ°λ¨νκ²μ»΄ν¬λνΈ κ°μ μν 곡μ λλ λΉλκΈ° μμ
(API νΈμΆ)μ κ΄λ¦¬νλ κ²μ 볡μ‘μ± κ°μ Vuex Store κ΅¬μ± mo..
FE
Vue λ¬Έλ² μ 리 1Vue2 κΈ°μ€μΌλ‘ μ 리 1. μΈμ€ν΄μ€μ λΌμ΄νμ¬μ΄ν΄ β΄οΈ μΈμ€ν΄μ€ μμ± // main.jsimport Vue from 'vue';import App from './App.vue';new Vue({ render: h => h(App),}).$mount('#app'); μμ±λ μΈμ€ν΄μ€λ μ ν리μΌμ΄μ
μ μ£Όμ κ΅¬μ± μμλ‘ λ°μ΄ν°μ λ©μλλ₯Ό κ΄λ¦¬νκ³ DOMκ³Όμ μνΈμμ© μ²λ¦¬ β³οΈ μ£Όμ μμ± λ° μ΅μ
λ°μ΄ν° (Data) : Vue μΈμ€ν΄μ€μ λ°μ΄ν°λ data μ΅μ
μ ν΅ν΄ μ μλλ©° λ°μμ±μ κ°μ§ π λ°μ΄ν°κ° λ³κ²½λλ©΄ DOMμ΄ μλμΌλ‘ μ
λ°μ΄νΈλ¨new Vue({ el: '#app', data: { message: 'Hello, Vue!' }}); λ©μλ (Methods) : Vue..
FE
Vueλ νλ‘ νΈμλ κ°λ°λꡬ μ€ νλ κ°λ²Όμ΄ ν¬κΈ°μ μ§κ΄μ μΈ λ¬Έλ²π Virtual DOMμ μ¬μ©νμ¬ λ³κ²½λ λΆλΆλ§ μ
λ°μ΄νΈνκ³ νμν μ΅μνμ DOM μ‘°μμ μννμ¬ λΉ λ₯Έ λ λλ§ μλμ ν¨μ¨μ μΈ μ
λ°μ΄νΈ κ΄λ¦¬ μ 곡 μ체μ μΌλ‘ μν κ΄λ¦¬ λκ΅¬μΈ Vue jsx λ΄μ₯π μ ν리μΌμ΄μ
μ μν κ΄λ¦¬λ₯Ό μν 곡μ μν κ΄λ¦¬ λΌμ΄λΈλ¬λ¦¬ νμ΄μ§ μ νμ μν κΈ°λ₯μΈ Vue js Router μ 곡 π νμ΄μ§ κ°μ μ νκ³Ό URL κΈ°λ°μΌλ‘ λ·°λ₯Ό λμ μΌλ‘ λ‘λ©νκ³ κ΄λ¦¬κΈ°μ‘΄ htmlκ³Ό μ μ¬ν Template νμ μ 곡κ°λ° λ°©μμ λ¨μν¨π λμ μΈ νμ μν΄ v-if λ¬Έλ²λ§ μ 곡 λ°μμ± (Reactivity)λ°μ΄ν° κ°±μ νλ©΄ νλ©΄λ λ°λ π οΈ Vue λꡬν¨ν€μ§ κ΄λ¦¬μ : npm, yarn Vue CLI : μ μν Vue.js ..