아웃소싱 프로젝트 - (1)

아웃소싱 프로젝트를 통해 외부 API를 사용하여 카카오맵과 유튜브 API를 연결시키고 지도상에서 장소와 관련된 영상을 제공해주는 서비스를 기획하게되었다.

 

맡은 역할

아직까지 정해야할 사항은 많지만 우선은 카카오맵 API를 사용하여 지도 API 구성을 맡았다. 공식문서에서 제공하는 것을 최대한 끌어와서 다양한 기능을 쓸 수 있도록해야한다. 지난 번의 팀 프로젝트에서 외부 API를 끌고와서 사용하는 것이 실패한 나머지 이번에는 제대로 API를 쓸 수 있도록해야겠다.

 

카카오맵 API 호출

공식문서에서는 자바스크립트를 통해 카카오맵 API를 사용하고 있지만 이걸 리액트로 사용하기 위해서는 useEffect를 이용하여 컴포넌트가 마운트 될 시 동적으로 API를 로드한 후에 실행이 필요하다.

 

현재 프로젝트는 Vite 기반으로 리액트 프로젝트를 구성했고 공식문서에서는 이하의 코드를 index.html에 추가하는 것을 나타낸다.

 

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

 

그 외의 카카오맵의 공식 문서에서 제공하는 환경설정을 따라서 API 키를 발급받고, 앱에서 등록을 했다.

현재 로컬 환경에서 작동하고 있으므로 로컬호스트의 도메인을 프로젝트로 등록했다.

(2025년 2월 27일의 공식문서 기준을 따르고 있습니다)

 

 

문제는 리액트에서의 적용이다, 우선적으로 API 호출을 목표로 하였고 다음의 코드를 통해 테스트 페이지에서 API를 호출할 수 있었다.

import { useEffect } from 'react';

function KakaoMap() {
  useEffect(() => {
    if (window.kakao && window.kakao.maps) {
      const container = document.getElementById('map');
      const options = {
        center: new window.kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
        level: 3,
      };
      const map = new window.kakao.maps.Map(container, options);
      console.log(map);
    } else {
      console.error('카카오맵 API가 로드되지 않았습니다.');
    }
  }, []);
  return (
    <div>
      <div id='map' style={{ width: '500px', height: '400px' }}></div>
    </div>
  );
}

export default KakaoMap;

 

window API를 사용하는 것을 볼 수 있는데 API 키를 통해 카카오 서버로 요청을 보내면 나는 window.kakao 라는 객체를 받는 것이다.

window.kakao = window.kakao || {},
window.kakao.maps = window.kakao.maps || {},
window.daum && window.daum.maps ? window.kakao.maps = window.daum.maps : (window.daum = window.daum || {},
window.daum.maps = window.kakao.maps),
function() {
...

위의 코드는 개발자 도구의 네트워크 탭을 통해 서버로부터 받은 코드이다.

카카오맵의 라이브러리를 동적으로 로드하고 window.kakao를 통해 window.kakao.map을 통해 객체를 다룰 수 있게된다.

 

따라서 나는 여기에서 해당 코드의 window.kakao 객체를 다루는 것이다.

 

코드 설명

 

...
  useEffect(() => {
    if (window.kakao && window.kakao.maps) {
      const container = document.getElementById('map');
...

 

먼저 컴포넌트 마운트가 성공하면 'map' 아이디를 가진 DOM 요소를 container로 지정한다. 이 방식은 DOM 직접 제어하는 안티 패턴으로 일반적으로 useRef를 이용하여 접근하는 것을 권장하고있다.

따라서 useRef를 통해 다음과 같이 코드를 수정했다.

import { useEffect, useRef } from 'react';

function KakaoMap() {
  const mapContainer = useRef(null);
  useEffect(() => {
    if (window.kakao && window.kakao.maps) {
      const options = {
        center: new window.kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
        level: 5,
      };
      const map = new window.kakao.maps.Map(mapContainer.current, options);

    } else {
      console.error('카카오맵 API가 로드되지 않았습니다.');
    }
  }, []);
  return (
    <div>
      <div id='map' ref={mapContainer} style={{ width: '500px', height: '400px' }}></div>
    </div>
  );
}

export default KakaoMap;

 

차이점은 맵을 담는 container를 mapContainer로 바꾸었고 useEffect의 외부에서 선언했다는 것이다.

useRef는 리렌더링이 될 때 값이 초기화되지 않는다. 일단 나는 맵에서의 마커를 통해 클릭 이벤트를 구현하는 것을 목표로 하고있다.

만약에 컴포넌트에서 어떤 상태가 변경되어 리렌더링이 일어난다면 맵도 초기화 될 것이다. 아직까지는 어떤 식으로 코드가 작성될지 모르므로 상태 변경을 통한 리렌더링 시 지도가 리렌더링이 일어나는 것을 방지하여 위와 같이 useRef를 썼다고 할 수 있다.

 

세부 설정

...
      const options = {
        center: new window.kakao.maps.LatLng(37.365264512305174, 127.10676860117488),
        level: 5,
      };
      const map = new window.kakao.maps.Map(mapContainer.current, options);
...

 

options는 지도 API의 설정을 담당한다. Center 는 지도 중심 좌표를 의미하는 필수 값이며 LatLng은 위도,경도를 뜻한다.

level은 지도의 확대 수준을 의미한다.

 

window.kako.maps는 카카오맵의 모든 기능을 담고있는 최상위 객체로 지도와 관련된 기능을 제공하는 라이브러리라 할 수 있다

 

객체	역할
kakao.maps.Map	지도 생성
kakao.maps.Marker	지도 위에 마커를 표시
kakao.maps.InfoWindow	마커 클릭 시 정보 표시
kakao.maps.LatLng	지도에서 특정 좌표를 나타냄
kakao.maps.services.Places	장소 검색 기능
kakao.maps.event	지도에서 이벤트 핸들링

 

위의 표에 따르면 kakao.maps.Map은 실제 지도 객체를 생성하는 클래스라고 할 수 있다.

그래서 new 객체 생성자를 통해 지도 인스턴스를 만들은 것을 알 수 있다.

 

• window.kakao.maps => 카카오맵 기능 모음 라이브러리 
• window.kakao.maps.Map() => 실제 지도 생성 객체