Day 29 개발일지 Web

개발일지

Drag & Drop 페이지 구현 시작

추가 구현하기로 했던 Drag & Drop 페이지 구현 ! 드디어 개발을 시작했다. 이전에 스프린트에서 GitHub Project를 구현할 때 해봤지만 그 때는 API를 사용해서 구현했던 기억이났다.
시작하기 전에 이번에는 API를 사용하지 않고 구현해보고 싶다는 생각이 들어서 Drag와 Drop 컴포넌트를 만드는 방법을 찾아봤다 !

//Drag
function startDrag(e: React.DragEvent<HTMLDivElement>) {
  e.dataTransfer.setData('text/plain', dataItem);
  e.dataTransfer.effectAllowed = 'move';
}
<Wrapper draggable onDragStart={startDrag}>
  {children}
</Wrapper>

//Drop
<div onDragOver={dragOver} onDrop={onDrop}>
  {children}
</div>

컴포넌트를 구현하기 위해 필요한 것들은 이렇게 끝났다 !! 이제 중요한 것은 어떤 데이터를 사용할 것이고, Drag에서 보내주는 dataItem을 어떻게 지정할지 선택해야하고, Drop해줄 컴포넌트를 어떻게 할지 정하는 일이 남았는데 ...
Drop해줄 컴포넌트를 Grid로 컴포넌트를 구성해서 나눠줄지 Position을 absolute로 지정해줄지에 대한 고민이 시작됐다.
결국은 필요한 공간만을 사용하는 absolute로 지정해주기로 결정! 하기로 하고 학습을 위해 필요한 SVG 파일들을 몇개 만들어놨다.

Swagger 을 왜 이제야 공부했을까...

Swagger를 설치는 일찍 하였으나 전혀 활용하지 않고서 단순히 API 문서 그 이상 이하로 사용하지 않았다.. Swagger의 많은 설정들을 거치고 나니 PostMan 보다 1억배 편한 갓 툴이라는 것을 알았다.. 사실 이제와서 Swagger를 전부 동기해주는 작업은 이미 완료된 항목들이라 부담스러웠지만 그래도 iOS 백엔드에는 적용할만 했다. 따라서 적용을 하면서 Swagger를 통해 API 문서를 공유하는 편함을 얻을 수 있었다. 다양한 설정에 대해서 작성하는 문서를 하나 만들어 보는것이 좋을 듯 하다

개인회고

진구

드디어 프론트에서 뭔가를 보여줄 것을 개발하고 있어서 그런지 구조도 잘 설계해보고, 이것저것 하고싶은 욕심들이 생겨났다. 하지만 시간이 많이 남아있지도 않기 때문에 집중해서 필요한 것들만 먼저 개발을 진행하고 이후에 다시 돌아오는 것을 생각하고 개발을 진행해야할 것 같다는 생각이 들었다.

석암

Swagger를 통해 API 문서 공유 향상도 좋지만 너무 늦어서 아쉽다. 이러한 문서 툴을 좀더 일찍 잘 활용했다면 개발에 있어서 훨씬 수월하지 않았을까 라는 생각이든다. 남은 부분도 잘 마무리 하고 리펙토링을 좀 만져봐야 겠다.