클론코딩3 Next.js 시작하기 - Drag and Drop 만들기 (4) Draggable 지난 시간...지난 시간에는 draggable을 활용해서 list 카드 간 이동이 가능하게 만들어보았다. 이번에는 동일하게 todo 카드들이 자유롭게 draggable 할 수 있도록 만드는 방법을 시도해볼 것이다. 방법은 list 카드 이동과 동일한 방식이지만, 서로 다른 list 카드간 이동 또한 고려해야 하는 것이 차이점이다. todo draggable이번에도 우리가 해야 할 일은 draggable에 해당하는 함수들을 만들어주는 것이다. 기존에 handle 함수를 만들었던 것 처럼, 이번에는 todo handle 함수를 만들어보자. 먼저 아래의 state 함수를 만든다. 해당 state들은 list때와 같이 이동 전 위치와 이동 후 위치를 저장하는 용도이다. const [draggingTodoId,.. 2024. 8. 26. Next.js 시작하기 - Drag and Drop 만들기 (3) Draggable 시작하기...지난 시간에 indexedDB와 MSW를 활용하여 프론트엔드의 Todo를 추가할 수 있게 해보았다. 같은 방법으로 빠르게 List를 추가할 수 있는 기능을 만든 뒤, 대망의 Drag and Drop 기능을 구현해보자. 해당 DnD 기능은 라이브러리를 사용하지 않고 만들 예정이다. 어지간하면 라이브러리를 쓰는게 맞다. 빠르게 List 추가 기능 만들어보기Todo를 만들었을 때 사용법을 설명하였으니, List는 자세한 설명을 생략하겠다.//list를 추가하는 mutation 함수const list = async (data: { title: string }) => { const response = await axios.post("/list", data); return response.data.. 2024. 8. 18. Next.js 시작하기 - 간단한 Login 페이지 만들기 (4) React-Query React Query를 더 관리하기 좋게 만드는 법은 없을까?코드를 쪼갤 수 있을 만큼 쪼개고 관리하기 좋은 형태로 리팩토링하는 것은 어쩔 수 없는 프론트엔드 개발자의 고민이다. React-Query는 정말 좋은 기능들을 제공하지만, 많은 기능이 있는 만큼 코드가 굉장히 길어질 수도 있다. 어떻게 보면 React Query 또한 API 호출 함수와 같이 한 곳에 저장해뒀다가 필요할 때 마다 호출한다면 참 좋을 것 같은데, 더 나은 관리 방법은 없는 것일까? 기존의 React-Query를 개선해보자동일한 react-query문을 하나의 파일에서 필요할 때 마다 생성해서 사용하는 것은 코드를 길게 만들고 불필요한 반복 작업을 요구한다. 또한 기능이 변경될 필요가 있을 때, 해당 기능이 적용된 페이지마다 작업.. 2024. 7. 15. 이전 1 다음 728x90 반응형
