아웃소싱 프로젝트

프로젝트 배포링크

튜터님 피드백

• motitube 동기부여 영상 추천 아이디어가 좋음.
• confirm 창 같은 경우 toastify보다는 sweetalert2를 쓰는 것이 좋음. (toastify는 지원하지 않을 것)
• 홈화면 상단에 캐러셀 적용이 좋았음. 조금 더 나은 방향은 몇 초 단위로 자동으로 화면이 슬라이드 되는 기능을 추가하면 좋을 듯함. 프로그램이 살아있다는 느낌을 주는 것이 UX적으로 좀 더 사용자가 좋은 느낌을 받을 것.
• 영상별로 카테고리가 잘 적용되어 있음. 다만 카테고리별로 필터링 탭 적용해주었으면 좀 더 좋았을 것임.
• README 깔끔, github관리 전반적으로 깔끔하게 관리되었음. (main, dev 말고 feat 브랜치는 정리차원에서 삭제해도 무방함 => commit이 dev에 합쳐져 있기 때문에 commit단위만 있으면 되므로), commit 컨벤션도 굉장히 깔끔.
• 리액트 쿼리 잘 작성했는데 버전3로 작성했음. devtools는 최신버전임. 리액트쿼리도 최신버전으로 설치하는 것 권장. (지금은 상관없지만 좀 더 심화적으로 들어가서 최적화까지 고려한다면 리액트 버전3은 한계점이 있음)
• custom hook 굿.

KPT 회고

Keep - 현재 만족하고 있는 부분

• Firebase 인증 및 데이터베이스 : 백엔드 없이도 firebase로 인증과 db를 사용해 커뮤니티 서비스를 제공할 수 있었다
• React Query를 통한 API 요청 및 응답 관리 : React query는 redux thunk보다 간단하고 필요한 데이터를 로딩하고 관리하는 것이 더 쉬웠다 + 실시간 업데이트
• Redux Toolkit 활용 : Redux Toolkit이 Redux보다 더 쉽게 사용
• YouTube API : YouTube API를 이용하여 프로젝트 내에서 유튜브 동영상의 내용을 가져오고 표시할 수 있었다

Problem - 불편하게 느끼는 부분

• 다소 부족했던 소통 : 매일매일 각자의 진척도를 체크하거나 코드 리뷰를 하는 등의 소통이 다소 부족했다. 그에 따라 제출 직전 다른 상태 관리 라이브러리를 사용한 팀원이 있었고 결국 리팩토링을 하지 못한 채 그 기술은 생략하고 제출을 했다.
• 비동기 처리 관리 : API와 관련된 로직이 여러 곳에 분산되어 있고 복잡하게 엮어 있다보니 코드 유지보수하기가 어려웠다
• 성능 : 게시글이나 댓글의 수가 많아질 경우 로딩이 오래 걸리는 문제
• 데이터 로딩 서버에 호출하는 동안 완성되지 않은 화면이 잠깐 보였다가 다시 렌더링 되는 이슈

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• 원활한 소통 : 협업이라는 프로젝트 안에서 소통의 중요성을 체감했기에 매일 매일 정해진 시간에 회의를 가지도록 할 것임.
• React Query 활용 : 서버로부터 데이터를 요청하는 동안 컴포넌트의 상태를 만들지 않고 렌더링 및 다양한 화면 처리
• 성능 최적화 : 댓글이나 동영상이 많아질 경우를 대비해 페이징 또는 무한 스크롤링 도입
• DevTools의 활용 : DevTools를 활용하여 상태 및 쿼리 변화를 추적하고 디버깅할 것! 개발 및 유지 보수 단계에서 큰 도움!