내일배움캠프 D+32

유제협·2021년 10월 16일
0

TeamProject

팀프로젝트를 하다 TIL을 못써서 좀 늦게 작성 하였다.

이날 구현한 것은 마커 생성, 생성 마커 클릭 동작 실행, 이미지 업로드 확인

동작

우 클릭으로 좌표에 업로드하면 해당 위치에 마커가 생성되고 그 마커를 누르면 업로드한 이미지를 확인할 수 있게 해 주었다.

작성과정

1) 마커 무한 생성 해결
  • 기존에는 지도에서 좌 클릭하면 마커와 info 박스가 생성되고 우측엔 이미지 저장 및 업로드 정보 창을 띄워주는 동작으로 좌 클릭을 여러 번 하면 그 개수만큼 마커가 생성되는 오류가 발생하였다. 그래서 이 부분은 일단 좌 클릭은 카카오 맵 사이트에서 찾아보니 우 클릭을 지원해 주어서 바로 수정하였다. 그리고 마커가 계속 생성되는 건 생성되는 마커들을 저장해 주는 리스트를 마커를 클릭해주는 함수 내에서 가장 처음에 그 리스트를 지워주는 것으로 해결하였다.
2) 업로드 이미지 GET
  • 이전에 이미지를 업로드하는 것은 완성하였고 이제 GET으로 이미지를 가져와야 한다. 일단 첫 번째 index.html에서 현재 클릭한 마커의 좌표값(lat, lng)을 app.py로 보내주어 db의 좌표(lat, lng)와 비교하여 맞는 것만 다시 보내주게 해주었다. 그리고 두 번째 가져온 사진들을 for 문을 돌려 해당 위치의 id에 tamp_html로 추가해 주었다.
3) 업로드 시 마커 생성
  • 업로드 post를 보낼 시 마커 생성 함수를 만들어 새로 마커를 찍어주고 해당 마커는 다른 배열을 만들어 저장해 주고 다시 파일이 동작하면 위 get으로 가져온 좌표값을 기준으로 마커를 지도에 생성해 주었다.
4) 병합
  • 내가 만드는 파일에서는 기능적으로 이미지 post, get 동작에 관한 것을 구현하였고 이 기능을 팀원 분들의 파일에 병합하기 시작하였다. 내 기능은 지도에 새로운 위치에 마커와 이미지 정보들을 올려주는 것뿐이었지만 팀 프로젝트에서는 이미 찍혀있는 마커에 이미지를 넣어줘야 하는 것으로 추가 작업이 필요해서 TIL도 늦게 작성하고 잠도 쪼개면서 작업하고 있었다.

-기능 만드는 것보다 다른 파일에 병합하는 과정이 더 어렵다는 걸 느꼈다.-

0개의 댓글