vue 17

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

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

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

Vue 페이징시 checkbox 유지하기

이전까지와 다르게 페이지가 이동해도 checkbox값을 유지시켜야 할 일이 생겼다 솔직히 귀찮아서 구축안하고 그냥 다른 방법으로 넘긴 적이 있는데 이렇게 된거 만들었다 1.checkbox의 id값을 담을 배열을 하나 만든다 2. 페이지 이동시마다 id를 줘서 확인한다 - index of를 이용해서 확인 3. 체크박스 클릭 시 들어있으면 삭제 없으면 추가를 해주면 된다 checkState -페이지 이동시마다 체크박스 배열에서 확인하는 함수 nextTick -vue에서 자체 제공하는 기능이다 해당 태그가 생성된 뒤에 실행시켜준다 checkcheckedArr -해당 요소의 위치를 반환하는 함수 indexof은 자바스크립트 기본 제공 기능이다 없다면 -1 반환해준다 clickCheck -체크박스 클릭시 작동하는..

Vue/vue2 2022.04.01

SpringBoot 장바구니 만들기(미완성버전)

미완성 사이드바가 가리긴 하는데 일단 전략을 바꿨다 구축하고 리팩터링 하는 걸로 그리고 애초에 장바구니에서 주문이 되는게 아니라 결제 페이지가 있어야하는데 일단 한꺼번에 만들었다 1. 수량조절 장바구니 고유 id값을 전달해 준다 요청받은 id/개수를 서버로 준다 서버 장바구니 id로 조회 basketVo basketVo=basketDao.findById(basketId).orElseThrow(()->utillService.makeRuntimeEX("존재하지 않는 장바구니 품목입니다", "tryUpadte")); 업데이트 basketVo.setCount(count); 가격 재계산 ((productVo)productService.getProduct(basketVo.getProductId()).get("mes..

Jang_bo_go 2022.03.07

Vue 페이징 만들기 router watch

url을 이용해서 페이징을 구현하는 흐름을 만들어 야한다 흐름 다음/이전 버튼을 클릭-> url을 변경-> 재 랜더링 1. 다음 이전 버튼에 url을 바꿔주는 로직을 작성한다 -vue의 라우터가 들고 있는 기능을 활용한다 2.url이 변경된다 -url이 변경되면 부모 컴포넌트 혹은 현재 컴포넌트에 watch로 감지한다 3. 재 랜더링 -주석은 무시하면 된다 내 로직 기준 해당 url 자식 컴포넌트의 함수를 호출해 재 렌더링을 시킨다 -주석은 무시하고 그냥 다시 서버에 요청하는 로직을 호출한다 새로고침 없이 페이지 이동이 되고 뒤로/앞으로 가기 버튼/이탈 후 뒤로/앞으로 가기시에도 잘 대응된다 훨신 좋게 소스를 바꿨다 https://cordingmonster.tistory.com/266?category=1..

Vue/vue2 2022.02.15

Vue 부모자식 컴포넌트 데이터 교환 함수호출

vue를 사용하다 보면 컴포넌트 통신은 필수적으로 일어난다 그때 사용하면된다 -refs, props 부모-> 자식 1.props 주로 초기 변수 전달을 위해 사용했다 줄 때(부모) v-bind:변수 이름:변숫값 v-bind->: 줄여서 표현 가능하다 받을 때(자식) props안에 변수 이름을 쓰고 사용할 때는 this. 변수 이름으로 사용한다 2.refs 주로 자식 함수를 호출하기 위해 사용했다 사용법 this.$refs. 태그에 지정한 ref값. 지정 컴포넌트 안에 함수 3.emit 자식 -> 부모 1. 자식 this.$emit('명칭', '전달할 변수') 2. 부모 v-on:명칭="호출할 함수" 아주 쉽게 컴포넌트 통신을 할 수 있다

Vue/vue2 2022.02.15

vue.js 동적 라우팅+동적 컴포넌트

사장님 페이지를 만들고 있는 중이다 (원래 사이트를 분리해야 하지만 토이 프로젝트이니까) 사이드 바를 구축하고 이제 사이드바 메뉴를 만들고 클릭이 이뤄지면 옆에 내용이 바뀌면 된다 근데! 새로고침이 거슬렸다 그래서 제일 큰 컴포넌트 안에 경로에 따라서 컴포넌트를 호출하는 방법이 없을까? 고민하다가 찾았다 동적 라우팅 동적 라우팅은 아주 간단하게 이뤄진다 {path:'/companyPage/:id',component:companyPage}, /경로/:값 :문자만 앞에 붙히면된다 받을때 this.choose=this.$route.params.id; .파라미터 이름 으로 꺼내서 쓰면된다 동적컴포넌트 아래글이 제일 이해가 잘갔다 https://become-a-developer.tistory.com/entry/%..

Jang_bo_go 2022.01.15

vue.js ckeditor5 연동하기

https://cordingmonster.tistory.com/175?category=1052748 vue.js 맛보기!/ckeditor5/router/axios/async/await 점검사항 1. 기본지식 습득 2.ajax는 어떻게 해야 하는가(적용) 3. 페이징은 어떻게 이뤄지는가(적용) 4. 부트스트랩 연동 법(적용) 5.ckeditor5 연동 법(적용) 6. 포트번호변경(적용) 7.async/await(적용) 8.ht cordingmonster.tistory.com 이글에 써놓긴 했는데 좀 부족한 거 같기도 해서 좀 더 정갈하게 다시 쓰려고 한다 1.npm으로 케디터를 다운로드한다 (공식 홈페이지 아니면 구글에 많이 나와있다) 2.main.js에 등록해준다 (ck는 무시하고 CKEditor만보면 ..

Jang_bo_go 2022.01.08