[front-end] 쉐어하우스 상세페이지 - 다음 지도 API

상세페이지는 화면 구성을 어떻게 할까 고민하다가 최대한 심플하게 만들었다.

 

 

 

참고로 백엔드는 아직 안만들었으므로 처음 카드를 클릭해서 상세페이로 넘어갈때 내용이 매치되는 것은 아니다. 모든 데이터는 dummy로 만들어 진 것이라 데이터 관련된 기능은 아직 없다.

 

컴포넌트를 만들면서 느끼는 건데 생각보다 버튼 컴포넌트나 내비게이션 컴포넌트 빼고는 그렇게 자주 재활용해서 써지진 않는 것 같다.

그래서 페이지를 기준으로 컴포넌트들을 나눠서 정리해야하는건지 아니면 기능을 기준으로 컴포넌트들을 나눠서 정리해야 하는 건지 잘 모르겠다.

 

처음에는 모달이면 모달, 블럭이면 블록 이런 식으로 기능 기준으로 나눴는데 페이지 별로 컴포넌트 생김새가 다르고 역할이 다르기 때문에 차라리 페이지별로 한 파일에 묶어서 관리하는 게 더 편한 것 같기도 하다.

 

결론은 자주 쓰는 건 common파일에 한 데 모아놓고 나머지 페이지별로 쓰는 건 해당 페이지의 컴포넌트들끼리 뭉쳐져 있게 되었는데, 나야 처음부터 만들어서 컴포넌트들이 어디에 들어있는지 알고 있지만 누군가 코드 파일을 처음 본다면 뭐지?! 싶을 것 같다.

 

지도보기는 구글맵을 쓸까 하다가 그래도 우리나라 지도는 국산 걸로 써야지(??)하고 다음 지도 API를 쓰기로 했다. 

지도 api를 사용하기 위해서는 api 요청 시 키를 써야 하기 때문에 키를 먼저 발급받은 후에 요청할 때 appkey 파라미터에 넣어주면 된다.

그리고 나는 Map컴포넌트가 마운트 될 때 지도 api를 동적으로 로딩하기 때문에 마지막에 autoload=false도 같이 써주어야 한다.

 

루트 디렉터리의 index.js에 아예 스크립트를 넣어서 로딩시킬 수도 있지만, 그렇게 할 경우 지도 api가 필요 없는 페이지에서도 무조건 로딩되기 때문에 Map컴포넌트가 필요할 때만 요청하도록 했다.

 

그리고 맨 앞에 /*global kakao*/ 주석을 이용해서 리액트 lint를 무시하고 글로벌 변수를 사용할 수 있게 해 주기 때문에 써주는 것이다.

 

script.onload 콜백과 kakao.maps.load 콜백은 카카오 개발자분께서 리액트에서 지도를 사용하는 방법에 대한 문의에 아래와 같이 남겨주셨다.

 

script.onload 콜백은 kakao namespace와 그 내부에 구현되어 있는 로딩 도구를 사용할 수 있는 시점이며, kakao.maps.load 콜백은 실제 API의 내용이 담긴 스크립트의 추가 로딩 완료가 끝난 시점에서의 동작을 핸들링하게 됩니다. 이 시점에서야 실제 API객체에 접근하여 제어가 가능해집니다.

 

/*global kakao*/
import React, { useEffect } from "react";
import styles from "./Map.scss";
import classNames from "classnames/bind";
import ContentWrapper from "components/post/contents/ContentWrapper";

const cx = classNames.bind(styles);

export default function Map() {
  useEffect(() => {
    const script = document.createElement("script");

    script.type = "text/javascript";
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=/*키를 넣어주세요*/&autoload=false";
    script.async = true;

    document.head.appendChild(script);

    script.onload = () => {
      kakao.maps.load(() => {
        //파라미터로 autoload=false를 줘서 v3이 모두 로드된 후, 이 콜백함수가 실행된다.
        let el = document.getElementById("map");
        let markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
        let map = new kakao.maps.Map(el, {
          center: new kakao.maps.LatLng(33.450701, 126.570667),
          level: 3,
        });
        let marker = new kakao.maps.Marker({
          position: markerPosition,
        });
        marker.setMap(map);
      });
    };
  });
}

 

그리고 별거 아니긴 한데, 룸메이트 구하는 사이트인데 '집'이라는 단어보다는 '셰어하우스'라는 단어를 쓰는 게 더 나을 것 같다는 생각도 든다. 그런데 만약 셰어하우스로 바꿀 경우 메뉴의 단어가 너무 길어져서 그 점을 고려하면 집이 더 나은 것 같기도..