킹바구니

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(); };

class 이름을 그냥 쓰거나, 변수로 넣거나, 조건을 걸거나 하는 경우가 있는데 헷갈려서 정리를 해보았음. 추가될 수 있음 1. 기본 그냥 html에 대놓고 쓴다면 쌍따옴표 안에 써주면 된다. 2. 변수 변수라면 중괄호 안에 써주면 된다. 나같은 경우 module.scss를 style이라는 이름으로 import했기에 className에 { style.container } 이렇게 써줌. 3. 기본 + 변수 조합버전은 중괄호 안에 백틱을 넣고 변수는 달러중괄호를 써서 써주면 된다. 아니면 조건문같은 경우 이런 방법도 있다. + 좀 더 고차원적인 방법 const classProperties = { "main-class": true, // 일반 string인 경우 styles: true, // 변수인 경우 }..

next.js에 손을 조금 대보기로 했다. 그런 의미에서 기본적인 설치부터 scss 및 폰트 적용하는 방법까지 정리하겠음. 1. 설치 npx create-next-app@latest 터미널에 입력하면 폴더 이름 뭘로 할건지, 타입스크립트 쓸껀지 물어보는데 알아서 선택해서 엔터엔터해주면 된다. 2. 실행 npm run dev 3000번으로 실행이 된다. 3. scss 설정 npm install --save-dev sass 깔아주고 그냥 scss파일 하나 만들어서 쓰고 해당 컴포넌트에 가서 import해서 써주면 된다. 3-1. 여러 scss 파일을 하나로 설정 및 공통 css로 만들기 하지만 보통 공통 css가 있기때문에 적용하는 방법을 설명해보자면, 기본적으로 생성되어있는 styles 폴더에 각종 scs..