Skip to content

12.16.금

johan edited this page Jan 25, 2023 · 1 revision

react-beautiful-dnd 라이브러리와 Trello API를 사용해 트렐로 서비스를 개선하는 프로젝트를 하다보니 자연스레 해당 기술을 사용하기 위해 영어로 된 공식 문서를 많이 읽게 되었다.

수능 공부할 때 이후로 가장 영어를 많이 읽고 있는 시기이다.

여러 에러 상황이 많았지만 하나하나 해결하면서 프로젝트가 어느정도 완성에 가까워지는 것을 시시각각 눈으로 확인할 수 있는게 즐겁다.

특히 깃허브에서 이슈, 프로젝트, 마일스톤 등 진행 과정을 정리하는 기능들을 사용하면서 내가 어느정도 진행중에 있고 앞으로 뭘 해야하는지에 대해 정리하면서 프로젝트를 진행하니까 이런 이슈들을 하나하나 해결하면서 좀 더 보람찬 개발을 하고 있다.

기록을 잘 해놓는게 정말 중요하다~

  • 드래그 앤 드랍을 구현했다.
  • JSON.parse(JSON.stringify()) 방식이 아닌 내장 함수 structuredClone() 함수로 깊은 복사
  • 드래그 앤 드랍 상태 변경을 위해 cards 상태를 컴포넌트로 끌어올림
  • data fetching 이후로 렌더링 시점을 보장하기 위해 불리언 값인 isLoading 상태를 추가
  • 드래그 앤 드랍의 핵심 콜백 함수인 onDragEnd 내부 기능들을 구현
  • json-server로 테스트하던 http 요청들을 모두 실제 Trello API 요청으로 수정
  • react-beautiful-dnd 라이브러리를 대신 할 hello-pangea/dnd 설치
  • 불필요한 json-server 삭제

Clone this wiki locally