← Dev Log

Gloddy - 카카오 맵 -> 구글 맵 변경

·5 min read

오늘 한 일

  • gloddy QA 반영
  • nextjs로 블로그 만들기

gloddy

구글 맵을 적용하기 위해 리액트에서 사용하기 쉬운 라이브러리들을 찾아서 적용했다.

근데 구글에서 제공하는 타입인 @types/google.maps 를 설치하고 사용하려고 했는데, google.maps 를 찾을 수 없다고 나왔다.

한참을 구글링하다가, tsconfig.json에서 types를 추가해주면 된다는 것을 알았다.

{
  "compilerOptions": {
    "types": ["google.maps"]
  }
}

tsconfig의 types에 왜 추가해야 하는가?

일단 types는 기본적으로 nodu_modules/@types에서 타입을 찾는다. 만약 type들을 추가한다면, 그 특정 type들만 전역으로 사용할 수 있다.

저 google.maps 타입은 전역으로 사용되는 타입이므로 types에 추가해줘야 한다.

카카오 맵 -> 구글 맵 변경

변경한 이유는 우리 서비스의 이용 대상이 유학생이기 때문에 다국어를 지원해야 하는데, 카카오 맵은 다국어를 지원하지 않는다.

그래서 보편적으로 사용하고 다국어를 지원하는 구글 맵으로 변경했다.

구글 맵 적용

나는 @react-google-maps/api 라이브러리를 사용했다.

원래 쌩 자바스크립트로 하면 되게 세팅할게 많은데, 이 라이브러리를 사용하면 리액트에서 쉽게 사용할 수 있다.

import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'

//...
return (
  <>
    {isLoaded ? (
      <GoogleMap
        mapContainerStyle={{ width: '100%', height: '100%' }}
        center={{ lat: +placeLatitude, lng: +placeLongitude }}
        zoom={14}
        options={{
          disableDefaultUI: true,
        }}
      >
        <Marker position={{ lat: placeLatitude, lng: placeLongitude }} />
      </GoogleMap>
    ) : (
      <div className="bg-gray-300 h-full w-full" />
    )}
  </>
)

장소 검색

장소 검색을 위해 처음에는 AutoComplete를 사용했지만, 엔터 누를 때 데이터가 존재하지 않으면 alert 나오도록 되어있어서 SearchBox로 변경했다.

StandaloneSearchBox라는 컴포넌트 내부에 input을 넣고, 그 input에 입력해서 엔터를 클릭하면 onPlacesChanged 이벤트가 발생한다.

그 때 searchBox의 getPlaces()를 사용해서 장소를 가져올 수 있다.


//...
<StandaloneSearchBox
  onLoad={(searchBox) => setSearchBox(searchBox)}
  onPlacesChanged={() => {
    const places = searchBox?.getPlaces() || [];
    setPlaces(places);
  }}
>
  <TextField
    ref={ref}
    placeholder="모임 위치를 입력해주세요."
    leftIcon={<Icon id="24-search" width={24} height={24} />}
  />
</StandaloneSearchBox>
<GoogleMap
//...
/>

하지만 엔터를 클릭해야 장소가 검색되고 있어서, 이전에 구현한 것 처럼 input에 입력할 때마다 장소를 검색하도록 구현해야한다.

느낌적으로는 input 값이 변경될 때마다 onPlacesChanged 이벤트를 발생시키면 될 것 같은데, 내일 한번 시도 해봐야겠다.

Next.js로 블로그 만들기

원래 gatsby로 블로그를 만들어보고 있었는데, 에러가 너무 안잡혀서 그나마 익숙한 next.js로 블로그를 만들기로 했다.

특히 지금 yarn workspace를 사용하고 있어서, 이게 내 문제인건지 환경의 문제인건지 가늠이 가질 않는다..

일단 오늘은 공식문서 next.js 13 App dir로 블로그 세팅만 해두었다.

아직 자료가 많지는 않지만 mdx 파일을 띄우는 것까지는 성공했다.

gatsby에 graphql로 만드는 것보다는 빨리 될 것 같다 ㅋㅋㅋ

내일 할 일

  • gloddy 개발
  • 너디너리 데모데이 강연 들으러 가기
← 2023.09.082023.09.06 →