킹바구니 🦜

swiper의 webcomponent를 활용하여 슬라이드를 구현하고 있었는데 슬라이드 앞뒤이동 버튼 색만 변경하려고하는데 !important를 줘도 아무리 안먹어서 뒤져보다가 정리함. 1. injectStyles 활용 먼저 html태그 swiper-container에 ref를 설정해주고 init값을 false로 둬야함. 그리고 watch에 ref가 들어왔을때 위와 같은 코드를 넣어주고 initialize()를 해주면 잘 적용된다. 참고로 onMounted는 안먹히니께 주의! 이게 공식 설명서에 있긴한데 묘하게 빠진 부분이 있어서 안먹힌단말이지..

ionic 아이오닉이라고 안드, 아이폰같은 동작을 지원하는 웹앱 툴킷인데(react, vue같은 웹 프로젝트를 앱 형식으로 말때 사용), 제스쳐를 사용하고 싶은데 gesture.enable()만 하면 자꾸 아래와 같은 오류가 떠서 짜증났는데 답은 다음과 같다. 아니 공식예시문서에는 마운트 코빼기도 안보이더니~~~~~ Cannot read properties of undefined (reading '__zone_symbol__addEventListener') 1. onmounted 이후 작성 const viewRef = ref(); onMounted(() => { const gesture = createGesture({ el: viewRef.value, onMove: (ev) => onMoveHandler..

가끔 v-for를 돌리면서 필요한 부분을 차례대로 ref에 넣어줘야할 때가 있음(일일히 ref="input1"이렇게 설정하는게 아니고). 이걸 dynamic ref라고 하는데 아래와 같이 넣을 수 있음. 1. ref에 함수 사용 {{ item }} // script 쓰는 부분 const divs = ref([]); // 이부분을 활용하여 업데이트될때 꼭 리셋해줘야한다고 함 onBeforeUpdate(() => { divs.value = []; }); 이러면 divs에 순서대로 착착착 들어감. 참고로 약간 뭐 이런식으로 좀 nested하게 넣고싶다면 [ [el, el], [el, el], ] 따로 함수를 빼서 이렇게 적용해도 된다. {{ item }} const divs = ref([]); onBefore..

보통 부모의 함수를 자식에서 쓸수있는 방법은 많이들 나오는데, 자식의 함수를 부모가 쓰는건 잘 찾아도 안나오고~ 찾아도 내가 쓰는 setup function버전으로는 안나와서 또 허공주먹질하다가 밥먹고오니까 갑자기 머리가 돌아가서 발견함. vue는 기본적으로 vue2, vue3(근데 setup function), vue3(근데 setup script) 이렇게 방법이 나뉘다보니 그거 찾느라 시간이 더 걸리는거같음... 1. setup function 버전에서 쓰는법 setup() { const active = () => { // something } return { active // 한번 return을 해줘야함 } } 자식 컴포넌트는 이렇게 있는데 일단 해당 함수를 return해줘야함 setup() { c..

router를 활용하여 다른 페이지로 이동하면서 데이터를 보내는 방법이 있는데 배가 아파서 정리해보았음. 1. 동적으로 보내기 // 기본 router.push('/user') // name으로 보내기 [2] router.push({ name: 'user' }); // params와 함께 보내기 [3] router.push({ name: 'user', params: { userNo: 1 } }) 특히 [2]번과 [3]번은 라우터에 아래와 같이 별도로 name을 정해줘야한다. { path: "/user", name: "user", component:() => import("@/views/user/user.vue") } 여기서 주의할것은 [3]의 경우(params이랑 보낸거) 이런 경고창이 뜨게된다. 연결된 ..

child component에 어떤 데이터를 전달해서 화면에 띄우는데, 저 데이터가 db와 통신 후 들어오는 거라면 시간차가 발생하기때문에 child에서 watch를 써서 나중에 값이 들어오면 전달해줬었음. 근데 markRow로 child component를 화면에 띄웠더니 잘되던 watch가 안먹혀서 열심히 찾아보다가 해결함. 1. watch함수 변경 // 기존 watch(props, (n, o) => (user.value = props.data)); // 변경 watch(() => { if (props.data) { user.value = props.data; } }, callback()); --- vue에서 markRow가 뭔가 싶다면 아래 포스팅 확인! [vue3] child component를 ..

이놈의 라이브러리는 왜케 간단한것도 바로바로 안나오는지 모르겠다 진짜 1. enableBrowserTooltips 추가 여기서 header에 주고싶다면 2-1. headerTooltip 추가 { headerName: "아이디", field: "userId", headerTooltip: "(아이디=이메일 주소임)", }, 아니면 cell에 주고싶다면 2-2. tooltipValueGetter 추가 { headerName: "이름", field: "userName", tooltipValueGetter: function (params) { return params.data.fullName; } }, https://www.ag-grid.com/javascript-data-grid/column-properties..

vue3에서 쓰는 에디터인데 module을 붙이는 과정에서 위와 같은 경고창이 자꾸 뜸. 에러는 아니다만 거슬려서 한참을 찾아서 겨우 없앴는데 문제는 다른 에러([Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.)가 생기긴함.. 아직 방법 못찾음.. 1. debug 값 변경 import { QuillEditor } from "@vueup/vue-quill"; QuillEditor.props.globalOptions.default = () => { return {debug: 'error'} }; ..

가끔 상황에 따라서 같은 태그에 변수값을 넣어야할때가 있음. 나같은 경우 10%라는 값을 나타내기 위해 span에 style로 width: 10%를 줬어야했는데 그럴때는 이렇게 쓰면 된다. 1. 따옴표 안에 백틱쓰기 안에 들어가는 completionRate는 ref변수라서 style앞에 :붙여줬음

actions에 promise를 반환하는 함수가 있고, 그걸 dispatch로 받아서 데이터 요청을 하고 있었는데 죽어도 비동기가 안되길래 찾아봤는데 for문으로 하면 되더라. 이유는.. 몰러... // 원래 하던거 let promises = arr.map((m) => await store.dispatch("user/add", userNo)); // 바꾼거 let promises = []; for (let i = 0; i < arr.length; i++) { let p = await store.dispatch("user/add", userNo)); promises.push(p); }; await Promise.all(promises).then()