Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

let's get IT with DAVINA 💻

KakaoMap Api 적용 본문

Project/왜 가?

KakaoMap Api 적용

다빈치코드💎 2023. 2. 9. 05:06

앱키 받기

Kakao Developers

우선 카카오 개발자 사이트에 접속해서 카카오 로그인을 한다.
내 애플리케이션에 들어가서 애플리케이션 추가하기를 누른다.
플랫폼 설정하기를 누르고 (나는 웹에서 사용할 것이기 때문에 web 플랫폼 등록을 선택했다) 도메인 설정을해준다.
react를 사용해서 웹을 구현할 것이기 때문에 http: // localhost:3000도 추가해주었다.

HTML에 적용

pubilc/index.html
- head or body 아무데나 상관 X
- 나는 head에 적용해주었다.

<head>
        <script
            type="text/javascript"
            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=[발급받은 키]"
        ></script>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
//...생략
</head>

KakaoMap.js 파일 생성

import React, { useEffect } from "react";
import styled from "styled-components";

const MapContainer = styled.div`
    width: 100%;
    height: 400px;
`;

const { kakao } = window;

//불러오는 부모페이지에서 props로 location={pageDetail}전달
export const KakaoMap = ({ location }) => {
    useEffect(() => {
        var container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
        var options = {
            center: new kakao.maps.LatLng(
                location.location_x,
                location.location_y
            ), //지도의 중심좌표
            level: 3,
        };

        var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
        var markerPosition = new kakao.maps.LatLng(
            location.location_x,
            location.location_y
        ); //해당 위치 마커 표시
        var marker = new kakao.maps.Marker({
            position: markerPosition,
        });
        marker.setMap(map);
    }, [location]);

    return (
        <div>
            <MapContainer id="map"></MapContainer>
        </div>
    );
};

env

앱키는 다른사람이 가져가서 악용할 경우가 생길 수 있기 때문에 .env파일로 관리하는 것이 좋다.

제일 밖 폴더에 .env 파일을 생성하고 카카오 앱키를 설정해 준다. 다른 프레임워크는 모르겠지만 리액트는 REACT_APP으로 시작하는 이름으로 지어야 한다.

그렇지않으면 create-react-app이 이것을 인지하지 못하기 때문이다.

🚫 Error Issue
또한, kakao developers에서 플랫폼→web→도메인 주소 추가해줘야함!

.env

REACT_APP_KAKAO_MAP_KEY=[카카오 앱키]

👇 .env를 사용해서 바뀐 코드

%%를 양끝에 추가

<body>
    <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%"
    ></script>
  </body>

🚫 Error Issue
“sdk.js?appkey=[발급받은키] A parser-blocking, cross site (i.e. different eTLD+1) script, http://t1.daumcdn.net/mapjsapi/js/main/4.4.8/kakao.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.”라는 warning이 떴음

→ 검색해보니 “해당 문구는 document.write로 스크립트를 생성하는 것은 가급적 자제해 달라는 문구이며 API 내부에서 사용하고 있기 때문에 뜨고 있습니다. (2G 같은)느린 네트워크 상에서 스크립트 블락이 일어날 수 있다는 문구인데 실제 지도 동작에는 문제가 없기 때문에 정책적으로 대응하지 않기로 했습니다.”라는 카카오답변이 있었다고해서 일단 무시하고 진행

.gitignore에 .env 추가하기

보통 Github에 본인의 코드를 push해서 관리한다. 이 때, .env 파일이 같이 올라가면 어떻게 될까? 개인 API KEY를 누군가가 나쁜 용도로 사용할 수도 있을 것이다.

따라서, .gitignore에 .env 파일을 입력해서 push를 미연에 방지하자.

API KEY 사용하기

public/index.html에서 <script> 태그의 src 속성에 입력하는 경우
src 폴더의 js, jsx, ts, tsx 파일에서 사용하는 경우

public/index.html

public/index.html에서 <script> 태그의 src 속성에 입력하는 경우에는 % 기호를 활용한다.

%.env에 저장해놓은 이름%

src/ ~.js, ~.jsx, ~.ts, ~.tsx

src 폴더의 js, jsx, ts, tsx 파일에서 사용하는 경우에는 process.env를 활용한다.

// App.js

function App() {
  console.log(process.env.REACT_APP_GOOGLE_MAP_API_KEY); // API KEY 출력
}

export default App;

저작자표시

'Project > 왜 가?' 카테고리의 다른 글

scroll prevent (0)	2023.02.17
두 날짜 사이 계산 (0)	2023.02.09
button count 조정/제한 (0)	2023.02.09
찜 기능 (위시리시트) (0)	2023.02.08
[왜 가?] 프로젝트 회고 (6)	2023.02.08