kakao map 사용하기 1 (셋팅)

Script를 사용해 스크립트 동적 로드를 위해서 카카오맵의 load 매서드를 사용하려고 한다.

또한 지도 스크립트의 로딩 및 초기화를 페이지의 상호 작용 가능한 상태와 동기화하고,

페이지 성능을 최적화하기 위해 Next.js Script의 afterInteractive strategy 와 onRoad를 사용해 볼 것이다.

사용 전에 Script가 무엇인지 알아보자

❓Next.js Script란

• 서버 및 클라이언트 모두에서 JavaScript 코드를 실행하고 데이터를 초기화하는데 사용되는 컴포넌트(SSR,CSR)
• 서버에서 데이터를 미리 가져와 클라이언트로 전달하거나, 클라이언트 측에서 라우팅 또는 페이지 진입 시 특정 작업 수행 가능
• 서버 사이드 데이터 로딩( 페이지가 서버에서 처음 렌더링 될 때 데이터 초기화하는데 사용 )
• 클라이언트 사이드 데이터 로딩(페이지가 클라이언트에서 로딩될 때 특정 작업 수행하도록 설)

 

📖속성

`src`           로드할 스크립트 파일 경로 지정 ⭐필수값⭐

//ex
src = "http://example.com"

 

`strategy`   스크립트의 로드 전략 설정(언제 로드/실행)

//ex
strategy= "lazyOnload"

strategy 속성
● afterInteractive: 스크립트가 페이지 상호작용 가능한 후 로드되고 실행
● beforeInteractive: 스크립트가 페이지의 상호작용 가능한 상태 이전에 로드되고 실행(hydration 이전)
● lazyOnLoad: 스크립트 페이지가 완전히 로드된 후 로드되고 실행(브라우저 idle 타임에)
● worker(experimental): Service Worker와 같은 백그라운드 워커 스크립트를 로드하고 실행하는데 사용

 

 

`onLoad`    스크립트 파일이 브라우저에 성공적으로 로드될 때 호출

//ex
onLoad={onLoadFunc}

 

`onReady`  스크립트 파일이 브라우저에 로드되고, 스크립트 내 모든 작업이 완료되고, 페이지가 상호작용 가능 시 호출

//ex
onReady = {onReadyFunc}

 

`onError`    스크립트 로드 중 오류 발생 시 실행할 함수 지정

//ex
onError = {onErrorFunc}

 

❗ `onLoad` 와 `onReady` 차이

실행되는 시점이 다르다.

 

onLoad

● 스트립트 파일에 추가적인 초기화 작업이 필요한 경우, onLoad를 사용해서 수행 가능

● ` beforeInteractive ` 와는 사용 불가 (onReady 사용 권장)

 

onReady

● 스크립트가 완전히 초기화 되고, 페이지의 모든 요소 초기화 + 상호 작용 작업 완료 된 후 호출

 

Kakao Developers 세팅

1. 카카오 디벨로퍼 사이트 접속 후 앱 생성

 https://developers.kakao.com/

Kakao Developers

 

2. 애플리케이션 생성 후 "앱 키" 섹션 javaScript 키 복사

- 환경변수에 키 저장 (나의경우 "NEXT_PUBLIC_KAKAO_MAP_CLIENT")

 

3. 플랫폼 > Web 도메인 주소 등록하기

 

 

 셋팅하기 

1.  kakao.maps.d.ts 패키지 설치 후 설정

typescript를 이용해 개발하는 분들은 kakao.maps.d.ts 패키지를 설치해주세요

 

` kakao.maps.d.ts ` 설치

//설치 명령어
yarn add react-kakao-maps-sdk

 

` tsconfig.json ` 에  `compilerOptions` 속성에서 types 지정

{
  "compilerOptions": {
    "types": ["kakao.maps.d.ts"]
  },
}

 

 

2. Script 작성하기

"use client";

import Script from "next/script";

export default function AirMap() {

  return (
    <>
      <Script
        strategy="afterInteractive"
        type="text/javascript"
        src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_CLIENT}&autoload=false`}
      />
    </>
  );
}

 

 

셋팅은 여기까지입니다!! 

---

필요한 기능

1. MinLevel-6 MaxLevel-13 정하기
2. 시 군 구 폴리건 라인 그리기(11Lv ~ 13Lv ) 
3. 시 군 구 코드에 맞는 대기질 평균 값 받아서 색으로 보여주기
4. 대기질 버튼 클릭 시 해당 대기질에 맞는 값으로 보여주기 
5. 현재 위치 동의 후 현재 위치 버튼 클릭 시 해당 구역, 6레벨로 지도로 보여주기
6. 확대/ 축소 컨트롤러 사용하기 (확대/축소 이벤트)
7. 지도 이동 시 위도 경도 값 받기 [ 이동 이벤트  (위도 경도값 서버에 보낸 후 해당 위치에 생성된 값 받아서 마커 생성) )]
8. 위에서 추출한 위도 경도 값 api로 보낸 후 해당 영역 데이터 받아서 dot 그려주기 ( 6Lv ~ 10Lv  )
9. 대기질 버튼 클릭 시 대기질 평균 값에 dot 색 변경 및 값 변경
10. dot 호버 시 툴팁 띄우기
11. 툴팁 클릭 시 패널 창 띄우기(대기질 전체 데이터 보여주기) 

위 기능들을 조금씩 묶어서 TIL 작성해보겠습니다.