팀 프로젝트 Let's Travel 회고
📜 프로젝트 내용
사용자의 설문조사를 바탕으로 사용자의 취향별 여행지를 추천해주고 다른 여행자들과 소통할 수 있는 웹 어플리케이션
📅 개발 일정
- 2023.12.5 - 2023.12.11
👥 팀원 구성
⚙️ 기술 스택
⚙️ 서버
⚙️ 사용 라이브러리
- sweetalert2
- react-toastify
- Google Maps API
- Youtube API
Let's Travel 여행하자(Let's Travel) 페이지 소개
메인페이지
메인페이지에서 동그란 비행기 클릭시 로그인 할 수 있다.
여행하자(Let's Travel)은 로그인 후 이용이 가능하다.
로그인과 회원가입을 선택 할 수 있다.
로그인과 회원가입 페이지
로그인 시 네비게이션바에 로그아웃이 생긴다.
설문조사 페이지
설문조사 페이지에서는 원하는 요소를 하나 선택하고 다음페이지로 넘어갈 수 있다.
다시하기를 클릭하면 설문조사를 다시 할 수 있고 결과보러가기를 클릭하면 결과를 볼 수 있다.
결과 페이지
결과 페이지에선 설문조사 결과에 지도 사진을 확인할 수 있다.
사진을 클릭할 시 유튜브 영상을 볼 수 있다.
댓글 페이지
댓글 페이지에서는 나라별 댓글을 확인할 수 있고, 댓글의 수정과 삭제를 할 수 있다.
프로젝트에서 나의 역할
구글 소셜로그인
Firebase Authentication을 통해 구글 소셜로그인을 구현하였음
Youtube Data API
Youtube Data API 를 사용하여 도시의 이미지 클릭시 도시와 관련된 유튜브 영상을 sweetalert2 를 통해 띄움
React-query
react query를 활용하여 firebase 통신 부분을 리팩토링하였음
마주한 오류들
Youtube Data API 할당량
유튜브 API를 사용하던 중 할당량에 문제가 있었다.
하루에 제한된 할당량은 10,000이다. 그런데 검색 API 한번 사용시 100 이라는 할당량이 사용되었고, 이는 100번만 검색하여도 할당량이 초과된다.
그래서 재생목록을 만들어 재생목록을 불러오는 API를 사용하였다.
재생목록을 불러오는 API는 할당량이 1 밖에 되지 않는다.
React query invalidateQueries
React query 사용시 refetch 를 해야하는 부분이 있었는데, invalidateQueries 를 한번만 호출하여 refetching 이 안되는 문제점이 있었다. 각각 onSuccess에 invalidateQueries를 달아주었다.
const deleteMutate = useMutation({
mutationKey: ['comments'],
mutationFn: deleteData,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['comments'] });
},
});
const updateMutate = useMutation({
mutationFn: updateData,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['comments'] });
},
});
const addMutate = useMutation({
mutationFn: addData,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['comments'] });
},
});KPT 회고
Keep - 현재 만족하고 있는 부분
- 소통이 잘 이루어져 프로젝트 진행이 원활하게 진행됨
- Git 컨벤션을 정해서 작업 하였는데 잘 지켜졌다고 생각하고 PR과 Merge가 자주 이루어져 큰 충돌없이 깃허브에서 많은 시간을 빼앗기지 않은 점
- CRUD 기능을 리액트 쿼리를 사용하여 구현함
- 깔끔한 ui로 프로젝트 컨셉이 잘 드러남
- 내가 맡은 기능이 아니더라도 개선점에 대해 의견을 제안하면 수용하고 수정하는 과정들이 좋았음
Problem - 불편하게 느끼는 부분
- 회원가입시에 실시간 유효성 검사가 진행되지 않아 UX부분에서의 불편함
- 사용자의 정보를 확인할 수 있는 마이페이지의 필요성과 마이페이지에서 프로필을 수정하거나 내가 남긴 댓글을 확인하는 기능이 추가되면 좋을 것 같음
- 구글맵을 사용하여 국내 지도 api를 사용해볼 기회가 없었던 점
- 나라를 선택하여 댓글 입력시, 작성한 댓글 state로 이동하지 않아서 사용자에게 혼란을 줄 수 있었던 부분
- 설문조사 컨셉에서 질문의 양이나 출력 데이터의 양이 더 많았으면 좋았을 것 같고 다중선택이 가능해도 좋을 것 같음
Try - Problem에 대한 해결책, 당장 실행 가능한 것
- Git commit 메세지 디테일하게 작성(ex. 댓글창 탭 수정 → 댓글창에서 탭 클릭후 외부클릭시 활성화가 풀리는 부분 수정)
- 다음 프로젝트에서 지도를 쓸 일이 있다면 네이버나 카카오 지도도 이용해보기
- 더 많은 데이터로 다양한 선택지 제공
- 댓글을 작성하면 해당 페이지로 이동할 수 있는 focus 기능 추가
