분류 전체보기24 Vue에서 Swiper 옵션 바인딩으로 정리하기 Vue에서 Swiper 옵션 바인딩으로 정리하기 https://swiperjs.com/demos#autoplay Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com Swiper 공식 사이트의 demos를 보면 옵션들을 태그 안에다가 덕지덕지 끼워넣는 모습을 볼 수 있습니다. 그런데 옵션이 많아지다보면 코드가 매우 길어지고, 같은 옵션을 다른 슬라이드에 적용할 때도 중복이 발생하여 불편합니다. Slide 1 Slide 2 Slide 3 Vue에서는 이 긴 옵션들을 바인딩하여 코드의 가독성을 높히고, 더 .. 2022. 2. 6. Vue3에서 swiper 쓰는법 (오류 해결법) Vue3에서 swiper 사용법 (오류 해결법) swiper는 슬라이드를 만들때 사용하는 라이브러리로 많은 사랑을 받고 있습니다. 대부분의 사이트에서 슬라이드를 구현할 때 스와이퍼를 사용하죠. swiper의 공식 사이트에 가보면 기본 js 뿐만아니라 react, angular, vue의 demo 코드도 제공하기 때문에 초심자들도 따라 배우기가 쉽습니다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 문제 그런데 공식 사이트에서 제공하는 demo 코드.. 2022. 2. 5. Swiper 양쪽 끝에서 드래그시 밀림 막기 Swiper 양쪽 끝에서 드래그시 밀림 막기 swiper를 사용하다보면 맨 왼쪽이나 맨 오른쪽 슬라이드에서 드래그 시 슬라이드가 살짝 밀리는 모습을 볼 수 있습니다. 경우에 따라 이게 많이 거슬리는 경우가 있는데, 이 현상을 막을 수 있는 스와이퍼 옵션이 있습니다. https://swiperjs.com/swiper-api Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com swiper api를 보시면 resistanceRatio라는 옵션이 있는데, 이 옵션을 사용하면 양쪽 끝에서 밀리는 정도를 조절할 수 .. 2022. 1. 30. 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내릴 때 요소가 화면에 등장하는 모션을 한번 만들어 보겠습니다. 스크롤 관련된 모션이나 기능을 넣을 때는 보통 'ScrollMagic'이라는 라이브러리를 많이 사용하는데 오늘은 그런거 없이 순수 자바스크립트 기능만으로 모션을 구현해 보려고 합니다. 스크롤 모션 구현에 필요한 Web API는 크게 addEventListener와 scrollY, offsetTop 세가지로 각각 무슨 역할인지 알아보고 최종 예제 코드를 살펴봅시다. addEventListener() addEventListener는 특정한 이벤트가 일어나.. 2022. 1. 25. Vue2에서 clearTimeout & clearInterval 하는법 Vue2에서 clearTimeout & clearInterval 하는법Vue를 이용해서 프로젝트를 만들다보면 'setTimeout'나 'setInterval' 함수를 사용하는 경우가 꽤 자주 생깁니다. setTimeout은 일정 시간이 지나면 인자로 전달된 callback 함수를 실행하는 함수로 중간에 취소하고 싶으면 clearTimeout을 해줘야 합니다다.setInterval은 일정 시간을 텀으로 두고 주기적으로 인자로 전달된 callback 함수를 실행하는 함수인데, 원하는 만큼 실행이 되면 조건을 통해 clearInterval을 해줘야 합니다.이 두 함수는 사용보다 해제를 잘 하는 것이 더 중요한데요. 해제를 할 땐 각각 'clearTimeout'과 'clearInterval' 함수를 사용하면 됩.. 2022. 1. 19. (Vue 3) non-emits event 경고 (Vue 3) non-emits event 경고 Vue로 프로젝트를 개발하다 보니 팝업창을 띄울 때마다 런타임시 이상한 경고창이 뜨는 것을 발견했다. Extraneous non-emits event listeners (closePopup) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 왜 이런 경고창이 뜨는 것일까? 내가 진행하던 프로젝트에서.. 2022. 1. 16. 이전 1 2 3 4 다음
