so woon!

학습일 : 2023. 04. 26 이번엔 draggable을 array로 구성해보고 placeholder를 적용해보고자 한다. map함수를 써서 Draggable을 새로운 배열에 담아 반환해준다. {toDos.map((toDo, index) => ( index를 넘겨주고 index={index}를 작성해주고 draggableId 또한 toDo로 주도록 하겠다. magic을 오른쪽 클릭해서 Type Definition을 확인해보면 placeholder 라는게 있는데, 이것은 droppable이 끝날 때 두는 무언가라서 사이즈가 이상하게 변하는걸 방지해준다. Board 안 맨 밑에 {magic.placeholder} 를 추가해주면 리스트에서 어떤 것을 빼내더라도 리스트의 사이즈는 그대로 유지하면서 안에 있는..

학습일 : 2023. 04. 26 드래그 앤 드롭에서 dragHandleProps의 역할은 dragHandleProps를 적어준 부분이 handle이 되어서 그 부분을 쥐고 그래그 앤 드롭을 할 수 있게 되는 것이다. 아래 코드로 보았을 때는 span 안에서 dragHandleProps을 주었기 때문에 span인 별모양이 핸들이 되는 것이다. import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; function App() { const onDragEnd = () => {}; return ( {(magic) => ( {(magic) => ( ★ one )} {(magic) => ( ★ two )} )} ); } export..

학습일 : 2023. 04. 25 droppable에서 주는 첫번째 argument는 provided이다. 이건 magic이라고도 불린다. 첫번째 argument이기만 하면 원하는 대로 불러도 된다. 따라서 일단 나는 magic 이라고 적어주도록 하겠다. (magic) 을 적어주고 밑에 ul태그 안에 {...magic.droppableProps} ref={magic.innerRef} 를 적어주도록 한다. import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; function App() { const onDragEnd = () => {}; return ( {(magic) => ( {() => One} {() => Two} )..

학습일 : 2023. 04. 25 이번에는 드래그 앤 드롭 리스트를 만들어보고자 한다. 예를 들자면, todo를 작성해 준것이 있다면 그것을 todo, doing, done으로 옮길 수 있게 해볼 것이다. 이를 구현하기 위해서 react-beautiful-dnd를 사용할 건데, 아주 유명한 라이브러리이고 유용하고 사용하기에 쉽다고 한다. 여기에 recoil도 연습해보도록 하자. https://www.npmjs.com/package/react-beautiful-dnd react-beautiful-dnd Beautiful and accessible drag and drop for lists with React. Latest version: 13.1.1, last published: 8 months ago. ..

학습일 : 2023. 04. 20 저번글에 이어서 이번 글에서는 클릭시 카테고리를 바꾼 다음 새로운 배열을 만들어 지금의 카테고리 외의 버튼만 나올 수 있게 만들어 보도록 하겠다. 원리를 먼저 살펴보자면 food 배열 그리고 Index가 될 target target의 앞부분, 새로 넣어줄 todo, target의 뒷부분을 원소로 가질 새로운 배열을 위해 slice를 이용하여 새로운 원소로 교체해 볼테다. 이렇게 하면 target이었던 mango와 똑같은 자리를 새 원소로 성공적으로 교체하게 되었다. front와 back을 구하고 그 사이에 새로운 원소를 넣는 것이다. 이 방법을 그대로 적용하여 해보도록 하자. food 배열은 oldToDos라고 생각하면 되고 target은 targetIndex라고 생각하..

학습일 : 2023. 04. 19 이번 글에서는 사용자들이 버튼을 이용해서 toDo의 카테고리를 바꿀 수 있는 기능을 추가해보고자 한다. 그리고 toDo의 카테고리에 따라서 알맞는 버튼만 보이게 할 것이다. 카테고리를 받아오고, 카테고리가 "DOING" 이 아닐 때만 DOING 버튼을 보여주도록 조치한다. import { IToDo } from "./atoms"; function ToDo({ text, category }: IToDo) { return ( {text} TODO {category !== "DOING" && Doing} Done ); } export default ToDo; 아래에도 똑같이 해주겠당. import { IToDo } from "./atoms"; function ToDo({ te..

학습일 : 2023. 04. 19 지금부터는 할 일을 완료할 수 있는 기능을 추가해보고자 한다. toDo의 상태를 바꿀 수 있어야 하니까 말이다. 클릭을 하면 TODO를 DOING이나 DONE으로 바꿀 수 있어야할 것이다. (반대로도 가능해야 겠고.) 그 기능을 구현하고 나면 selectors라는 개념에 대해 공부해 볼 것이다. selectors를 이용하면 state로부터 데이터를 만들 수 있다. 우선 수정할 부분이 있다. 코드를 이제 좀 간결하게 만들어 보기 위해 form 을 따로 빼서 components 폴더 밑에 CreateToDo.tsx 파일로 따로 분리시켜주고 li를 따로 빼서 ToDo.tsx로 분리, atom도 atoms.tsx로 분리 하겠음. toDos는 필요없다. 수정말 할 수 있으면 되기..

학습일 : 2023. 04. 18 이제 todolist를 본격적으로 만들어보도록 하자. 타입스크립트에게 toDo가 어떻게 생겼는지 알려주기 위한 인터페이스를 먼저 작성한다. toDoState는 toDo들의 배열이라는 것을 알려주도록 하겠다. category는 'DONE', 'DOING', 'TODO'만 받을 수 있다고 알려주도록 한다. 이제 ToDo를 만들면 모든 string이 아닌, 명시된 3개 중 하나의 string만을 가져야 한다. interface IToDo { text: string; // id도 적어줌 id: number; category: "TODO" | "DOING" | "DONE"; } 이제 atom의 type이 ToDo의 배열임을 알려주도록 하자. atom 를 작성해준다. const t..