[React] 창업 아이템 개발#1

---

개요

학교 창업 동아리 활동을 하면서 창업 아이템 개발을 하게 되었다.

React를 프론트엔드로 정하여 먼저 프로토타입을 만들기 시작했는데,

프로젝트 이름을 'MAAS'라 지었다.

Marketing Area Analysis System

네이버 Maps를 활용해 상권분석을 하는 시스템 개발인데 개인 프로젝트가 아니라 어떤 아이템인지 자세하게 밝히기는 힘들다

이 프로젝트를 하면서 겪는 좌충우돌? 생고생을 글로 써내려갈 예정이다. 더 좋은 코드나 조언이 있다면 누구나 언제든 피드백을 주면 좋을 것 같다.

---

네이버 Maps API 사용하기

네이버 지도 API는 아래 주소에서 신청하여 사용할 수 있다

https://www.ncloud.com/product/applicationService/maps

신청하면서

Web 서비스 URL
Android 앱 패키지 이름
iOS Bundle ID

이 세가지를 적으라고 하는데, 나는 웹으로 개발을 할 것이기 떄문에 web 서비스 URL에

http://localhost:3000

이렇게 로컬서버 port를 입력해주었다.

그 다음 naver cloud platform 에 등록된 maps를 보면

인증정보에 client ID가 나와있는데 이것을 API 사용시 ncpClientId에 사용하면된다

---

리액트 라이브러리

네이버 Maps API를 리액트 환경에서 쉽게 사용하기 위한 라이브러리가 존재했다.

https://github.com/zeakd/react-naver-maps

그런데 이 라이브러리를 사용하면서 개발 진행이 턱 막혀버렸다.. 내 실력이 너무 모자란탓에...

---

기능구현에 실패한 코드

//NaverAPIMap.js
  
import React, { Component,useState } from 'react';
import { RenderAfterNavermapsLoaded, NaverMap,Marker } from 'react-naver-maps'; // 패키지 불러오기

const addMarker = ()=>{
  let marker = new window.naver.maps.Marker({
    position: { lat: 37.300208, lng: 126.838399 },
    map: window.naver.maps.MAP,
});
  console.log(marker)
  marker.setMap(window.naver.maps.MAP)
}


function NaverMapRender() {
  const navermaps = window.naver.maps;  
  const [mark, setMark] = useState(false);
  return (
    <NaverMap
      mapDivId={'maps-getting-started-uncontrolled'} // default: react-naver-map
      style={{
        width: '100%', // 네이버지도 가로 길이
        height: '100vh' // 네이버지도 세로 길이
      }}
      defaultCenter={{ lat: 37.300208, lng: 126.838399 }} // 지도 초기 위치
      defaultZoom={18} // 지도 초기 확대 배율
      zoomControl={true}
      onClick = {addMarker}
    /> 
    
  );
}
function NaverMapAPI() {
  return (
    <RenderAfterNavermapsLoaded
      ncpClientId={'yourClientID'} // 자신의 네이버 계정에서 발급받은 Client ID
      error={<p>Maps Load Error</p>}
      loading={<p>Maps Loading...</p>}
    >
      <NaverMapRender/>
    </RenderAfterNavermapsLoaded>
  );
  
}

export default NaverMapAPI;

이벤트 핸들러에 클릭시 Marker를 추가하는 코드를 짰는데 지도앱에 반영이 안되었다. 요소검사로 보니 Marker 객체가 만들어지기는 하는데 프로퍼티에 map이 null으로 되어있고 랜더링이 안되는 것 같았다.

const addMarker = ()=>{
  const navermaps = window.naver.maps;  
  return(
      <Marker 
        position={new navermaps.LatLng(37.300208, 126.838399)}
        animation={navermaps.Animation.BOUNCE}
      />
)
}

처음에는 이런식으로 Marker 컴포넌트를 추가하는 형태로 썼는데 이 방법도 마커가 표시되지 않았다. 이것저것(함수형 컴포넌트를 클래스 형태로 바꿔보기도 하고 라이브러리 docs에 나와있는 컴포넌트 인스턴스에 접근하는 방법도 써보고..) 했는데 안되서 일단 html안에 js 코드로 기능을 만든 다음 컴포넌트화 하기로 하였다..

//index.html

<div id="map" style="width:100%;height:80vh;"></div>
<script id="code">
let map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.300208, 126.838399 ),
    zoom: 18
});

let marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.3595704, 127.105399),
    map: map
});

naver.maps.Event.addListener(map, 'click', function(e) {
    marker.setPosition(e.latlng);
});

</script>

html 에 script를 추가하여 간단하게 내가 원하는 기능이 만들어졌다. 리액트 API브릿지 라이브러리에 익숙하지않고 개발실력도 낮아 제대로 활용하지 못해서 아쉽다..