Front-end2 [Framer-motion] Drag and Drop 목차1. Reorder_① _② 2. Drag and Drop 예제_① 예제 1 (Framer-motion / Reorder 기능 활용한 버전)_② 예제 2 (Reorder 사용하지 않고, DnD 구현)📔 Reference이번에 공부한 것은 Framer-motion 라이브러리의 Reorder라는 기능을 활용해서아래와 같은 Drag and Drop 애니메이션을 구현해보는 방법에 대해 공부해봤다. 위의 예시는 실제로 Framer-motion의 Reorder 기능을 활용해서 만든 DnD 예제이다.예제에 대한 설명에 들어가기 앞서서, Reorder에 대한 설명부터 하겠다.1. ReorderFramer Motion의 Reorder는 드래그되는 목록을 만드는데 사용할 수 있는 컴포넌트로과 두 가지 컴포넌트를 사.. 2025. 4. 30. MPA와 SPA 1. MPA, Multiple Page ApplicationMPA, Multiple Page Application은 말 그대로 여러 개의 페이지로 구성된 애플리케이션이다.MPA라는 개념은 SPA라는 개념이 등장하고 나서,이 둘을 구분 짓기 위해 생겨난 개념으로 SPA 등장 전에 만들어졌던 대부분의 웹 사이트들은 MPA 방식으로 만들어졌다. 우리가 자주 사용하는 Naver도 SPA 등장 전에 만들어진 웹 사이트로MPA, Multiple Page Application에 가깝다고 할 수 있다.기본적으로 MPA 방식으로 만들어진 웹 사이트는 아래 이미지와 처럼 동작한다.클라이언트 (사용자) 측에서 서버에게 HTML 파일을 요청, 서버는 HTML 파일을 응답으로 전송한다.그리고 이를 전송받은 클라이언트 측에서 해.. 2024. 2. 26. 이전 1 다음
