항해99 10주차(2021.5.3-5.9) WIL : 5주 과정 실전프로젝트 2주차, 지도API를 점점 더 잘 다루게 되기, 리액트 사용법 더 잘 익히기

이번 실전프로젝트 2주차에는 크게 '지도 위의 커스텀오버레이 띄우기'와 '카테고리 종류별로 마커 띄우기'를 구현했다.

1. 지도위에 커스텀오버레이 올리기

커스텀오버레이는 다음과 같은 것이다.

apis.map.kakao.com/web/sample/customOverlay2/

이렇게 지도상의 원하는 위치에 게시물을 올리는 것을 커스텀오버레이라고 한다. 나도 이렇게 구현을 했는데, 우리 경우에는 사진과 장소 이름을 같이 나오게 하는 커스텀오버레이를 만드는 것이다. 

결과물을 보자.

굿!!!!!!!!

하지만 문제가 있다. 

이 코드는 커스텀오버레이를 만든 코드다. 그런데 여기서는 커스텀오버레이를 순수 HTML로 만들고, 그것을 string으로 만들어서 content 변수에 할당하고 있다. 다시말해 리액트 환경이라 뷰는 JSX 문법으로 짜는게 정석이고 그것이 권장되는 방식인데, 이것만큼은 순수 HTML로 만든 것이다. 이로인해서 주석처리한 332번째 줄에 onclick(JSX문법이면 on'C'lick이어야 한다)으로 전달한 함수가 먹히지 않는다(그나마 다행인건 외부 css 파일로 스타일은 적용이 된다는 거다). 카카오 지도 API(이번 프로젝트에는 카카오 지도 API를 쓴다)의 커스텀오버레이를 만드는 소스코드를 찾아서 분석해보니, 구현하는 로직으로 봐서 리액트스럽게 JSX문법으로 커스텀오버레이의 뷰를 짜고 함수를 적용하는 방법이 있는지 내 지식 수준으로는 알 수 없겠다는 생각이 들었다. 

 

튜터님하고도 이 문제로 상의했는데, 튜터님과 이리 저리 시도해보아도 onclick으로 함수를 전달 할 수 없었다. 그래서 튜터님도 이건 JSX문법을 써야하는 리액트 환경과 맞지 않아서 생긴 문제로 보인다고 하고, 해결하려면 커스텀오버레이를 JSX문법으로 짤 수 있는 라이브러리를 찾아서 쓰거나, JSX문법으로 커스텀오버레이를 만든 사람들의 블로그나 git을 참고하는 것이 가장 최선이라고 하셨다. 다행이 튜터님 말씀대로 라이브러리가 있고 커스텀오버레이를 리액트스럽게 만드는 코드도 찾기는 했다. 하지만 지금은 다른게 급하기도 하고 그 라이브러리로 한다고 해서 된다는 보장은 없으므로 MVP 우선순위로 구현할 것을 먼저 하고 해보기로 했다.

 

항해99의 운영진에게도 커스텀오버레이의 문제를 물어봤더니, 이건 지도 API 코드의 태생적인 문제라서 함수제어가 안되는 문제는 라이브러리를 쓰던가 아니면 깔끔히 포기하는 것도 방법이라고 하셨다. 그분도 그런 문제를 이미 인지하고 계셨고, 다른 곳에서 지도 api를 사용하는 방법을 가르쳐줄때도 이런 한계가 있다고 가르친다고 하셨다. 그리고 무엇보다 이번 프로젝트에서 쓰고 있는 카카오 지도 API 사이트에서도 리액트나 뷰.js 같은 프레임워크를 위한 코드는 짤 계획이 없다고 나와있으니 포기하거나 라이브러리를 쓰는 것이 맞는 방향인것 같다.

2. 선택한 카테고리에 맞는 마커를 띄우는 기능을 구현하기

우리 프로젝트에서 MVP 기능의 하나로 선택한 카테고리에 맞는 마커를 지도위에 띄우는 것이 있었다. 쉽게 말하자면, 내가 '바다' 카테고리에 해당하는 마커들만 보고 싶다면 그렇게 할 수 있도록 하는 것이다. 일단 결과를 보자.

전체마커가 보일 때

카페 카테고리 마커만 보이게 한다.

카페 마커와 야경 마커 둘이 보이게 한다

이걸 구현하는 로직을 코드로 간략히 설명하면 다음과 같다.

리덕스에서 각 카테고리들을 string 자료형으로(카페 카테고리는 "카페"라는 string으로 설정) 담는 배열을 가져오고, 그 배열 안에 해당하는 카테고리가 있는지 여부를 includes 함수를 이용해서 검사해서 있으면 true, 없으면 false값을 is_xxx 변수에 저장한다. 지도상에 띄워져 있는 카테고리 버튼을 눌러 선택하면 해당하는 카테고리가 배열안에 들어가고, 선택을 해제하면 배열에서 빠지게 해놓았다. 그리고 '전체' 버튼을 누르면 배열안의 요소들이 모두 제거가 되어서 배열의 길이가 0이 되고, 그 조건이라면 전체 마커가 뜨도록 했다.

그리고 만약 그 카테고리가 버튼으로 선택되어 배열안에 들어가 있어서 is_xxx이 true라면 위의 코드처럼 실행이 되어서 지도상에 마커를 띄우게 했다(각 마커를 선택하면 커스텀오버레이도 뜨도록 설정). 그리고 한 카테고리만이 아니라 여러 카테고리가 같이 선택이 되어 있어도 문제없이 여러 카테고리에 해당하는 마커들이 뜨는 것을 확인했다. 

 

다만 지금은 mockdata로 한것이라서 서버와 연결해서 데이터를 받은 상태에서 테스트는 아직 하지 않았다. 그것은 서버와 통신하는 미들웨어 함수까지 주말에 구현한 다음, 3주차에 최우선순위로 할 계획이다.