항해99 9주차(2021.4.26-5.2) WIL : 5주 과정 실전프로젝트 1주차, 지도API와의 싸움

우리 프로젝트의 이름 SFlash( Spot + Flash)로 디자이너분이 로고로 만드셨다. 확정된건 아니고 여러 디자인 시안중의 하나다.

1. 실전프로젝트에서 프론트엔드로서 내가 맡은 부분 : 카카오 지도 API를 이용해 목표 기능 구현하기.

이번 실전 프로젝트의 목표이자 가장 중요한 본질은, 지도상의 원하는 위치를 지정하고 그 위치에서 찍었던 자신의 사진을 게시물로써 올릴 수 있게 하는 것이다.  그 부분을 내가 맡아서 구현하게 되었다. 지도 API는 처음이고 공개된 소스코드를 이용하는 것도 처음이어서 어떻게 할지 감이 잡히지 않았다. 그렇지만 지난 미니프로젝트에서 다른 조 사람이지만 나와 같은 조를 두번이나 했던 리액트 능력자님이 지도 API를 이용한 기능을 구현한 코드가 있기 때문에 그걸 분석해서 시작점으로 삼고(시작점이라 쓰고 코드 약탈이라고 읽는다ㅋㅋㅋ 나는야 프로 코드 약탈자.) 시작하면 될거라는 생각으로 두려움을 통제하려고 했다. 그리고 이제 점점 코드 읽고 따라하는 걸 넘어서 슬슬 내 맘대로 '부려먹는' 경우가 많이 생겨서 이번에도 어떻게든 해낼 것 같았다. 

 

2. 카카오 지도 API  코드 분석 : 헤메기의 늪에 빠지다.

그렇게 담대한(?) 마음으로 시작했음에도, 첫 1주는 헤맴의 연속이었다. 카카오 지도 API가 제공하는 코드는 변수를 죄다 var로 지정해 놓았는데 이것부터 문제였다. 왜냐하면 나는 자바스크립트를 접하면서 변수는 거의 const로 통일해서 썼고 let을 어쩌다 쓰는 식으로 해왔는데 여기서는 대놓고 var 뿐이어서 이러는게 코드가 실행될 때 안전한 것인지 확신할 수 없었기 때문이다.  이제와서 생각해보니 const와 let은 나중에 등장한 변수형인데, 지도 api가 만들어질 때는 예전이니 var 변수형만 썼던것이 내려온 것이다 (카카오 지도 API 개발자들이 게으른 건지 legacy 코드가 지금도 잘 돌아가면 문제없이 쓰면 되는 사상이 있는건지는 알 수 없다). 그래도 코드를 실험해보니 var를 써도 잘 되고 const를 써도 잘 된다. 그리고 둘 다 사이 좋게 코드 블럭 내부에서 정의한 값을 외부에서 쓸 수 없었다. var는 함수단위 변수라서 코드블럭 내부든 외부든 되는것 같다고 알고 있었는데 아니었다(함수단위 변수래서 함수 안에서라면 코드블럭 내부 외부 여부를 가리지 않고 다 되는것 같다고 생각했던건데 아니었다. var를 많이 썼다면 알게 되었겠지만 주구장창 const만 쓰고 있으니 잘 몰랐다). 

물론 이것만 문제는 아니었다. 앞서 언급한 미니프로젝트를 지도 API로 했던 분의 git을 fork해서(라고 쓰고 약탈해와서라고 읽는다) 코드를 읽고 분석했지만 무얼 구현한 코드인지 감이 잡히지 않았다. 그래서 그분의 결과물 유튜브 동영상을 보고 분석도 하고, 그분과 같이 했던 리액트 분을 초빙해서 저 코드를 무엇을 구현하고 로직이 어떻게 되었는지 물어보기도 했다. 그래도 헤맸는데, 겨우 감을 잡은건 어느 분이 mockdata로 지도에 마커를 뿌리는 코드를 소개한 블로그를 읽고 나서였다.

velog.io/@bearsjelly/React-kakao-%EC%A7%80%EB%8F%84-%EB%9D%84%EC%9A%B0%EA%B8%B0-4-%EC%97%AC%EB%9F%AC%EA%B0%9C-%EB%A7%88%EC%BB%A4%EB%9D%84%EC%9A%B0%EA%B8%B0

React, kakao 지도 띄우기 #4 여러개 마커띄우기

이 블로그에서 소개한 코드를 따라 해보니 신기하게도 지정한 위도 경도 위치에 마커가 올라 갔다.  그렇게 감을 잡고 코드를 따라쳐보니 아, 이런 데이터를 서버로부터 받을 수 있게 한다면 나도 마커를 띄울 수 있겠다 감을 잡았다. 지금은 초기라서 서버와 연결은 시기상조라 서버로 받는 데이터를 가상으로 담은 mockdata 파일을 만들어서, 저 코드에서 하는대로 해서 연습해보자!라는 생각으로 다음과 같은 MarkerMockData.js 파일을 만들었다.

그리고 이 데이터를 저 블로그에 나온 코드와 카카오 지도 API 소스 코드로 내 코드를 만들어서 지도에다 뿌려주면

이렇게 된다. 와우!!!!!!!!!!!! 이게 되다니!!!!! 이렇게 막힌 걸 해결해서 오는 환희 때문에 코드 배우는 것에 중독되는 것 같다. 스트레스 해소에 이거 만한 게 없다. 이렇게 하나씩 해결하다보면 원하는 기능을 구현 할 수 있을 것 같은 자신감이 생겼다. 그리고 카카오 지도 API 소스 코드랑 약탈해온 그분의 git에 나온 지도 API를 이용한 코드도 계속 보고 있으면서 이런 저런 시도를 계속해보니 하나씩 이해도 되고 이렇게 저렇게 하면 구현이 되겠다는 감도 생긴다. 역시 이해하고 시도하면서 존버하기가 답이다.

 

그외에도 1주차에 겪은 문제중에 지도 검색시 잘 되긴 하지만 400에러가 나서 찜찜했던 적이 있는데 그 원인과 해결한 방법을 아래 TIL 블로그에 적었다. 원인은 비동기처리를 잘 하지 않아서였고 비동기의 부작용이 일어나지 않도록 하는 방법으로 해결했다.

heo-dev-0229.tistory.com/28

항해99 60일차 TIL : 지도 API 검색에서 나타나는 400에러 문제 해결법 (feat. query)