so woon!

학습일 : 2023. 05. 06 사용자로부터 뭔가를 입력받아 card 생성해보고자 한다. 이전에는 임의로 string array로 만들어줬었다. 이제 form을 만들어 보고자 한다. 터미널에 입력 후 설치 npm install react-hook-form form을 만들기 위해 react-hook-form에서 useForms를 import import { useForm } from "react-hook-form"; 인터페이스 작성 interface IForm { toDo: string; } form에게 인터페이스 적용 const { } = useForm(); useForm은 register와 더불어 setValue와 handleSubmit도 줌 const { register, setValue, hand..

학습일 : 2023. 05. 02 이번에는 useRef 에 대해 알아보도록 하자. reference는 react 컴포넌트를 통해서 HTML 요소를 지정하고, 가져올 수 있도록 한다. 다시말해, 자바스크립트로부터 HTML요소를 가져오고 수정하는 방법이다. 예를 들면, video를 가져와서 플레이를 시키거나 video.play(); 링크를 가져와서 클릭해 열거나 할 수 있다. a.click(); 이건 ReactJS에서 쓰는게 아니고 일반적인 자바스크립트에서 사용하는 것이다. input을 만들고 onClick을 만들어 주고 버튼을 만든다. 버튼에는 onClick이벤트를 준다. click me 그리고 버튼을 클릭했을 때 input에 포커스를 주도록 하자. const onClick = () => {}; 일단 먼저..

학습일 : 2023. 05. 02 DragabbleCard.tsx에서도 snapshot을 넘겨주고 오른쪽 마우스를 클릭하여 타입의 정의를 살펴보면 export interface DraggableStateSnapshot { isDragging: boolean; isDropAnimating: boolean; isClone: boolean; dropAnimation: DropAnimation | null | undefined; draggingOver: DroppableId | null | undefined; // the id of a draggable that you are combining with combineWith: DraggableId | null | undefined; // a combine tar..

학습일 : 2023. 05. 01 이번에는 snapshot의 draggingFromThis에 대해 공부해보도록 한다. snapshot의 타입 정의를 다시 보면, draggingFromThis 라는 것도 받는데, draggingFromThis는 이 보드를 떠난다는 것을 의미한다. 이 값은 DraggableId 이거나 undefined 가 되는데 Area에 넘겨줘보도록 하겠다. isDraggingFromThis가 True일 때, snapshot.isDraggingFromThisWith의 Boolean값을 받아올 것이다. snapshot.draggingFromThisWith이 string이든 뭐든 존재하기만 하면 true가 될 것이고 undefined거나 null이면 false가 될 것이다. 그리고 카드가 해..

학습일 : 2023. 05. 01 이번에는 여러개의 보드를 넘나들어 이동하여 재정렬을 할 수 있도록 구현해보고자 한다. -로직- 1. source board에서 item을 제거 2. target board로 가서 그곳에 item을 추가해준다. 서로 다른 보드 넘나들어서 재정렬하기 주석 참고function App() { const [toDos, setToDos] = useRecoilState(toDoState); // onDragEnd : 드래그가 끝났을 때 실행되는 함수 // destination : 드래그 끝나는 시점의 도착지 정보 // source : 드래그 시작 정보 - 움직임을 시작한 아이템의 index, droppableId를 알려줌 const onDragEnd = (info: DropResul..

학습일 : 2023. 04. 30 보드를 3개로 늘리면서 보드내에서 재정렬 하던 부분을 주석처리 해놓았었는데 다시 한번 구현해보고자 한다. 한개의 보드 내에서 드로그 앤 드롭 다시 구현하기 드롭할 때마다 onDragEnd 함수가 실행된다. 먼저, source의 droppableId가 destination의 droppableId와 같은지 체크해야 한다. 왜냐하면 아직 보드를 넘어다니지는 않고 한 보드 안에서 움직일 것이기 때문이다. const onDragEnd = (info: DropResult) => { console.log(info); const {destination, draggableId, source} = info; if(destination?.droppableId === source.droppa..

학습일 : 2023. 04. 29 저번 글에 이어서 이번에는 멀티 보드를 만들어 보고자 한다. 기존에는 보드가 1개였다면 이번에는 3개로 늘려볼 것이다. 일단 state 즉 default를 object로 변경해서 만들어주겠다. 이 object는 각각의 보드가 가질 id를 포함하게 될 것이다. to_do, doing, done 이렇게 세개의 보드를 만들어 주었다. import { atom } from "recoil"; export const toDoState = atom({ key: "toDo", // default를 기존의 배열에서 -> object로 변경해준다. default: { // to_do, doing, done 은 배열을 가진다. to_do: ["a", "b"], doing: ["c", "d"..

학습일 : 2023. 04. 28 이번에는 아이템을 드롭했을 때 재정렬 될 수 있도록 구현해보고자 한다. 이걸 위해 recoil로 돌아가서, todo state를 위한 atom을 만들도록 하겠다. key는 toDo, default는 이미 우리가 가지고 있던 그 배열을 쓰도록 하겠다. import { atom } from "recoil"; export const toDoState = atom({ key: "toDo", default: ["a", "b", "c", "d", "e", "f"], }); atom의 값을 가져오고 싶으면 useRecoilValue를 사용하면 됐었다. atom을 수정하는 것 까지 할려면 useRecoilState를 쓰면 된다. 드래그 해서 리스트를 재정렬하게 하려면 onDragEnd..