Vue/vue3+vuex 6

vue ec2 베포중 unknown disableHostCheck 에러

https://github.com/webpack/webpack-dev-server/issues/4142 options has an unknown property 'disableHostCheck'. · Issue #4142 · webpack/webpack-dev-server Bug report Actual Behavior devServer: { port: 3001, disableHostCheck: true, headers:{'Access-Control-Allow-Origin':'*'} }, Expected Behavior don't have error How Do We Reproduce... github.com 위글을 보고 해결했다 정확히 같은 오류 였다 disableHostCheck: true, => a..

Vue/vue3+vuex 2022.08.25

Vue 페이징/검색 만들기 뒤로/앞으로가기 버튼대응하기

프로세스 -백엔드 호출 함수 구축->watch로 라우터변경감지->백엔드 호출 함수 호출 1.페이지 정보를 받아오는 함수를 만든다 -this.$store.dispatch('basicStore/getInfolist', { url: url});을 호출해 store의 state를 바꿔준다 2.페이지교체버튼/검색버튼을 만든다 -this.$router.push(changeUrl);를 이용해 url를 변경해준다 3.watch로감지 watch로 router변화를 감지후 변경된다면 페이지 정보를 받아오는 함수를 호출한다 나는 $route가 안되면서사진 처럼 '$route'했더니 됐다 결과 작업 브랜치 https://github.com/novb1492/SUPERMAN_FRONT_ADMIN/blob/feature/produ..

Vue/vue3+vuex 2022.08.18

vue3 watch를 활용하자

매장정보를 조회 할 수 있는 페이지를 만들고 있었다 매장등록과 매장정보(수정)은 같은 컴포넌트를 사용한다 여기서 문제가 생겼다 구조 StoreDetailPage.vue에서 StoreDetail컴포넌트를 호출하고 그안에 editor/카카오지도 컴포넌트가 있다 문제 매장정보조회시 정보들을 가져다 뿌리는데 editor/카카오지도 컴포넌트가 먼저 호출되서 순서가 뒤바뀐다 해결 여러방법을 시도 했다 그리고 watch로 해결했다 action에서 api통신후 Mutaions에서 state값을 바꿔준다 그떄 randDone이라는 변수를 true한다 기본값은false StoreDetail컴포넌트에 watch를 건다 randDone이 변경 된다면 watch가 감지한다 그러면 그때 editor호출 및 resultPost를 ..

Vue/vue3+vuex 2022.08.12

Vue3 여러개 store 관리하기 store 별로 actions/getter 호출하기

https://velog.io/@skyepodium/VUEX-store-%EC%97%AC%EB%9F%AC-%EA%B0%9C%EB%A5%BC-%EB%AA%A8%EB%93%88%ED%99%94%ED%95%98%EA%B8%B0 VUEX store 여러 개를 모듈화하기 vuex 에서 store를 여러개 만들고 쉽게 사용해봅시다. velog.io 아주 좋은 글을 발견했다 만들면 끝! 이제 저 이름들을 붙혀서 불러주면된다 참고로 store에 namespaced: true,가 있어야한다 ...mapGetters와this.$store.dispatch에 각 store이름을 붙혀서 호출하면된다

Vue/vue3+vuex 2022.07.19

Vue 카카오 지도 만들기

1.개발자센터에서 자바스크립트 키를얻는다 2.카카오 지도를 호출한다 자세한설명 -https://apis.map.kakao.com/web/guide/ 코드 1.index.html에 sdk호출을 세팅한다 - 2.지도를 호출한다 -mount 시킨다 vuex문법이 있는데 vue로 하려면 this.setDomSize(window.innerWidth,window.innerHeight) =>new window.kakao.maps.Map(mapContainer, mapOption); 바꿔서 사용하면된다 저 'init' 액션 안에 동일한 코드가 있다 여기서 중요한점 window.kakao로 해줘야 index.html의 sdk에서 가져올 수있다 3.사이즈 지정과 리사이즈 이벤트 mount에 이벤트 리스너를 걸어 놓았다 r..

Vue/vue3+vuex 2022.06.29