[TIL] 내일배움캠프 React 과정 2023.01.21

Today I Learned

팀 프로젝트 진행-카카오 지도 API 이용하기

React javascript로 카카오 지도 API 이용하기

공식 문서나 대부분의 검색 결과에서 제공하는 카카오 지도 API 이용하는 방법은 HTML 코드인데 나는 javascript 파일로 코드를 작성하고 싶었기 때문에 방법을 찾는데 시간이 좀 걸렸다. 검색할 때 '리액트'라는 키워드를 붙이고 난 이후에 javascript 관련 검색 결과를 많이 볼 수 있었다.

카카오 지도 API로 지도 생성하기

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

일단 index.html의 <head> 부분에 API를 불러오기 위한 코드를 한 줄 추가한다.

공식 문서 https://apis.map.kakao.com/web/guide/

declare global {
	interface Window {
		kakao: any;
	}
}

export default function KaokaoMap () {
    const container = useRef(null);

    const handleMap = () => {

        let options = {
            center: new window.kakao.maps.LatLng(37.56839464, 126.9303023),
            level: 7
        };

        const map =new window.kakao.maps.Map(container.current, options);
    };

    useEffect(()=> {
        handleMap();  
    })

    return(
        <div ref={container} style={{width: 500, height: 500}}></div>
    )
};

그리고 카카오 지도를 불러오고 싶은 jsx 파일에 코드를 작성한다. 공식 문서와 다른 점은 최상단에 declare global 코드를 추가로 작성해야 하고 window.kakao로 접근해야 한다는 점이다.

참고 문서

https://velog.io/@byungjin0120/Kakao-지도-API-적용해보기1

https://art-coding3.tistory.com/58

https://velog.io/@jeajea0127/카카오-지도-api-리액트에-적용

로컬의 json 파일 import하기

import data from "../../../bookstore.json"

json 파일에서 export하지 않았기 때문에 파일을 어떻게 불러와야 하나 걱정했었는데 그냥 파일만 불러오면 된다. 이렇게 data를 불러와서 data에 바로 forEach를 돌려서 서점의 위치마다 마커를 표시해 줬다.

카카오 지도 API에 여러 개 마커 표시하기

// 마커 여러 개 표시하기
        data.forEach((store) => {
            new window.kakao.maps.Marker({
                map: map, // 마커를 표시할 지도
                title: store.FCLTY_NM, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됨
                position: new window.kakao.maps.LatLng(store.FCLTY_LA, store.FCLTY_LO) // 마커를 표시할 위치(위도, 경도)
            })
        })

마커를 표시할 데이터에서 forEach 메서드를 돌리고 위도와 경도를 이용해서 position 위치만 찍어주면 된다.

참고 https://velog.io/@bearsjelly/React-kakao-지도-띄우기-4-여러개-마커띄우기

마커 클릭 시 지도 이동하기

공식 문서에는 마커 클릭 이벤트로 인포윈도우를 표시하는 코드만 있기 때문에 마커 클릭 이벤트 생성하기 + 지도 이동시키기 코드를 합쳐보기로 했다. 마커를 클릭하는 이벤트가 발생했을 때 지도가 이동하도록! 그리고 처참히 실패🥲

function panTo() {
    // 이동할 위도 경도 위치를 생성합니다 
    var moveLatLon = new kakao.maps.LatLng(33.450580, 126.574942);
    
    // 지도 중심을 부드럽게 이동시킵니다
    // 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
    map.panTo(moveLatLon);            
}

지금 문제 상황이 지도를 이동하기 위해서는 map이라는 요소가 필요한데 이 map이 다른 함수 안에 선언되었기 때문에 전역 변수로 활용할 수 없다는 점이다. 그래서 map을 전역으로 사용할 수 있게 해당 함수 밖으로도 선언해 봤지만 에러가 발생해서 실패했다.

공식 문서

지도 이동시키기 https://apis.map.kakao.com/web/sample/moveMap/

마커에 클릭 이벤트 등록하기 https://apis.map.kakao.com/web/sample/addMarkerClickEvent/

Programmers 문제 풀기

자릿수 더하기

나의 풀이

function solution(n) {
    let answer = 0;
    [...n.toString()].map((num)=>answer+=parseInt(num))
    return answer;
}

가장 헤맸던 부분이 숫자 형태인 n을 문자열로 변환해서 spread로 배열을 만들고 배열의 요소 하나하나를 map을 돌리며 더해주려 했는데 배열의 요소가 숫자가 아닌 문자열 형태이기 때문에 더할 수 없다는 것이었다. 그래서 다양한 실패의 과정을 거쳐 결국 초기값이 0인 answer라는 변수를 만들고 배열을 map을 돌리면서 parseInt로 숫자 형태로 변환한 num을 answer에 계속 더해주도록 했다. 풀긴 풀었지만 그렇게 마음에 드는 풀이는 아니었다.😞

다른 사람의 풀이 01

function solution(n) {
  return n
    .toString()
    .split("")
    .reduce((acc, cur) => acc + Number(cur), 0);
}

나랑 다른 부분은 map이 아니라 reduce를 썼다는 것. 원래 reduce 쓰려다가 실패했기 때문에 내 풀이를 수정해서 다시 풀어봐야겠다.

function solution(n) {
    return [...n.toString()].reduce((acc, cur)=> acc + parseInt(cur), 0)
}

처음에는 reduce 메서드를 이용할 때 acc와 cur를 둘 다 숫자로 변환해야 하나 고민했었는데 reduce 메서드의 특성을 이해하고 있다면 acc에는 초기값으로 설정한 0이 들어가기 때문에 cur만 숫자 형태로 변환해 주면 되는 거였다.

다른 사람의 풀이 02

function solution(n) {
    let result = 0;

    while (n > 0) {
        result += n % 10;

        n = Math.floor(n/10);
    }

    return result;
}

한눈에 이해되지 않는 흥미로운 풀이가 등장했다.. 하나씩 분석해 보기로 한다.

...아무리 봐도 이해가 되지 않기 때문에 이해를 포기한다 ㅎㅎ

회고

이번 프로젝트에서 내가 맡은 개발 기능 역할에 굉장히 부담을 느끼고 있었기 때문에 오늘 일찍 일어나서 공식문서도 참고하고 구글링도 열심히 해서 카카오 지도 생성하기와 마커 표시하기를 생각보다 금방 끝낼 수 있었다. 이때까지만 해도 생각보다 수월한 진행 속도에 기뻐했는데 마커를 클릭했을 때 해당 위치로 포커스가 되도록 하는 기능을 구현하려다가 연속된 실패에 좌절감에 빠져있다.😥 아예 생각의 방향을 바꿔야 될 거 같기도 한데 어떻게 해야 될지 모르겠다. 일단 오늘은 좀 쉬고 내일 맑은 정신으로 다시 생각하거나 팀원들에게 도움을 청해봐야겠다.

저작자표시