서론

---

22년 11월 ~ 12월 6주간 프론트 2명, 백엔드 1명 팀을 이루어 진행했던

나의 첫 팀 프로젝트 작업물이다.

프로젝트 진행당시 기간안에 모든 기능을 구현했다는 안도와 기쁨에, 그리고 꽤나 유려한 디자인이 나왔다는 것에 기뻐 약간의 기능 수정 후 레포지토리에 방치하고 있었다.

실 사용을 목표로 했다면 그러지 않았겠지...

여하튼 최근에 소스코드를 들춰보며 이래저래 개선하고 싶었던 부분들이 생겨나서 이 기회에 리펙토링을 진행하고 그 후기를 남길까한다.

본론

---

카카오 지도 api

현재 프로젝트에서 편의점 검색을 위한 기능은 2가지를 제공한다.

• 편의점 이름으로 위치검색
• 지도의 중앙 위치를 기준으로 편의점 검색

그리고 매인 페이지에 떡~!하니 편의점들을 마커로 표시에 두고 있다.

위 모습처럼 지도를 띄우고 검색 기능을 사용하기 위해서는 카카오 지도 라이브러리를 사용해야하고 공식문서에서는 다음과 같은 방식으로 구현하는 것으로 되어있다.

처음 구현할 당시는 index.html에 직접 위 script를 넣어서 사용했다.

이렇게 하면 처음 앱이 로드될 때 위 카카오 지도 라이브러리도 로드되기 때문에
따로 window에서 kakao를 구조분해해서 전역으로 사용할 수가 있다.

그래서 필자는 위 kakao를 여러 ts, tsx 파일에서 사용을 했다.

예)

// kakaoService.ts
const { kakao } = window

const placeSearch = new kakao.maps.services.Places()
const overlay = new kakao.maps.CustomOverlay({
  position: new kakao.maps.LatLng(
    DEFAULT_KAKAO_COORD.lat,
    DEFAULT_KAKAO_COORD.lng
  ),
  zIndex: 1,
})

const infoOverlay = new kakao.maps.CustomOverlay({
  position: new kakao.maps.LatLng(
    DEFAULT_KAKAO_COORD.lat,
    DEFAULT_KAKAO_COORD.lng
  ),
  zIndex: 1,
})

// markerImg.ts
// 사용자 개인 마커 샘플이미지
export const customMarkerImage = {
  myMarkerImg: new kakao.maps.MarkerImage(
    myMarker,
    new kakao.maps.Size(20, 20)
  ),
 ...
  funMarkerImg: new kakao.maps.MarkerImage(
    funMarker,
    new kakao.maps.Size(30, 40)
  ),
}

편리하게 카카오 지도의 많은 기능들을 사용할 수 있었다.

하지만 앞서 index.html에 쓴 것처럼 script를 직접 넣어야하고 거기에 appkey가 노출되기 때문에 보안에 위험이 있어보였다.

카카오에 따르면 지도 api 를 위해 사용한 appkey(javascript key)는 노출되어도 큰 문제가 없다고 한다.
기능 구현을 위해서는 어쩔 수 없는 노출이고 key의 주인이 설정한 ip 주소나 도메인에서만 사용을 제한할 수 있기 때문에 문제가 없다고 한다.

여하튼 지도 script를 동적으로 로드하는 방식이 더 보안에 좋다고 판단되어 index.html이 아닌 js에서 동적으로 가져올 수 있도록 리팩토링을 진행했다.

App.tsx

useEffect로 script 태그를 생성하고 그 안 src에 카카오 지도 라이브러리 사용을 위한 값을 넣었다.

주의) 맨 끝 autoload = false를 꼭 해줘야 한다.

useState로 로드 상태 값을 다뤄 한번 로드된 이후에는 위 side effect가 다시 발 생하지 않도록 했다.

추가적으로 script가 로드되지 않은 상태에서는 프로젝트 전체 page를 담고 있는

<RouterProvider router={routers}/>

가 render 되지 않도록 막았다.

앞서 언급한 바와 같이 아직 전체 프로젝트 내에 전역으로 kakao를 사용하고 있는 코드가 남아있어서 시작부터 앱 로드가 되지않는 상황을 피하기 위해서 넣었다.

map.tsx

실제 지도를 구현하는 컴포넌트에서는 위 코드로 인해 구현된 전역의 kakao객체를 다뤄서 지도를 표출 할 수 있도록 했다.

kakao.maps.load 메서드를 사용해서 프로젝트 내 <div id='map'/> 안에 지도를 표출하도록 했다.

그리고 setMapApi와 setKakao로 kakao.maps.Map과 kakao 객체를 담아두었다.

모든 카카오 지도와 관련된 기능은 MapContext 에서 다룰 수 있도록 우선 구현한 모습이다.

결론

---

여기까지가 카카오 sdk를 동적으로 다룰 수 있도록 구현한 부분이다.

이렇게 해도 워낙 프로젝트 전역에 window.kakao를 너무 만연하게 사용하여서 대대적인 수정이 필요하다.

추가적으로 리팩토링이 진행되는 내용을 추후에 남길 수 있도록 하겠다.