코딩하는 둥둥

요구사항 swiper가 스와이핑될 때마다 swiper 외부 요소의 값도 변경되는 로직을 구현하기위해 swiper의 index값을 스와이퍼 외부에서 사용할수 있도록 해야했다. 구현 슬라이드의 인덱스를 변수에 저장해, 그 변수를 활용해 외부 요소의 값을 변경하도록 구현하려고했다. 기존에 스와이핑 될때마다 css를 변경하는 로직을 slideChange에서 구현했기때문에 마찬가지로 swiper index도 slideChange에서 realIndex를 사용해 변수로 넘겨주고자했다. 이때 activeIndex가 아니라 realIndex를 사용한 이유는 loop:true를 사용했기때문에 activeIndex가 현재 슬라이드 순서와 달랐기때문이다. activeIndex : 현재 활성 슬라이드의 인덱스 번호 ※ loop..

mask-image 이미지를 마스킹(마스크 적용) 이미지 마스킹(마스크) 🔗https://en.wikipedia.org/wiki/Masking_(art) 필요한 부분만을 칠하기 위해 불필요한 부분을 원하는 형태로 가리는것 이미지의 특정 영역에만 효과가 적용되도록 효과가 적용되지 않을 부분과 구분해 주는 것 얼굴을 숨긴다는 의미의 마스크에서 파생 포토샵의 클리핑 마스크와 같은 효과 Masking (art) - Wikipedia From Wikipedia, the free encyclopedia Masking tape being peeled off of a canvas, to reveal the protected, unpainted area below In art, craft, and engineering,..

type: Number을 지정하고 문자열 값을 넘기면 발생하는 오류 type 지정시 부모 컴포넌트는 정적인 값일때도 v-bind를 해줘야 한다. 나의 경우 v-bind(:)가 빠져서 발생한 오류였다. References. https://negabaro.github.io/archive/vuejs-props

[vue-router] Router must be called with the new operator. Uncaught TypeError: Cannot read properties of undefined (reading 'install') vue create 프로젝트명으로 개발 환경 구현중 발생한 오류이다. 결론적으로 말하면 vue2를 사용할 경우에는 vue-router3버전을 사용해야 한다. vue2로 프로젝트를 만든 후에 npm install vue-router을 사용해 vue-router을 설치했는데, 이 과정에서 자동적으로 vue-router4버전대가 설치되었다. References. https://velog.io/@k_jihye92/Vuevue-router-cannot-read-propertie..

[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. 'test'라는 속성이 선언되지 않았는데 화면에 렌더링 되려고 했습니다. data나 methods에 변수를 선언해 주지 않고 화면에 렌더링 하려고 해서 발생한 오류 methods에 변수를 선언해 주지 않아서 발생했기때문에 변수 선언 후 오류가 뜨지 않았다. References. https://joshua1988.github.io/web-development/vuejs/common-error-cases/

웹 페이지 내에서 원하는 elements에 접근하는 방법 getElementById 요소에 id값이 있을 경우 사용 가능 id : unique값 스크립트가 간단할때는 괜찮지만 이름이 충돌할 가능성이 있기때문에 추천하는 방식이 아님 코드만 보고 변수의 출처를 알기 힘듬 querySelectorAll 요소의 자식 요소 중 주어진 css 선택자에 대응하는 모든 요소를 반환 :hover나 :active와 같은 가상 클래스에도 사용이 가능 document.querySelectorAll(':hover') : 마우스 포인터가 위에 있는(hover 상태) 요소 모두를 담은 컬렉션이 반환 querySelector 주어진 css 선택자에 대응하는 요소 중 첫 번째 요소를 반환 해당하는 요소를 찾으면 검색을 멈춤 eleme..

className 과 classList className class 문자열 전체를 변경할 수 있다. element.className = 'class명' : class 문자열 전체가 class명으로 변경됨 classList 클래스 하나만 추가하거나 제거하고 싶을때 사용한다. element.classList.add('class명') : 기존 class 속성을 유지한 채로 새로운 class를 추가 element.classList.add/remove('class명') : 기존의 class 속성은 유지되며, 인자로 사용된 class 값만 삭제 element.classList.toggle('class명') : 특정 동작에 따라 class값이 추가/삭제. class값이 있을 경우 해당 class값을 삭제하고 fals..

요구사항 슬라이드의 오른쪽에 그라데이션/페이딩 효과 주기 해결 방법 https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel mask속성에서 linear-gradient사용하기 .swiper-container { mask-image: linear-gradient(to right, white 90%, transparent 97%); } References. https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel

🔗 https://sir.kr/qa/479420 처음에는 중앙정렬로 잘 노출되다가 슬라이드를 하나 넘기면 위치가 이상해진다. swiper 슬라이드 가운데 정렬 > SIR 이런 슬라이드 형태를 구현하고자 하는데요 [code] var edtSldCnt = new Swiper(".edtSldCnt", { slidesPerView : 'auto', slideToC sir.kr 위 링크와 같은 형태의 슬라이드를 구현하려고 했고, 같은 형태의 오류가 발생했다. 링크에서는 slideChange로 슬라이드 이동 시 active 슬라이드의 이미지 크기를 다시 원래대로 돌려주는 방법을 사용해보라는 답변이 달렸지만, 나의 경우 이미 slideChange를 통해 acitve 여부에 따라 이미지의 크기를 변경하고 있는 상태였다..

watchOverflow: true와 loop:true를 함께 사용하기 요구사항 슬라이드가 한 개일때 페이지네이션과 버튼 보이지 않도록 구현 → watchOverflow: true 슬라이드가 여러개 있을 때 마지막 슬라이드에서 스와이프 시 첫 슬라이드로 이동 → loop:true Swiper Options watchOverflow: true : 슬라이드가 1개일때 pager와 button 숨김 loop:true : 슬라이드 반복 여부. 위 요구사항을 구현하기 위해 watchOverflow: true와 loop:true를 같이 사용하려고 했는데 watchOverflow: true와 loop:true는 같이 사용할 수 없었다. 두 옵션을 같이 사용할 경우에는 watchOverFlow가 동작을 멈추는 문제가 ..