🔗 토이프로젝트 III
토이프로젝트III는 토이프로젝트II와 마찬가지로 기획과 개발을 할 수 있는 3주와 리팩토링 기간 1주로 진행되었다. 토이I과 토이II는 인트라넷이란 비슷한 주제로 진행되었지만 이번 토이프로젝트III 주제는 영상링크 기반 플레이리스트 공유 플렛폼로 시작부터 좀 더 흥미를 갖고 시작할 수 있었다.
우리팀이 개발한 PLY플렛폼은 Youtube API를 사용하여 사용자가 유투브 링크를 입력하면 해당 영상의 데이터를 기반으로 여러가지의 영상들이 담긴 하나의 플레이리스트를 생성 할 수 있다. 생성 뿐만 아니라 다른 사용자들의 플레이리스트를 "좋아요"하고 팔로우할 수 있으며 댓글을 통해 소통도 가능하다.
🔗 담당역할
기술선택 단계에서 토이II 때 사용했던 firebase의 사용량이 한정적인 이슈로 힘든 부분이 있었는데 이러한 문제점으로 사용량 제한이 없으며 그나마 다루기 쉬운 NoSQL인 mongoDB를 database로 선택하게되었고 database와 서버에 관심이 많았던 나는 서버세팅과 mongoDB연동을 자진해서 담당하였다.
mongoDB연동 및 서버구축 블로그
추가로 database 관계형 다이어그램인 ERD와 로그인&회원가입 모달, 플레이리스트를 추가하고 수정 할 페이지를 담당하였고 마지막으로 회원가입을 하고 로그인까지의 테스트코드를 작성하였다.
🌈 결과물
로그인 & 회원가입
모달 스토어를 사용하여 해당 모달들의 open & close의 상태를 관리하였고 로그인 이후 유저의 데이터를 전역스토어로 관리하였다. 또한 zustand의 미들웨어 persist를 사용하여 유저 데이터를 로컬스토리지에도 유지되게끔 하였고 로그인을 하지 않고 플렛폼의 각 카테고리와 하위 route에 접근할 때 로그인 모달이 띄워지게끔하였다.
만들다보니 공통 컴포넌트로 모달컴포넌트도 만들었다. 😎
새 플레이리스트 추가
사용자가 새로운 플레이리스트를 추가 할 때 이용되는 페이지이며 업로드할 플레이리스트의 각 정보를 입력할 수 있다. Youtube 영상 링크를 추가하면 오른쪽에 List형태로 나타난다.
새 플레이리스트 수정
사용자는 업로드했던 플레이리스트를 수정 할 수 있으며 플레이리스트 메인 썸네일과 영상들의 순서는 Drag And Drop으로 수정 가능하다. (물론 영상 삭제도 가능👍)
ERD
팀원들과 제일 세심하게 얘기했던 데이터베이스 구조와 API.....😱
컬렉션은 크게 사용자데이터와 플레이리스트 데이터로 나누었고 플레이리스트가 추가되면 사용자의 myPlaylists document에도 추가하여 관리하자는 찐찐찐최종의 결과로 완성된 ERD이다.
팀원들이 ERD를 통해 데이터베이스 구조 파악과 API설계를 하다보니 변경사항이 생기면 즉각적인 수정을 하려고 노력했던 것 같다! 처음 만들어본거라 정답은 아닐 수 있어도 좋은 경험이었다.
Playwright 테스트코드 작성
이번 프로젝트에서 선택요구사항으로 있었지만 테스트코드 작성을 경험해보고 싶어서 발표회 직전 주말에 기초 공부를 토대로 작성해보았다. 테스트를 위해 해당 Element의 id값들을 추가하면서 실패를 거듭하다가 결국 성공적인 테스트가 되어 짜릿한 경험을 할 수 있었다.⚡️
🔗 리팩토링
저번 토이프로젝트II와 같은 방식으로 멘토님의 코드리뷰와 민태강사님의 피드백을 토대로 리팩토링을 진행하였다.
하위탐색이 긴 데이터는 분리하여 나누기
아래의 사진처럼 하위의 탐색이 긴 데이터의 로직을 반복해서 선언하다보면 가독성도 안좋고 데이터 파악도 느려진다.
반복되는 데이터를 상단에 한번 선언해주어 가독성뿐만 아니라 데이터 파악도 빠르게 진행할 수 있었다.
const newPlyData = playlistDataToAdd.current?.getPlaylistData();
if (newPlyData) {
const playlistData = {
userId: userData.userId,
title: newPlyData.title,
content: newPlyData.content,
disclosureStatus: newPlyData.disclosureStatus,
tags: newPlyData.tags,
link: addedPlaylist.map((item) => item.link?.[0]),
imgUrl: addedPlaylist.map((item) => item.imgUrl?.[0]),
};mutation성공시 쿼리키 초기화를 통해 즉각적인 업데이트해주기
사용자 입장이 되어 테스트를 마구마구 해보다가 플레이리스트의 영상 목록을 수정한 이후 플리 상세페이지로 들어가면 새로고침을 해야 영상 목록이 업데이트 되는 상황이 발견되었다. 수정이 완료되고 쿼리키를 초기화하지 않아 상세페이지에서 캐싱된 데이터가 그대로 남아있던 것이었다.
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { NewPlaylistData } from '@/types/playlistTypes';
import { updatePlyData } from '@/apis/updatePlyData';
const useNewPlaylist = (playlistId: string) => {
const queryClient = useQueryClient();
return useMutation<
number | null,
Error,
{ playlistData: NewPlaylistData; type: string; playlistId: string | undefined }
>({
mutationFn: ({ playlistData, type, playlistId }) =>
updatePlyData(playlistData, type, playlistId),
onSuccess: () => { // 추가로 작성한 부분
queryClient.invalidateQueries({ queryKey: ['watch', playlistId] });
},
});
};
export default useNewPlaylist;onSuccess옵션과 invalidateQueries메서드를 통해 성공 이후 해당 쿼리키를 초기화해주었더니 즉각적인 업데이트가 성공적으로 되었다.
기본 Radio 토글버튼으로 바꾸기
민태강사님께 한가지 아쉬웠다는 피드백을 받았는데 그 한가지가 기본 Radio버튼의 UI였다.🥲 다음날 바로 초기 디자인을 토대로 작업했던 기본 Radio버튼을 토글형태의 버튼으로 수정했다 !!
🔗 토이프로젝트 III를 마치며
발표회 당시 민태강사님의 피드백으로는 트러블 슈팅과 기술선택에 대한 근거를 설명하는데에 있어서 인상적이었고 마치 Fake 유투브사이트 느낌이 들 정도로 구현이 잘되어있으며 vaildation도 꼼꼼하게 챙겼다고 칭찬해주셨다. 추가로 테스트코드 작성한 점도 아주 훌륭했다고 말씀해주셨다.😆 아쉬운점으로는 위에서 언급했듯이 기본적인 Radio의 UI를 언급해주셨다.
이번 프로젝트를 하면서 팀원들과 다양한 테스트를 통해 사용자 경험에 기반하여 발생 될 오류를 해결하는 과정이 힘들었었다. 기능구현이 되었다고 생각했지만 테스트 과정에서 발생되는 오류들로 인해 창피하면서도 꼼꼼하지 못했던 부분에 자책도 했던 것 같아서 더 힘들었던 것 같다. 하지만 이런 과정을 통해 해결해가면서 프로젝트의 완성도를 보여준다는 것을 경험할 수 있었고 오류를 해결하는 과정들도 매우 중요하다고 생각되었다.
💡 좋았던 점
- Tanstack Query를 이용하여 데이터를 캐싱 및 서버 상태관리
- Zustand를 이용하여 다양한 데이터를 전역으로 상태관리
- MongoDB연동 및 서버 구축
- Playwright를 사용하여 테스트코드 작성
- 재사용, 유지보수를 고민하며 컴포넌트 추상화
💡 아쉬운 점
- 개발을 하면서 익숙해진 UI를 다른 시선으로도 바라보며 더 좋은 UI로 디자인 할 수 있어야한다고 느꼈다.
- 앞선 프로젝트들과 달리 몇일 연속으로 새벽 늦게까지 작업을 했던 것 같은데 예민해져 있다 보니 팀원들과 원활한 소통을 못할때도 있던 것 같아 미안했다.
💡 배운 점
팀원들의 코드들을 보면서 로직 처리 방법과 낯선 메서드, 컴포넌트 설계 등을 배울 수 있던 것 같다.
