✂️ 분배된 이슈

• 지역에 대한 구체적인 위도/경도 설정
  • (선택) 해당 지역의 범위를 테두리로 표시 (추후 논의)
• 지도에 50곳의 위도/경도 대한 핀 출력
• 인구밀도를 기반으로 핀의 색상 출력
• 핀 클릭 시 상세 정보 모달 출력 (1단계)
• 핀 클릭 시 핀의 크기를 확대하고, 핀의 중앙에 현재 인구 밀도 상태 표시 (여유, 보통, 붐빔, 매우 붐빔)
  • 핀 클릭 시 핀이 화면 중앙으로 포커싱 되도록 설정

🚩 구현 목표

🍀 세부 목표

• 위도/경도 데이터 가져오기
  • api server에서 위도/경도 가져오기
  • 인구밀도(더미) 데이터 가져오는 api 생성
  • client에서 api 서버로 요청
• 지도에 50곳의 위도/경도에 대한 핀 출력
• 인구밀도를 기반으로 핀의 색상 출력
• 핀 클릭 시 핀의 크기를 확대하고, 핀의 중앙에 현재 인구 밀도 상태 표시 (여유, 보통, 붐빔, 매우 붐빔)
  • 핀 클릭 시 핀이 화면 중앙으로 포커싱 되도록 설정
• 핀 클릭 시 상세 정보 모달 출력 (1단계)

🖥️ 구현 내용

인구밀도에 따른 핀 색상 출력

📖 학습 내용

🩺 의사결정

북마크, 내일 갈 거야 api 요청

1. 상세 정보 모달창을 띄울 때마다 요청
2. 처음 홈페이지에 접속했을 때 로그인이 되었는지 확인하고 /seoul api에서 같이 보내줌
   1. 로그인이 안 되어 있으면 모두 false 로

핀 위치

• 핀의 겹치는 부분이 뒤죽박죽임
• 위도가 낮은 것으로 정렬한 후 출력하는 방법
  • 프론트에서 하기
    • 50개밖에 안 되니까 프론트에서 해도 될 것 같음
  • 백엔드에서 하기
    • 객체는 순서를 보장하지 않기 때문에 정렬하여 반환하기 힘듦

Object.entries(allArea)
    .sort((prev, next) => {
      // 위도순으로 오름차순 정렬
      return next[1].latitude - prev[1].latitude;
    })
    .forEach(([
_, value]: [string, CoordinatesTypes]) => {
			...
}

Naver Map API 마커 클릭 이벤트

1. 이벤트 위임을 이용해서 구현
   • 마커 확대 기능을 구현하기 힘듦
     • 확대된 것을 다시 되돌려야 하기 때문
   • 지도에 하나의 이벤트만 등록하여 메모리 누수를 방지할 수 있음
2. Naver Map API가 준 이벤트리스너 메서드를 이용
   • 마커 확대 기능을 구현하기 비교적 수월함
   • 각 지역마다 마커를 생성하여 이벤트를 생성하기 때문에 비교적 메모리 사용이 많음

🚧 Trouble Shooting

eslint 에러

// 수정 전
export const apis = {
  test: () => {
    return request('/test', 'get');
  }
};

// 수정 후
export default {
  test: () => {
    return request('/test', 'get');
  }
};

• naver 컨벤션은 export 보다 export default 를 선호하여 export default 로 변경

Naver Map API Marker의 map 프로퍼티 이슈

• 이전 코드

  // undefined로 초기화됨
  const [map, setMap] = useState<naver.maps.Map>();
  
  useEffect = (() => {
  	(() =>
  	  new naver.maps.Marker({
  	    map,
  	    position: testPostion
  	  }))();
  	
  	console.log(map);
  
  }, [map])
  

  • naver.maps.Marker 의 map 속성에는 undefined 가 들어갈 수 있어서 콘솔이 두 번 출력됨 ((property) naver.maps.MarkerOptions.map?: naver.maps.Map | undefined)
    1. undefined
    2. naver.maps.Marker 객체(?)

• 변경 코드

  const [map, setMap] = useState<naver.maps.Map | null>(null);
  
  useEffect(() => {
    if (!map) {
      return;
    }
  
  	console.log(map);
  }, [map]);
  

  • map 을 null 로 초기화해준 다음, useEffect 안에서 map 이 null 이면 바로 return 시켜줌

useEffect의 deps에 값을 넣었을 때 렌더링되는 타이밍

useEffect(() => {
	console.log("deps가 업데이트될 때 혹은 처음 마운트될 때 실행된다.");
}, [deps]);

❓ 궁금한 점

기능 구현을 모두 한 feature branch를 삭제를 해야할까?