킹바구니 🦜

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..

Failed to resolve component: swiper-slide Failed to resolve component: swiper-container swpier.js는 vue, react 버전 가이드를 따로 제공하는데 그대로 따라하다가 어느순간 보니 해당 버전들은 앞으로 버전에서는 삭제될테니 web component 형태로 쓰라고 하더라. 근데 자꾸 저 경고창이 뜨는데다 구글에서는 방법도 안나와서 발동동하다가 찾아냄. 1. vite 설정 변경 export default defineConfig(({ mode }) => { return { plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag === "swiper-..

원래 공식문서에서는 swiper.slideNext() 이렇게 쓰면 된다는데 안되는 이유가 뭘까 vue3이라서 그런가 아무튼 다른 방법을 찾아보았음. 1. swiper에 ref 걸어서 swiper가져오기 다음 const swiperRef = ref(); const slideNext = () => { // ref요소를 탐색해서 메소드 호출 swiperRef.value.$el.swiper.slideNext(); };

vuex에서 getters, mutations를 작성한 후 각종 파일에서 store 변수를 활용하여 써놓은 함수를 불러오는데, 만약 위와 같은 에러가 나타난다면 두가지를 확인해봐야함. 1. namespaced 유무 const state = { // ... } const actions = { // ... } export default { namespaced: true, // 여기 state, actions } 2. 모듈화 되어있다면 이름을 써주었는지 확인 // index.js import user from "./user.js"; export default createStore({ modules: { // 이런식으로 모듈화 되어있다면 user, } }); // user.js const states = { n..

가끔 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..