CRA 에 비해 HMR과 RollUp을 사용해 빠른 경험을 제공하기 때문에 Vite를 사용하기로 하였습니다.

Supabase BaaS를 사용한 프로젝트 이어서 Supabase Auth 를 사용하면 같은 DB를 사용할 수 있어 편리하여 채택하였습니다.

사용자가 많고 웹상에 자료가 많은 Naver Map 의 API를 사용하여 지도를 구현하였습니다.

팀원간 숙련도 차이로 컨벤션이 불일치하여 중복되는 코드가 많고, zustand와 tanstack query를 동시에 사용하는 등의 문제가 있었습니다. 컨벤션의 중요성을 배울 수 있었고, 추후 프로젝트에서는 초기에 최대한 컨벤션을 일치시키려 노력했습니다.

Naver Map 외부 script를 상위 jsx 나 index.html에 적용하는 대신 사용되는 컴포넌트의 useEffect 내에서 동적 적용하도록 처리하여 리소스를 효율적으로 관리하려 노력했습니다.

Naver Map API 에서 infoWindow의 경우 문자열로 입력하게 되어 있는데, 이 부분을 React 컴포넌트를 사용하여 더욱 동적인 UI를 제공하기 위해 CreateRoot과 render 메서드를 활용했습니다. React 컴포넌트를 임시 DOM요소에 렌더링하고 해당 HTML 내용을 infoWindow 에 설정함으로서 문제를 해결했습니다.