λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

πŸ“  archive29

Vue.js μ—μ„œ λ°˜μ‘ν˜•(Reactivity)을 λ‹€λ£¨λŠ” 방법 πŸ“Œ λ“€μ–΄κ°€λ©° 이번 ν¬μŠ€νŒ…μ—μ„œλŠ” Vue.js 의 λ°˜μ‘ν˜• μ‹œμŠ€ν…œμ— λŒ€ν•΄ μ•Œμ•„λ³΄κ³ μž ν•©λ‹ˆλ‹€. 졜근 μ§„ν–‰ν•˜κ³  μžˆλŠ” μ‚¬μ΄λ“œ ν”„λ‘œμ νŠΈμ—μ„œ μ»΄ν¬λ„ŒνŠΈμ˜ data 에 변경을 ν•΄μ€˜λ„ props 둜 μžμ‹μ—κ²Œ 전달해쀀 값이 κ°±μ‹ λ˜μ§€ μ•ŠλŠ” λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. ν˜Ήμ‹œλ‚˜ ν•΄μ„œ μ°Ύμ•„λ³΄λ‹ˆ μ΄λŠ” reactivity λ₯Ό κ³ λ €ν•˜μ§€ μ•Šμ•„ λ°œμƒν•œ λ¬Έμ œμ˜€μŠ΅λ‹ˆλ‹€. πŸ“Œ λ°˜μ‘ν˜•μ΄λž€? Vue.js μ—μ„œλŠ” μ–΄λ–»κ²Œ μ»΄ν¬λ„ŒνŠΈ μΈμŠ€ν„΄μŠ€μ˜ data 속성 값을 μΆ”μ ν•˜μ—¬ 화면에 λžœλ”λ§μ„ 해쀄 수 μžˆλŠ” κ²ƒμΌκΉŒμš”? μ΄λŠ” λ°”λ‘œ 각 μ»΄ν¬λ„ŒνŠΈ μΈμŠ€ν„΄μŠ€λ§ˆλ‹€ ν• λ‹Ήλœ watcher λ₯Ό 톡해 λ³€κ²½ 사항을 좔적 및 κ΄€λ¦¬ν•˜κΈ° λ•Œλ¬Έμ— κ°€λŠ₯ν•œ μΌμž…λ‹ˆλ‹€. Vue.js λŠ” μΈμŠ€ν„΄μŠ€ μ΄ˆκΈ°ν™” λ‹¨κ³„μ—μ„œ data 의 λͺ¨λ“  속성에 getter / setter λ₯Ό μΆ”κ°€ν•˜μ—¬ 관리 및 갱신에 ν•„μš”ν•œ μ—°μ‚°.. 2021. 3. 2.
Vue-router λ„€λΉ„κ²Œμ΄μ…˜ κ°€λ“œ ν™œμš©ν•˜κΈ° πŸ“Œ Navigation Guard? μ „μ—­ κ°€λ“œ router.beforeEach λ₯Ό μ‚¬μš©ν•΄μ„œ λͺ¨λ“  λΌμš°ν„° 객체에 κ°€λ“œλ₯Ό μ μš©ν•©λ‹ˆλ‹€. λ”°λΌμ„œ λ„€λΉ„κ²Œμ΄μ…˜μ΄ 트리거 될 λ•Œλ§ˆλ‹€ μ–΄λ–€ λΌμš°νŠΈκ°€ λ°œμƒν–ˆλŠ”μ§€ μ•Œ ν•„μš”κ°€ μžˆλŠ”λ° 이λ₯Ό μœ„ν•΄ λ‹€μŒ μ„Έ 가지 인자λ₯Ό μ „λ‹¬λ°›μŠ΅λ‹ˆλ‹€. to : to 에 ν•΄λ‹Ήν•˜λŠ” 라우트 객체둜 λ‹€μŒμ— 이동 from : ν˜„μž¬ λΌμš°ν„°λ‘œ 였기 μ΄μ „μ˜ 라우트 next : 훅을 ν•΄κ²°ν•˜κΈ° μœ„ν•΄ ν˜ΈμΆœλ©λ‹ˆλ‹€. λ™μž‘ 방식은 next 에 μ „λ‹¬ν•˜λŠ” μΈμžμ— 따라 λ‹¬λΌμ§‘λ‹ˆλ‹€. next() ν•¨μˆ˜μ˜ 경우 ν˜ΈμΆœλ˜μ§€ μ•ŠμœΌλ©΄ 훅이 μ ˆλŒ€ λΆˆλŸ¬μ§€μ§€ μ•ŠμœΌλ―€λ‘œ λ°˜λ“œμ‹œ κ°€λ“œ λ‚΄μ—μ„œ ν˜ΈμΆœν•΄μ•Όν•©λ‹ˆλ‹€. const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // .. 2021. 3. 1.
Vue.js와 Vuetify ν™œμš©ν•΄μ„œ axios둜 파일 μ—…λ‘œλ“œν•˜κΈ° Vuetify? VuetifyλŠ” Vue.jsλ₯Ό μœ„ν•œ λ””μžμΈ ν”„λ ˆμž„μ›Œν¬μž…λ‹ˆλ‹€. 이번 ν¬μŠ€νŒ…μ—μ„œλŠ” Vue.js와 Vuetify λ₯Ό ν™œμš©ν•΄μ„œ μ„œλ²„μ— νŒŒμΌμ„ μ—…λ‘œλ“œν•˜λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄κ³ μž ν•©λ‹ˆλ‹€. ν•΄λ‹Ή ν¬μŠ€νŒ…μ€ 사전에 파일 μ—…λ‘œλ“œλ₯Ό μ²˜λ¦¬ν•  수 μžˆλŠ” λ°±μ—”λ“œ μ„œλ²„κ°€ κ΅¬μ„±λ˜μ–΄μžˆλ‹€λŠ” μ „μž¬ν•˜μ— μ§„ν–‰λ©λ‹ˆλ‹€. Vuetify File input μ»΄ν¬λ„ŒνŠΈ μ‚¬μš© Vuetify μ—μ„œλŠ” 기쑴의 HTML input νƒœκ·Έ 역할을 ν•˜λŠ” μ—¬λŸ¬κ°€μ§€ μž…λ ₯ μ „μš© μ»΄ν¬λ„ŒνŠΈλ“€μ΄ μ‘΄μž¬ν•©λ‹ˆλ‹€. 이쀑 μ €ν¬λŠ” 파일 μ—…λ‘œλ“œλ₯Ό μœ„ν•œ v-file-input νƒœκ·Έλ₯Ό ν™œμš©ν•©λ‹ˆλ‹€. Product.vue v-file-input μ»΄ν¬λ„ŒνŠΈ v-file-input 은 μ„ νƒλœ νŒŒμΌμ— 변경이 μžˆλ‹€λ©΄ change 이벀트λ₯Ό 톡해 μ›ν•˜λŠ” μž‘μ—…μ„ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€. ν•΄λ‹Ή 이벀트.. 2021. 3. 1.
Vue.js 쀑첩 λΌμš°ν„° (Nested Router) μ‚¬μš©ν•˜κΈ° μ›ν•˜λŠ” URL νŒ¨ν„΄ μ‡Όν•‘λͺ° ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ λ‹€μˆ˜μ˜ μ»΄ν¬λ„ŒνŠΈλ‘œ 이루어진 ν™”λ©΄ λžœλ”λ§μ΄ ν•„μš”ν•œ 상황이 μƒκ²ΌμŠ΅λ‹ˆλ‹€. μœ μ € κ΄€λ ¨ 정보듀을 μœ„ν•œ λŒ€μ‹œλ³΄λ“œλ₯Ό κ΅¬ν˜„ν•˜λ©΄μ„œ ν™”λ©΄ 섀계λ₯Ό λ‹€μŒκ³Ό 같이 ν–ˆμŠ΅λ‹ˆλ‹€. /board /board/wishlist +------------------+ +-----------------+ | board | | board | | +--------------+ | | +-------------+ | | | main | | +------------> | | wishlist | | | | | | | | | | | +--------------+ | | +-------------+ | +------------------+ +-----------------+ 이λ₯Ό μœ„ν•΄μ„œλŠ” νŠΉμ • URLλ³„λ‘œ ν™”λ©΄.. 2021. 3. 1.
Vue-Router history mode 지원을 μœ„ν•œ Django μ„€μ • Vue-router와 Django Vue.jsμ—μ„œ vue-router λ₯Ό μ‚¬μš©ν•  경우 기본적으둜 URL에 # κ°€ ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€. ν•΄μ‹œλ₯Ό μ œκ±°ν•˜κΈ° μœ„ν•΄μ„œλŠ” νžˆμŠ€ν† λ¦¬ λͺ¨λ“œλ₯Ό μ μš©ν•΄μ•Ό ν•˜λŠ”λ° Djangoλ₯Ό λ°±μ—”λ“œ μ„œλ²„λ‘œ 두고 κ·ΈλŒ€λ‘œ μ‚¬μš©ν•  경우 λ¬Έμ œκ°€ μƒκΉλ‹ˆλ‹€. πŸ’‘ 문제점 λ§Œμ•½ Vue.jsμ—μ„œ νžˆμŠ€ν† λ¦¬ λͺ¨λ“œλ₯Ό μ μš©ν•œ ν›„ npm build λ₯Ό 톡해 μƒμ„±ν•œ λΉŒλ“œ νŒŒμΌμ„ Django의 index.html 둜 μ„€μ •ν•œ λ‹€μŒ 직접 URL둜 νŠΉμ • νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•  경우 404 μ—λŸ¬λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŠ” Vue.jsκ°€ SPA(Single Page Application)μ΄λΌμ„œ Django μ„œλ²„λŠ” ν΄λΌμ΄μ–ΈνŠΈμ—μ„œ μ‚¬μš©ν•˜λŠ” νŠΉμ • URL νŒ¨ν„΄μ„ μ•Œ 수 μ—†λŠ” μƒν™©μ—μ„œ λ²Œμ–΄μ§„ μΌμž…λ‹ˆλ‹€. κ·Έλ ‡λ‹€λ©΄ Djangoμ—μ„œ νžˆμŠ€ν† λ¦¬ λͺ¨λ“œλ₯Ό.. 2021. 3. 1.

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”