노마드코더 리액트 마스터
-
[Framer Motion] animation의 최강자 Framer Motion 알아보기, Animation/Variants/Gestures/Drag프론트엔드 개발자가 될거야./라이브러리 2023. 1. 8. 20:11
Framer Motion는 Framer가 제공하는 리액트용 애니메이션 라이브러리이다. Framer Motion을 잘 이용한다면 Drag이벤트, Scroll이벤트 등 다양한 애니메이션들을 쉽게 표현해 낼 수 있다. 노마드코더 리액트 마스터를 통해 접할 수 있었는데 CSS로 했었으면 코드를 몇시간동안 고민고민해서 써야지 구현되는 효과들이 단 한줄로 구현되는 것을 보고 정말 놀라웠다... 아래는 Framer Motion 사이트이다. 여러 docs들도 있으니 보고 참고해도 좋을 것 같다. https://www.framer.com/motion/ Production-Ready Animation Library for React | Framer Motion Framer Motion is a production-read..
-
[react-beautiful-dnd] 칸반보드 만들기, react-beautiful-dnd 상세설명프론트엔드 개발자가 될거야./라이브러리 2023. 1. 7. 16:11
노마드 코더 강의를 들으며 react-beautiful-dnd 라이브러리를 이용하여 칸반보드를 만들었다! 간단한 메모기능이 있고 메모를 다른 칸반보드로 옮길 수 있다. 추후 로컬스토리지에 저장 및 로드 기능, 삭제기능, 칸반보드 생성 기능도 추가할 것이다!! 이 게시물에는 칸반보드를 만들면서 알게 된 react-beautiful-dnd에 대해 정리해보려고 한다. react-beautiful-dnd npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd // 타입스크립트라면 install 필요! DragDropContext 드래그 앤 드롭을 가능하게 하고 싶은 앱의 한 부분이다. - onDragEnd 함수 : 유저가 드래그를 끝낸 시점에..