쓰리피트(3-feet) 회고

프로젝트 Github 링크1

맡은 일

프로젝트에서 지도 API 와 관광공사 TourAPI 를 사용했는데, 나는 이 두 가지를 조합해서 지도에 장소의 위치를 표시하는 일을 맡았다.

1. 주요 기능

• 구단 별 홈 구장과 주변 업체들의 위치를 지도에 Marker 로 표시함.
• 관광공사 Tour API 를 통해 중심 좌표 기준으로 주변 업체들을 검색해 목록은 숙소 / 식당으로 구분함.
• 지도에서 Marker 를 클릭하면 중심 좌표를 해당 좌표로 이동할 수 있음.
• 지도 우측에서는 중심 좌표를 기준으로 10km 내의 장소 목록을 보여줌.

잘한 부분과 아쉬운 점

• 잘한 부분

  • 팀원 간 배려하며 협업을 진행
  • 변수 명, prettier 설정 및 코드 컨벤션, 프로젝트 파일 구조를 꼼꼼하게 정해 혼선이 없었음, 또한 코드 리뷰를 통해 서로 조언을 주고 받음.
  • 개인적으로, 저번 프로젝트보다 전역 상태 관리를 적극적으로 관리해 코드 작성이 보다 쉬웠다!

• 아쉬운 점

  • 지도를 사용할 때 UX 개선을 하지 못해 아쉬움.
  • 네이버 지도를 선택했는데, 좌표 기반으로 장소 검색 기능이 없어서 아쉬웠음.
  • 카카오 맵에는 기능이 있는 것을 확인해, 추후 국내 지도 API를 사용한다면 카카오 맵을 먼저 고려할 생각임.

---

5. 자체 평가 의견 - 3

• 느낀점 및 경험한 성과

  • 2개의 API(지도, 관광 정보) 를 적극적으로 이용해보며 사용법을 익혔으며, 추후 프로젝트에 큰 도움이 될 것 같음.
  • 비동기 작업에 의존하는 컴포넌트가 많았는데 이와 관련해 렌더링에 문제가 생겼는지 오류가 발생하곤 했다.
  • 이 때문에, <Supspence></Suspense> 를 Map.jsx 의 최상위 요소로 설정했다.
  • <Suspense></Suspense> 는 컴포넌트가 읽어야 하는 데이터가 준비되지 않았다고 알려주는 역할이라고 한다.
  • 기술적인 내용은 별도로 작성해보자!

---

5. 자체 평가 의견 - 4

• 추후 개선점이나 보완할 점

  • 지도에서 장소마다 Marker 를 사용하는데, 해당 장소의 이름 정도는 Marker 에 표시할 수 있도록 수정할 필요가 있음.
  • 그렇기 위해서 카카오 맵을 통해서 리팩토링이 필요하다!

---