프로젝트 개요
프로젝트 소개
세상의 영화가 다 있는 뭅다에서 묻다!
MoovDa는 영화 리뷰 및 추천 서비스 입니다.
영화 제목, 감독, 배우, 장르 등 다양한 정보를 활용하여 영화를 검색할 수 있습니다.
사용자들은 자신이 본 영화에 대해 별점을 매기고 코멘트를 작성할 수 있습니다.
사용자들은 자유롭게 영화를 추천하고, 추천받을 수 있습니다.
또한, 본 영화와 보고 싶은 영화들을 리스트로 저장하여 확인할 수 있습니다.
프로젝트 진행기간
23.06.28(수) - 23.07.27(목) (약 1달 간)
팀 구성
FE 개발자 3명, BE 개발자 3명 (총 6명, FE 개발자로 참여하였습니다.)
프로젝트에 사용된 기술 스택 & 협업 툴
• FE - React, Next.jS, Typescript, Styled-Components, Redux-Toolkit
• deploy - vercel
• communicating - discord, zoom, figma, github, notion
프로젝트 타임라인
담당 구현 기능
1. 프로젝트 아이디어 제안 및 구성 (공통)
2. UI 디자인 (FE 공통)
3. MainPoster 컴포넌트
4. MainPage
5. MyPage
6. MovieDetailPage
MainPoster 컴포넌트
- 조건부 렌더링
- default : 영화 포스터 이미지 + 제목
- 본영화 섹션에서 사용될 때, 별점 노출
- 볼영화 섹션에서 사용될 때, (마이페이지의 삭제 버튼을 누르면) 삭제 아이콘 노출
- styled-components의 ThemeProvider 적용
- 컴포넌트의 크기를 유동적으로 조정하여 여러 페이지에서 재사용할 수 있도록 함
MainPage 구현
- 자동 재생되는 캐러셀 슬라이더 구현
- react-slick 라이브러리 사용 (centermode 적용)
- 영화 포스터 조회 기능 구현
MovieDetail Page 구현
- 영화 상세 정보 조회
- 별점 및 코멘트
- 별점 및 코멘트 CRUD
- 코멘트 리스트 페이지네이션 적용
- 코멘트 좋아요 기능 구현
- 코멘트 작성/삭제 시 마이페이지의 본 영화 리스트에 추가/삭제
- 보고싶어요
- 마이페이지의 볼 영화 리스트 추가
- 마이페이지의 볼 영화 리스트 추가
MyPage 구현
- 로그인한 본인의 페이지인 경우와, 타 사용자의 페이지인 경우로 나누어 조건부 렌더링 구현
- 볼 영화, 본 영화 리스트
- react-slick 사용하여 캐러셀 슬라이더 구현
- 회원 정보 조회, 회원 삭제 기능 구현
What I Learned...
1. Next.js, TypeScript의 도입
CRA 방식을 이용해 리액트 프로젝트를 생성하고 개발을 하는 것에 익숙했지만, Next.js 프레임워크를 경험하고 싶어 새롭게 도전하게 되었다. 또한, 타입스크립트를 학습한 이후 실제 프로젝트에 도입하여 사용하는 것은 처음인지라 어려움이 두 배였다.
프로젝트를 진행하는 과정에서 기존의 개발 방식과의 크고 작은 차이와 예상치 못하게 발생하는 오류들로 인해 매번 문서를 찾아보고 공부해야 했지만, 이러한 어려움들을 극복하는 과정을 통해 단기간 빠르게 성장할 수 있었던 좋은 기회라고 생각한다.
2. 배포의 어려움
Vercel과 AWS의 EC2를 이용하여 배포를 진행했다. EC2로 배포한 서버는 http가 적용이 되었고 Vercel로 배포한 클라이언트는 자동으로 https가 적용되었다. 그러나 https와 http 프로토콜은 서로 달라 통신이 되지 않는다. 이 문제를 해결하기 위해서는 EC2 서버주소의 요청 프로토콜을 https로 전환하는 작업이 필요했다. 보기 보다 복잡하고, 쉽게 해결되지 않았던 문제였으나 적극적으로 협력하고 서로의 입장을 이해하며 문제를 해결해나갔다.
3. 잠시 있고 있었던 Hook의 규칙
해당 코드는 api 호출을 여러 곳에서 재사용할 수 있도록 만들어둔 메서드이다. 하지만 이 코드를 실행하려 할 때 이러한 오류가 나타났다.
⛔ Unhandled Runtime Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
"Hook을 함수형 컴포넌트 안에서만 사용이 가능하다"는 규칙을 어긴 것이다.
이러한 기본적인 규칙들을 잊지 않기 위해 끊임없이 노력해야겠다.
4. React-Slick
MainPage와 MyPage에서 캐러셀을 구현하기 위해 react-slick 라이브러리를 사용했다.
다양한 옵션들을 원하는 대로 설정할 수 있어서 편리했다.
캐러셀 기능을 구현하면서 가장 신경을 많이 쓴 부분은 바로 드래그 기능이었다.
영화 포스터 컴포넌트를 클릭할 시 해당 영화의 상세 페이지로 넘어가게 되는데,
캐러셀을 이용하여 포스터들을 드래그하게 되면 의도하지 않았는데도 클릭 이벤트가 발생하게 되어 페이지가 넘어가곤 했다.
수많은 고민 끝에 생각을 하게 된 해결 방안은 드래그 상태를 부여해서 드래그를 할 때에는 클릭 이벤트가 발생 되지 않도록 방지하는 것이었다.
먼저 메인페이지의 캐러셀과 마이페이지의 캐러셀에 각각 적용하기 위해 redux-toolkit을 활용하여 전역 상태로 드래그 상태를 정의했다.
캐러셀 옵션을 설정하는 곳에서 디스패치를 해주고,
beforeChange: handleDragOn, afterChange: handleDragOff 옵션을 설정해주었다.
즉, 드래그 행위를 시작하기 직전에 드래그 상태가 true로 바뀌고, 드래그 행위가 끝난 이후에는 드래그 상태가 false로 바뀌게 되는 것이다.
이 드래그 상태를 적용할 때는, 드래그 상태가 false인 경우에만 영화 상세 페이지로 이동할 수 있도록 하였다.
5. 별점 매기기 기능
회원은 자신이 본 영화에 대해서 별점과 코멘트를 매길 수 있다.
별점 기능이 위와 같이 동작하기 위해서는 다음과 같은 조건이 필요하다.
- 별 아이콘 hover 시 앞에 있는 별들의 색들도 함께 변경되어야 한다.
- 별 아이콘 클릭 시 변경된 색이 유지되어야 한다.
0점부터 5점까지 0.5점 단위의 별점을 구현하고자 했다.
이를 위해 반쪽짜리 별 모양 아이콘을 두 개 합쳐서 하나의 별 모양이 되도록 css를 구성하였다.
별과 별 사이의 간격은 margin-right 값으로 조정하였다.
이 기능을 구현하는 데 활용한 핵심 css 요소는 바로 일반 형제 결합자(~)이다.
일반 형제 결합자는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택한다.
한 코드를 예를 들어보자면
img ~ p { color:red;}이 코드는
img 태그와 같은 부모를 가지고 있고 img 태그 뒤쪽에 위치하는 모든 p 태그의 색상을 red로 적용한다는 의미이다.
이러한 원리를 이용해 별을 hover한 영역과 일반 결합자로 선택한 영역에 대해 색을 지정하였다.
그러나 이렇게 하면 호버하는 색이 뒤에서부터 적용되는 문제가 발생한다.
이때 flex-direction을 row-reverse로 설정하면 문제가 해결된다.
이를 통해 자연스러운 별점 기능을 구현할 수 있었다.
회고
이번 프로젝트에서는 스프린트별로 회고를 하였다.
Sprint1과 Sprint2을 마치고 KPT 회고를 작성하였고, Sprint3을 마친 이후에는 프로젝트를 마친 소감을 작성했다.
Sprint1 (6/28~7/10)
👍 KEEP
- 날마다 개인적으로 TIL을 작성했다.
- 개발하면서 마주친 오류들을 기록하고 있다.
- 본인, 타인 코드 모두 꼼꼼하게 보고, 이해하기 위해 노력하고 있다.
👎 PROBLEM
- 프로젝트가 어느정도 진행된 시점에서 CRA에서 NextJS로 프레임워크를 변경하면서 필요했던 적응의 시간
- SSR 방식이 익숙하지 않고, 파일 구조 등이 많이 달라져서 라이브러리 등을 적용할 때 어려움이 있었다.
✊ TRY
- 클린 코드 작성, 더욱 깔끔하고 효율적인 코드 작성을 고려할 것
- TIL과 오류 기록 미루지 않고 체계적으로 작성할 것
Sprint2 (7/11~7/17)
👍 KEEP
- 참고한 코드에 대해 내가 직접 사용해보고 이해한 코드만을 적용하고 응용하려 했다.
- 사용자를 고려한 개발을 하려고 노력했다. (통일된 UI, 사용자 경험)
👎 PROBLEM
- sprint1에 비해 트러블슈팅하는 기간이 길어져 체감상 진도가 더딘 느낌이라 조급해졌다.
✊ TRY
- 트러블슈팅 또한 개발 단계에서 중요한 과정임을 잊지 않고 문제와 원인, 해결과정을 잘 기록해둘 것
- 멘토링 잘 활용하기
Sprint3 (7/18~7/24)
[소중한 경험 자산] 한 달 채 안되는 기간동안 프로젝트를 진행하면서 정말 다양한 상황들을 마주했습니다. 일정이 짧아 한정된 시간 안에 프로젝트 기획과 디자인, 개발까지 완성하는 것은 결코 쉬운 일이 아니었습니다. 이번 프로젝트를 통해 팀원 간 소통의 중요성을 다시 한 번 깨달았습니다. 지속적인 커뮤니케이션과 피드백을 하면서 최선의 결과를 도출하기 위해 노력했습니다. 또한 팀원 모두가 팀 내의 진행 상황을 파악해가며 다 함께 페이스를 맞추는 것도 중요한 일임을 느꼈습니다. 프로젝트 중간중간 어려움과 절망도 있었지만 결국 해결해내는 모습을 보면서 이 또한 유의미한 경험으로 받아들일 수 있었습니다.
+ 프로젝트 기간동안 작성한 TIL. 기록을 하니 정리가 확실히 되고 업무 효율이 증가한다.
앞으로도 놓치지 않고 기록하는 습관을 가져가보자.
