최근에 Drag and Drop(DnD) 기능을 직접 만들기를 시도했었다. 하지만 생각보다 고려해야 할 사항들이 많았고, 그렇게 삽질해서 만들어진 결과물은 완성도가 너무나도 부족했다...😂 싸늘하다.. 가슴에 비수가 날아와 꽂힌다.. 하지만 걱정하지마라. 라이브러리는 우리보다 빠르니까. 결국 기존에 작업하던 코드를 삭제하고 구글링을 통해 참고할만한 글을 찾던 중 DnD 기능을 제공해주는 라이브러리가 있다는 것을 알게 되었다. 그래서 오늘은 라이브러리로 DnD 기능을 구현하는 예제를 만들어보려고 한다. 0. DnD Library 먼저 React 환경에서 DnD 기능을 제공해주는 라이브러리는 대표적으로 3개가 있다. 라이브러리 각각의 특징을 간단하게 정리하면 다음과 같다. react-draggable rea..
오늘은 현재 시간을 실시간으로 나타내주는 시계 기능과, 검색창에 텍스트 입력 후 검색 버튼을 누르면 구글 검색창으로 연동되는 기능을 만들었다. 코드가 간단하니 빠르게 가보자. 0. Main ./pages/Main.tsx import Clock from "components/main/Clock"; import GoogleSearch from "components/main/GoogleSearch"; const Main = () => { return ( ); }; export default Main; GoogleSearch 컴포넌트와 Clock 컴포넌트를 Main 페이지에 불러온다. 1. Clock ./components/Clock.tsx import { useState, useEffect } from "re..
오늘부터 개인 프로젝트를 진행하면서 구현하는 기능이나 에러 해결 등 도움이 될만한 것들을 글로 적어 기록해보려고 한다. 그 첫 번째 시간으로 Todo List를 간단하게 구현해보자. CSS 없이 기능만을 구현하는 것이 이번 글의 목표이기 때문에 디자인은 프로젝트 CSS를 전체적으로 만질 때 다룰 예정이다. 디자인 보기 힘들어도 이해해주세요..😂 - 프로젝트 구조 📦components ┗ 📂todo ┣ 📜TodoInput.tsx ┣ 📜TodoEdit.tsx ┣ 📜TodoItem.tsx ┣ 📜TodoList.tsx ┗ 📜Todos.tsx 📦pages ┣ 📜_app.tsx ┗ 📜index.tsx 📦redux ┣ 📂slice ┃ ┗ 📜todoListSlice.ts ┣ 📜hooks.ts ┗ 📜store.ts 📦s..
