본문 바로가기

STUDY/LIBRARY4

[Swiper] 스와이퍼 이벤트 리스트 정리 이벤트 이름 설명 init 슬라이드 쇼가 초기화될 때 발생합니다. slideChange 슬라이드가 변경될 때 발생합니다. slideChangeTransitionStart 슬라이드 변경 트랜지션 시작시 발생합니다. slideChangeTransitionEnd 슬라이드 변경 트랜지션 끝날 때 발생합니다. slideNextTransitionStart 다음 슬라이드로 이동할 때 발생합니다. slideNextTransitionEnd 다음 슬라이드로 이동한 후 트랜지션 끝날 때 발생합니다. slidePrevTransitionStart 이전 슬라이드로 이동할 때 발생합니다. slidePrevTransitionEnd 이전 슬라이드로 이동한 후 트랜지션 끝날 때 발생합니다. slideChangeTransitionStar.. 2023. 5. 10.
타입 ORM (Type ORM ,Object Relational Mapping) Type ORM (Object Relational Mapping) 이란? Type ORM 은 NodeJS, Browser, Cordova, PhoneGap 등의 다양한 플랫폼에서 JS , TS와 함께 사용 할 수 있는 ORM 라이브러리 이다. 다른 ORM 과 달리 액티브 레코드 패턴 (Active Record Pattern) 과 데이터 매퍼 패턴(Data Mapper Pattern) 을 모두 지원하고, 작성할 수 있다. 액티브 레코드 패턴 (Active Record Pattern) 이란? 활성 레코드 접근 방식을 사용해, 모든 쿼리 메서드를 정의하고 모델 메서드를 사용하여 개체를 CRUD(생성, 조회,수정,삭제) 를 한다. 쉽게 말해서 모델 내에서 데이터베이스에 액세스 접근하는 방식이다. User 모델의.. 2023. 1. 3.
[Study] KakaoBank-gsap / 클론코딩 [ KakaoBank-gsap / 클론코딩 ] 사용 기술 HTML5 SCSS/ CSS javascript 주요 라이브러리 Swiper - 슬라이더 라이브러리 Font Awesome - icon [Gsap](https://greensock.com/gsap/) - 애니메이션 라이브러리 GSAP 이란? GSAP는 GrennSock에서 만든 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다. GSAP의 Tween을 만드는 방법 ( 기본 메서드) gsap.to() gsap.from() gsap.fromTo() 간단한 애니메이션(의 경우 위의 방법만 알면 쉽게 사용이 가능.. 2022. 11. 28.
[library] Swiper.js 편하게 슬라이드 캐러셀 구현하기 Swiper https://swiperjs.com 유명하고 더 편한 터치 반응형 슬라이더들도 많지만 (slick 등등..) 제이쿼리를 쓰지 않고 바닐라JS만을 가지고 사용이 가능하며, 무료로 사용이 가능하기에 프로젝트에 자주 이용 하고 있는 슬라이더 라이브러리다. React, Svelte, Vue, Angular 에서도 사용이 가능하다. 사용 방법 NPM 으로 설치하기 $ npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/css'; const swiper = new Swiper(...); CDN에서 사용하기 //CSS 파일 추가 //JS 파일 추가 기본적으로 설정해.. 2022. 11. 25.
728x90