Kakao API

<Kakao Map>

카카오 지도 API는 무료로 제공되고 있으며, 사용을 위해서는 아래와 같이 키 발급을 받아야 한다.

 

[ 참조 : https://apis.map.kakao.com/web/guide/ ]

 

1. 카카오 개발자사이트 (https://developers.kakao.com) 접속
2. 개발자 등록 및 앱 생성
3. 웹 플랫폼 추가: 앱 선택 – [플랫폼] – [Web 플랫폼 등록] – 사이트 도메인 등록
4. 사이트 도메인 등록: [웹] 플랫폼을 선택하고, [사이트 도메인] 을 등록합니다. (예: http://localhost:8080)
5. 페이지 상단의 [JavaScript 키]를 지도 API의 appkey로 사용합니다.
6. 앱을 실행합니다.

 

 

API 키 저장

<div src="<%= process.env.REACT_APP_API_KEY%>">

.env 파일에 API_KEY를 저장한다. CRA로 프로젝트를 시작했기 때문에 .env 파일에서 API_KEY를 설정할 때 REACT_APP_ 를 붙여서 설정하고, <%= >를 사용한다.

 

* CRA란?

페이스북에서 만든 react 웹 개발용 boilerplate로, create-react-app을 줄여서 부른 말이다.

 

 

지도 띄우기

발급받은 JavaScript 키를 /public/index.html 파일안에 작성한다.

 

import { useEffect } from "react";

const { kakao } = window;

function KakaoMap() {
  useEffect(() => {
    const container = document.getElementById("map"); //지도를 담을 영역의 DOM 레퍼런스
    const options = { //지도를 생성할 때 필요한 기본 옵션
      center: new kakao.maps.LatLng(37.6152, 127.0128), //지도의 중심좌표
      level: 3, //지도의 레벨(확대, 축소 정도)
    };

    const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
  }, []);

  return (
    <div>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </div>
  );
}

export default KakaoMap;

kakao map api를 가져오면 window 전역 객체로 들어가는데, 함수형 컴포넌트에서는 바로 인식하지 못하기 때문에 코드 상단에 window에서 kakao 객체를 꺼내서 사용한다. https://tablog.neocities.org/keywordposition 해당 사이트를 통해 GPS 좌표를 구할 수 있다.

 

<Kakao Login>

웹 카카오 로그인을 구현하는 방식은 JavaScript SDK를 이용하는 방식과 REST API를 이용하는 방식이 있다.

다음은 REST API를 이용해서 로그인을 구현하는 과정이다.

[ 참조 : https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api#request-code ]

 

인가 코드

 

import { REST_API_KEY, REDIRECT_URI } from "../../data/oauth"

function KakaoLogin() {
  const link = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  
  //인가코드
  let code = new URL(window.location.href).searchParams.get("code");
  localStorage.setItem("code", code);
  
  const loginHandler = () => {
    window.location.href = link;
  };
  
  return (
    <div className={styles.loginBox} style={{ backgroundColor: "#FFE812" }} onClick={loginHandler}>
      <img src={KakaoIcon} alt="kakao icon" className={styles.Icon} />
      <span className={styles.text}>카카오톡으로 시작하기</span>
    </div>
  );
}

export default KakaoLogin;

인가 코드를 받기 위한 URI에 필수로 포함되어야 하는 파라미터는 client_id, redirect_uri, response_type이다.

client_id는 Rest API 키를, redirect_uri는 애플리케이션 등록하기 단계에서 작성한 URI를, response_type에는 code 고정 값을 담으면 된다.

위에서 등록한 애플리케이션에 이어서 카카오 로그인 설정을 진행한다. 로그인 설정에서 지정한 Redirect URI를 통해 인가 코드를 받으며, 해당 인가 코드로 요청을 보내면 토큰을 받을 수 있다.

export const REST_API_KEY = "";
export const REDIRECT_URI = "http://localhost:3000/oauth";

REST_API_KEY와 REDIRECT_URI 두 변수는 유출되면 안되기에 oauth.js에 별도로 관리하도록 구성한다. 

link 주소로 들어가면 카카오 계정 정보를 입력할 수 있는 창이 뜨고, 인가 코드를 받을 수 있다.

  let code = new URL(window.location.href).searchParams.get("code");

인가 코드는 주소의 쿼리스트링에 담아져서 제공되며, 뒷부분을 window.location.href 명령어를 사용하여 추출했다.