2023.04.09) 항해 9주차 회고 (협업, 실전 프로젝트)

7주차의 미니프로젝트 주차와 8주차의 클론코딩 프로젝트 주차를 지나서

어느새 실전 프로젝트 주차가 되었다.

 

7,8주차에는 일주일동안 만들어내야 해서 뭔가 바쁘게 지나갔던 것 같다.

실전 프로젝트는 그만큼 스코프도 넓고 실전이고 팀 리더이기에 따라오는

부담감과 책임감은 있지만, 기간이 길어서 그런지 촉박하거나 불안하지는 않다.

오히려 해야할 것들을 하나하나 해결해 나가며 얻는 뿌듯함이 더 크달까??

 

7주차에는 협업이라는 것에 들떠서 했던 것 같고,

8주차에는 클론 답게 똑같이 만드는 과정에 허덕였던 것 같고,

이번엔 약간 지친 상태에서 시작을 한 것 같다.

 

하지만 팀원들과 기획을 하고 프로젝트를 진행 하면서 오히려 힘을 얻어간 것 같다.

 

이번 실전 프로젝트에서는 드래그 앤 드롭으로 space를 구성하고 space의 요소를 원하는 위치로 옮기며 space를 수정하고

space를 계층형으로 관리하는 작업을 맡았다. 물론 추가될 것 같지만..!!!

주차 시작하고 이틀은 꼬박 아이디어회의를 했다.

아이디어를 픽스하고 와이어 프레임 구상에 api 명세서까지 했더니 이틀이 뚝딱 사라졌다.

코드를 본격적으로 짜기 시작한 것은 월요일부터였다.

지금 보니 6일동안 굉장한 발전을 한 것 같다.

 

select 영역에 있는 요소를 드래서해서 드롭할 때 복제되어 드롭되게 만들어야 했다.

첫 번째 문제는 드래그 앤 드롭 자체가 처음이었다는 것이다.....

라이브러리도 있고 다양한 방법이 있었지만, 내장 api인 드래그 앤 드롭 기능을 사용하여 시도하였다.

두 번째 문제는  기존 요소를 드래그 앤 드롭하는 기능은 잘 되었지만 복제한 요소를 드래그 앤 드롭 기능을 구현 시,

드래그 후 드롭 시 드롭하려는 곳보다 아래쪽에 드롭이 되는 문제점을 발견하였다.

여러 시도를 해본 결과 요소를 클릭 시 그 요소의 데이터를 가져와서 움직인 곳의 좌표를 다시 저장하도록 해서 해결했다.

세 번째 문제는 드롭이 가능한 영역을 설정하고 그 영역이 아닌 곳에 드롭을 하면 드롭이 되지 않게 설정을 해야 했다.

복제한 요소를 드롭할 때에는 잘 동작하였지만, 복제된 요소를 다시 드래그하여 드롭할 때에는 영역 구분없이 드롭이 되었다.

이를 해결하는 것이 제일 힘들었던 것 같다.

해결 방안으로 두 가지를 생각했었다. 드롭할 때에 설정한 영역이 아니면 드롭이 되지 않게 할 건지,

아니면 드래그 조차 안되게 할 건지의 방법 중에서 후자를 선택했다.

space를 구성할 때 이렇게 하는 것이 사용자가 이용 시 편하게 사용할 수 있을 것이란 생각이 들었기 때문이다.

설정한 영역인 부모 영역에 제한을 두어 부모 영역의 내부에서만 드래그 되도록

부모 영역의 상하좌우 좌표를 기준으로 자식 요소의 드래그 제한을 걸어주었다.

이 부분에서 반응형으로 제한이 걸려 있던 게 아니어서 반응형으로 동작하도록 변경해주었다.

네 번째 문제는 좀 치명적인 문제였다. 요소 복제 시 복제된 요소 위에 드롭하게 되면 드롭하는 요소가 두개로 복제되어 엉뚱한 위치에

생성이 되는 문제였다. 이를 해결하기 위해 기존에 복제되어 있던 요소와 위치가 겹친다면 드롭이 되지 않도록 처리해주었다.

기존에 복제된 요소의 위치와 크기를 구한 후 겹쳐지면 드롭이 되지 않도록 조건을 걸어주었다.

 

 

 

이러한 드래그 앤 드롭 기능을 구현하고 서버와 연결을 시도하였다.

아직은 space CRUD는 다 되었지만, 요소들은  조회, 추가, 삭제 까지만 되었다.

추가도 중복 이슈가 있어서 다시 잡아야 한다!