반응형 Vue19 🛎 vuex 모듈화 🗝 vuex 모듈화 하는 이유 기존에 모듈화를 사용하지 않고 했을때 사이즈가 점점 커짐에 따라 관리가 힘들어지는 단점이 생김 그리하여 업무 성격에 맞게 모듈화를 해야겠다는 필요성을 느낌 🎁 기존 방식에서 모듈화 방식을 바뀔때의 모습 기존방식 모듈화방식 위 방식으로 했을때 처음에는 구조를 잡기가 어렵지만, 좀 더 체계적으로 관리가 된다는 장점이 존재한다. 🎊 vuex 모듈화 구조 |---store | |---modules | |---moduleA.js // moduleA작성 | |---moduleB.js // moduleB작성 |--index.js // 모듈 등록 📮 moudleA 구조 소스 const moduleA = { namespaced: true, state: () => ({ obj1: {}, }).. 2023. 1. 18. 🐅 vee-validate 적용 🎍vee-validate? vee-validate는 vue에서 validation을 편하게 도와주는 라이브러리이다. 이번 프로젝트에 적용시켜보았다. 그 전에는 script에 굉장히 if~else가 많아서 유지보수에 굉장한 어려움이 있었다. 그리하여 간단한 validation을 소개시켜 주고자 한다. 👌vee-validate 세팅 https://github.com/eorjs37/vue3_vee_validate 은 여기서 세팅하는 것을 확인 할 수 있다. 🏣 Form으로 validation 체크 하기 구조는 아래와 같다. 크게 "Form" 컴퍼넌트으로 감싸고 "Form" 안에 "Field" 컴퍼넌트를 넣는다. 위 구조를 코드로 작성하면 아래와 같다.(참고로 css는 작업을 편하기 하기 위해 boostrap를.. 2022. 8. 7. ⚓ Vue Slot으로 테이블 구현 🚆 slot slot은 컴퍼넌트를 추상화 시키기위해 사용되는것으로 보인다. 추상화 시킴으로써 재사용할 수 있다는 장점이 있다. 이번에는 slot을 사용하여 table을 구현하는 방법을 해보았다. 🚩 table thead slot으로 만들어보기 table의 thead를 구현해볼 것이다. table은 전역에서 사용하지만, thead,tbody만 내용이 다르다는 것이 있어서, thead,tbody를 추상화 해볼것이다. //Slot.vue 위와 같이 "" 이 부분을 추상화 시켜놓았다. 아래코드는 구현에서 어떻게 구현했는지 보여주는 코드이다. No 상품명 가격 slot에서 선언한 name="header"를 구현부분에서는 위와 같이 #header로 구현하였고 #header 코드 안에 th에 들어가는 부분을 구현하였.. 2022. 5. 31. 🤖 vue auto routing + 네비게이션 가 import { createRouter, createWebHistory } from 'vue-router' import routes from 'vue-auto-routing' import { createRouterLayout } from 'vue-router-layout'; import store from '../store'; const RouterLayout = createRouterLayout(layout => { return import('@/layouts/' + layout + '.vue') }) const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ { path: '/', component: .. 2022. 5. 5. 이전 1 2 3 4 5 다음 반응형
