팀명이 GO!YO!가 된 이유가 있다.
내향적인 팀원들로 모인 탓인지 처음 팀에 모였을 때 아무 말이 없고 한 마디를 뱉는 게 너무 어려워 고요했기 때문이다.
그런 와중에 제가 '팀명이 고요가 뭐야.. 뭔가 좀 파이팅 넘치고 싶다'는 생각에 혼자 더 생각해보겠다 했는데 또 다른 팀원이 힘겹게 의견 꺼낸걸 없애버리고 싶진 않아서 저렇게 바꾸자고 하였다.
발표할 때 팀명 소개도 했는데 같이 계셨던 분들이 웃고 넘어갈 수 있어 긴장된 분위기가 한층 가벼워진 것 같았다.
팀프로젝트 전에 개인과제로 TMDB 사이트에서 영화 API를 불러와 영화 카드리스트와 검색기능 구현까지는 해놓은 상태였다.
각 팀원들의 개인과제 중 하나를 선택하여 추가구현 미션을 받았다.
- 영화정보 상세 페이지 구현
- 상세 페이지 영화 리뷰 작성 기능 구현
- github PR(=Pull Request) 사용한 협업
- Javascript 문법 요소를 이용하여 구현
- 도전과제(필수X)
우리 팀은 총 네 명으로, 아래 네 파트로 각자 역할을 나눠 코드를 작성하였다. 각자 맡은 부분에 대한 CSS도 각자 꾸며주었고, 마지막에 색상이나 크기 통일하는 부분만 한 분이 추가적으로 안정감을 줄 수 있도록 통일하는 작업을 해주셨다.
메인배너
영화리스트 탭메뉴(평점순/상영예정작), 상세보기 버튼으로 페이지이동
상세페이지 구성
영화 리뷰 작성 기능
그 중 내가 맡은 부분은 영화카드를 처음에 평점순 영화정보를 불러왔는데, 상영예정작 정보도 불러와 탭메뉴를 만들어 각각의 영화카드를 보여주는 것과 각 영화카드에 마우스를 대면 '상세보기' 버튼이 보이고, 그 버튼을 클릭하면 현재 창에서 상세페이지로 넘어가는 방식을 구현했다.
1. '상세보기' 버튼 만들기
1) TMDB에서 Top Rated 영화 20개 정보를 fetch를 이용하여 API 들고오는 함수 사용
2) 영화카드 하나를 만드는 함수 - innerHTML을 이용하여 영화카드 하나에 들어가는 구성을 동적으로 만들어줌.
innerHTML에 들어가는 구성을 보면 처음에는 class="cardWrap"인 div태그 아래에 바로 button태그를 작성했는데 버튼 내용에 대한 마우스오버 기능을 하려하니 원하는 대로 나오지 않자 class="detailBtnWrap"인 div태그로 한 번 더 감싸주었다.
2. 상세보기 버튼으로 페이지이동
바로 위 코드 사진 속 innerHTML 속 button 태그를 보면
onclick="locaiton.href='./detail.html?id=${object.id}'"
로 버튼을 클릭하면 해당 영화id값의 상세페이지로 이동할 수 있게 하였다.
여기서 조금 헤맸다.
① onclick="window.open='./detail.html'"으로 하면 새로운 창으로 상세페이지가 열린다.
② locaiton.href는 뒤에 링크주소가 와야한다고만 알고 있었는데 링크주소가 있는 것은 아니었기에 현재 창에서 새로운 페이지로 이동하는 방법을 알고 싶어 계속해서 멈춰있었다. 그러다 팀원분들께 제 생각을 말씀드리고 다른 방법이 없는지 여쭤봤더니 locaiton.href 뒤에 꼭 링크를 써야하는 것은 아니라고 하셨다. ①처럼 뒤에 해당 파일명을 써도 된다고 하셨다.
③ 그렇게 locaiton.href='./detail.html'를 사용하여 원하는 방법으로 이동할 수 있었다.
3. 영화리스트 탭메뉴 구현 (평점순/상영예정작)
탭메뉴와 영화카드를 보여줄 차트부분의 html구성은 아래 사진과 같다.
영화카드를 만드는 것은
평점순은 movie.js 파일에서, 상영예정작은 upcomMov.js 파일에서 만들어 줬으며,
movie.js내용과 upcomMov.js 내용 중 카드를 만드는 loadCard 함수를 index.js 파일로 import하고 함수를 실행시켜 카드 20장을 로드한다.
각 탭리스트 중 평점순의 li태그에 class="is_on"을 줘서 기본값으로 활성화 시켜두고, 다른 탭을 클릭하면 기존 영화카드(class=cont)를 display:none처리하여 가리고, 클릭된(this) 탭이 활성화되며 해당 영화카드를 보여주는 식으로 코드를 작성하였다.
처음에 각 영화카드 차트를 addEventListener를 사용하여 display: none / block처리를 하려고 했다가 잘 안되어 방법을 바꾸었다. 바꾸는 과정에서 각 카드리스트의 변수명을 cardList 1과 2로 바꾸었고, 변수명이 같을 필요가 생기면서 'class=cont'인 div태그로 각각 감싸주었는데 굳이 cardList를 1과 2로 나누지 않고 그대로 뒀다면 div태그가 하나씩 더 생기지 않고 더 가독성있는 코드를 작성할 수 있지 않았을까 싶다.
※팀 프로젝트 하면서 아쉽고 어려웠던 점※
(4번을 제외하곤 내가 느낀 점)
- 다른 팀 발표를 보며 필수구현과제는 모두 했으나 더 추가적인 기능 욕심을 내지 않고 끝냈던 점이 아쉬웠다.
- 각자 구현해낸 코드를 되짚어보며 다른 팀원들에게 공유하며 설명하는 시간을 가졌으면 좋았을 것 같다.
- Git을 이용한 협업 과정에서 생기는 오류들을 처리하는 것이 어렵고, 자꾸만 팀원들에게 물어보며 처리하는 것이 이해하는 데에는 도움이 많이 되었지만 너무 의존하게 되어 나중에 팀원 없이 혼자서는 못 할 것 같은 두려움도 생겨버렸다.
- 독립적으로 각자 맡은 부분만 구현하다보니, 그 외의 부분들을 생각하지 못하여 일부 디테일을 놓친 것 같다.
1) 메인페이지에서 검색 시에 영화카드를 평점순 영화와 상영예정작 영화를 모두 보여주지 못한 부분
2) 상세페이지에서 검색기능이 안되는 점
=> 되게 하거나, 안된다면 검색창을 상세페이지 내에서는 지웠으면 좋았을 것 같다.
3) 상세페이지 내 리뷰 작성기능 중 삭제기능만 있고 수정기능은 구현하지 못한 부분
첫 팀 프로젝트였는데, 팀원들(나 포함)이 내향적이라 친해지는데 시간은 걸렸지만 의사소통 문제 없이 각자 맡은 역할 잘 구현해주셨고, 한 팀원이 어렵고 힘들어하여 질문하면 같이 모르는 부분이라도 자기 일처럼 나서서 도움을 주시는 등 여러 부분을 배울 수 있었습니다.
우리 GO!YO!팀 못잃어....😢(내일부터 팀이 변경되는...)
