팀 프로젝트 회고
2 주간의 팀플이 끝을 맺게 됐다. 길다면 긴 시간이였을 수도 있고 짧다면 또 짧은 기간이였겠지만 나에겐 생각보다 길게 느껴지는 시간이였.. 개인 프로젝트를 진행할 때도 이 정도 까진 아니였는데..(대충 고됐단 얘기다 😂)
이번 팀 프로젝트는 개인프로젝트에서 진행했던 영화 페이지를 바탕으로 추가적인 기술과 기능들을 넣어 새로운 느낌의 영화 웹페이지를 Rebuild하게 됐다.
<새롭게 추가된 필수 사항>
-
영화 정보 상세 페이지 구현
-
상세 페이지 내 영화 리뷰 작성 기능(local storage 사용)
-
Github PR(Pull Request)를 사용하여 협업 진행
-
UX를 고려한 Validation check
- 영화 검색 시
- 댓글 작성 시
- 추가 기능 구현 시
-
Javascript 문법 요소로 구현
<선택 사항>
- CSS와 추가적 기능 자유로히 사용
팀 단위로 움직이다 보니
규칙적인 회의 시간, 각각의 코드 진행 상황, 그 외 협업 툴을 쓰면서 지키는 룰과 매너를 갖춰 서로가 낯 부끄러워 할 일 없이 진행하는 게 중요했다.
여러 기능 중에 내가 담당했던 기능은 캐러셀을 구현하고 해당 이미지에 맞는 동영상을 modal 팝업 창에 띄워 예고편을 보여주는 것이다.
메인 페이지 상단에 케러셀로 이미지 슬라이드를 구현하고 각 이미지에 modal 팝업 창을 띄워 Youtube 영상을 연결하여 보여주는 것이다.
TMDB API로 이미지와 영상을 가져오려 했으나
영상까지 넣으면 페이지 자체가 무거워져(메모리를 사용하는 영역이 커진다) 로딩하는 부분만 4-5초를 까먹는다.
이런 문제를 피하고자 선택한 것이 각 이미지를 가져와 붙이고 동영상 ID를 iframe태그로 가져와 직접적으로 이미지에 씌우는 방법을 택했다.( 밑에 들어갈 추가적인 부분에도 API가 3종류가 쓰이기에 서로 다른 스타일로 접근했다.)
이 방법을 하드코딩이라고 부르고 개발자들이 기피하는 방법이라고 한다..
이 과정을 실행하는데 있어 시간적 소비와 애먹었던 부분이 modal팝업까진 구현을 했지만, 영상을 삽입하는 부분에서 modal팝업과 충돌이 생겨 초기 작성했던 코드는 버리고 새로 코드를 짜 지금에 와서야 완성이 됐다.
