Frontend/UI&UX

react-toastify

react-toastify https://www.npmjs.com/package/react-toastify react-toastify React notification made easy www.npmjs.com 리액트에서 toast 알림을 편하게 띄우게 할 수 있는 3rd party 라이브러리이다! 아래 명령어로 설치를 하자! yarn add react-toastify 사용법 우선 react-toastify의 css를 적용하기 위해 아래처럼 임포트 해야 한다. import 'react-toastify/dist/ReactToastify.css'; 컴포넌트를 불러온 후 이벤트에 toast() 메서드를 이용해서 toast 알림을 편하게 띄울 수 있다! import { toast, ToastContainer }..

Swiper 만들기

React에서 마우스 이벤트를 사용해서 Swiper 만들기. mousedown, mousemove, mouseup 이벤트 사용! clicked란 부울 변수를 사용해서 clicked가 true일 때(드래그 중)만 mousemove 이벤트가 발생해서 swiper가 이동하게 한다! swiper의 postion을 relative로 주고 드래그로 이동한 좌표와 드래그를 시작한 좌표의 차만큼 top, left 속성을 줘서 mousemove 이벤트에서 swiper가 화면에서 움직이게 한다! 기능 좌우로 일정이상 드래그하지 않은 후 마우스를 때면 제자리로 돌아간다. 오른쪽으로 일정이상 드래그한 후 마우스를 때면 서서히 오른쪽으로 서서히 사라진다. 왼쪽으로 일정이상 드래그한 후 마우스를 때면 서서히 오른쪽으로 서서히 사..

window.scrollTo() + ref

window.scrollTo() 어떤 페이지에서 위로가기 화살표를 누르면 맨 위로 이동하거나 메뉴에서 어떤 버튼을 누르면 아래로 내려가버리는 버튼을 눌러본 경험이 있을 것이다. window.scrollTo()은 스크롤을 움직여주는 window의 내장 함수이다. window.scrollTo() 사용법 아래처럼 window.scollTo()의 파라미터로 x, y의 좌표를 직접 넣을 수 있고 ... { window.scrollTo(0,0); }}>위로가기 ... 딕셔너리의 형태로 top, left의 위치를 넣어줄 수도 있다. ... { window.scrollTo({top: 0, left: 0}); }}>위로가기 ... 위와 같이 버튼에 이벤트를 달아서 버튼을 클릭했을 때 맨 위로 이동하게 만들어보자. imp..