gocamp - 캠핑장 현황 지도 프로젝트

개요 > 이전에 했던 팀 프로젝트에서는 프로덕트의 일부만을 담당해서 맡은 부분에 대한 경계라거나, 구현해보지 못했던 기능에 대한 아쉬움이 남아있었다. 이번에는 백엔드1, 프론트엔드1로 구성된 팀으로 프론트 파트를 혼자서 모두 담당해보려고 한다. --- 서비스 상세 > - gocamp는 네이버 map api와 공공데이터(국내 야영장 데이터) api를 활...

지도를 얼마나 잘 활용하는지가 이번 프로젝트에서의 핵심이다. 흔히 알려진 api로는 구글맵,kakao map, naver map이 있다. 이번에는 비교적 친숙한 naver map을 사용하기로 했다.naver map api는 html과 javascript를 바탕으로 안내

map event 등록하기

전국 야영장 데이터를 네이버 map에 오버레이하기 위해선 marker를 사용해야 한다.map을 생성하는 것과 동일하게 Marker 객체를 새롭게 생성하면 간편하게 마커를 생성할 수 있다. addMarkerHandler라는 함수로 분리하여 마커를 추가했다.매개변수로는 n

개요 > - selector를 통해 비동기 처리로 야영장 데이터를 받아오는 경우, Suspense를 활용하라는 에러가 발생한다. > - 하지만, 비동기 데이터가 적용되는 곳이 지도에 오버레이로 그려지는 마커이기 때문에 Suspense를 활용하면 지도가 아닌 다른 화면을

개요 > - naver map api는 마커가 200개 이상 찍힐 때 지도가 버벅일 정도로 성능이 저하됨을 체감한다. 일정 수준 이상으로 축소하는 경우, 군집되어 부분의 마커만을 표시할 필요가 있었다. 문제점 > - 솔직히 naver map api에서 제공하는 마커

개요 > 현재 react-device-detect를 통해 브라우저와 모바일의 UI/UX를 조금씩 다르게 구현하고 있다. 아래 이미지를 통해 브라우저와 모바일의 UI를 비교해볼 수 있다. 상단부터 브라우저, 모바일 > - 모바일의 경우, 캠핑장 마커를 터치했을 때 상

개요 > 야영장 지도의 중요 기능 중 하나인 북마크와 링크 공유 버튼 구현 과정을 담았다. 기능 구현 북마크 현재 프로젝트에 백엔드 개발자가 없기 때문에, Web Storage(Local Storage)를 사용하였다. 아래 이미지에서 북마크 버튼을 클릭하면 북마크가

마커 하이라이트

시연 영상 바로가기 ⚽ 초기 목표와 결과 비교 ⭕ 달성한 것 recoil에 대한 이해 recoil에 내장된 훅을 대부분 사용해보았고, recoil이 왜 react에 최적화된 상태 관리 라이브러리인지 이해할 수 있었다. 이전에 redux를 사용해봤기 때문에, redux와의 장단점을 비교해볼 수 있었으며 각 라이브러리는 전역 상태 관리에서 어떤 점을 중점적으...