JavaScript 팀 과제 회고

·2024년 5월 9일

프로젝트 설명

프로젝트 요구사항

  • 기간 : 5/1(수) ~ 5/9(목)
  • 과제 개요
    1. 개인과제에서 작성한 [내배캠 인기영화 콜렉션]을 발전시키는 팀 프로젝트
    2. 팀원들의 프로젝트 N개 중 1개를 대표로 선택, 팀 프로젝트로 발전

1석3조(A03조) 프로젝트 정보

  • 프로젝트 명 : FlickerFlow
  • 소개
    • 한 줄 정리 : "Flicker"는 빛나는 것이라는 뜻으로 여기서는 영화를 가리키고, "Flow"는 순조롭게 흐르는 것을 의미하며, 영화를 원활하게 검색하고 관리하는 경험을 나타냅니다.
    • 내용 : 찜하기 기능과 영화 관람 등급 및 리뷰 작성 기능이 있는 상세 페이지, 한/영 번역 기능이 있는 영화 검색 사이트입니다.

우리 팀은 추가 기능으로 "찜하기 기능"과 "한/영 전환 기능"을 제작하기로 했고, 나는 "찜하기 기능"을 담당했다!

내가 담당한 부분

  • 로컬 스토리지 이용하여 찜하기 기능 제작
  • 찜 목록 페이지 html, css 수정
  • 상세 페이지 하트에 토글 및 색 변경 기능 구현
  • 비밀번호 input type password로 변경
  • 팀원들 작성글 병합하여 발표 스크립트 작성
  • 발표

처음에는 리뷰 CRUD 기능을 담당하려 했으나 다른 팀원분이 이미 만들어두신 게 있으셔서 급하게(?) 찜하기 기능을 맡아 제작했다!
또한 다들 발표에 대한 부담감을 갖고 계신 것 같아서, 상대적으로 내가 그런 부담감이 적어보여 내가 이번에도 발표를 맡았다.

결과물 이미지

메인 페이지

메인 페이지

  • 인기순, 높은 평점순의 영화들을 볼 수 있고 영화 검색이 가능하다.
  • 각 영화 카드를 클릭하면 상세 페이지로 이동한다.
  • 한/영 전환 아이콘을 누르면 언어가 바뀐다.
  • 하트 아이콘을 클릭하면 찜 목록 페이지로 이동한다.

상세 페이지

상세 페이지

  • 각 영화의 자세한 정보들을 볼 수 있다.
  • 제목 옆 하트 버튼을 클릭하여 찜한 영화로 저장할 수 있다.
  • 리뷰 작성, 저장, 수정, 삭제가 가능하다.

찜 목록 페이지

찜 목록 페이지

  • 내가 찜한 영화 목록을 볼 수 있다.
  • 이미 찜한 영화의 상세 페이지에서 하트 버튼을 재클릭하면 찜 목록 페이지에서 해당 영화가 사라진다.
  • 현재 설정한 언어를 지원하지 않는 경우 해당 사실을 알리는 알럿창이 뜨고 해당 영화는 사라진다.

발표 피드백

(류제천 튜터님 피드백)

  • 디자인이 깔끔하다.
  • 찜하기 기능 : 실제로 많이 사용되는 로직이라 하길 잘했다.
  • 한/영 전환 기능 : 현재는 페이지의 규모가 작아 노가다로 해도 괜찮지만, 추후 페이지의 규모가 커지면 까다로워진다. 일괄적으로 객체 형태로 관리할 수 있도록 도와주는 라이브러리를 참고하면 좋다.
  • 리뷰 기능, 코드 구성 : 개발 경험 있는 팀원이 있는 것 같다. 깔끔하다.
  • 깃 사용 시 dev 브랜치가 아닌 main에서 마무리할 것.
  • 영상물 상영 등급 : 다른 API를 사용해야 하는 건데 구현 가능한가에 대해 고민하고 시험해보는 것이 공부이고 개발자로서 바람직한 자세이다.
  • 상세 페이지 영화 포스터 투명한 백그라운드를 넣은 것이 센스 있었다.

좋은 말씀을 많이 해주셔서 감사했다!

Liked

  • 찜하기 기능 제작을 통해 localStorage 사용법을 간단하게나마 익힌 것 같아 좋았다.
  • 잘 하시는 분들이 계셔서 그분들의 코드를 보며 공부를 할 수 있었고, 자극을 받을 수 있었다.
  • 다들 예쁜 말로 잘 소통하시는 분들이라 팀 내 분위기가 괜찮게 유지될 수 있었던 것 같다! 역시 소통이 제일 중요하다.

Lacked

  • 발표 준비에 적지 않은 시간을 들였으나 사실 만족할 만큼의 발표를 해내지는 못 했다. 발표 스크립트를 세심하게 짰음에도 불구하고 화면을 왔다갔다 하면서 보다보니 중간에 흐름을 놓쳐 다시 돌아가기도 했고, 미처 못 보여준 부분도 있었다. 저번 미니 프로젝트 발표보다도 불만족스러웠다.
  • 실력이 출중하신 분들도 계셨고 추가 기능이 두 개나 있었는데도 생각보다 이르게 끝나서, 저번 프로젝트와 마찬가지로 좀 더 다른 요소를 추가했다면 어땠을까 하는 아쉬움이 있었다.
  • Promise, async await, API 받아오기 등 이런 부분에서 이해까진 되어도 활용을 하는 게 아직 많이 버거웠다. 때문에 팀원분의 도움을 많이 받았고, 이런 부분에 대해 더 공부가 되었다면 좋았겠다는 아쉬움이 있었다.

Learned

  • 협업 시 소통이 정말 중요하다는 당연한 사실을 다시금 느낄 수 있었다. 특히 Git 사용 시에는 웬만해선 충돌이 안 날수가 없다. 서로 긴밀하게 소통하며 바로바로 피드백을 주고받는 게 참 중요하다는 걸 배웠다.
  • 우리 팀에 계셨던 분들의 코드, 그리고 다른 팀의 발표를 보면서 정말 잘 하시는 분들이 많구나 하는 걸 느꼈다. 조금이라도 따라가기 위해 많은 노력을 들여야겠다는 걸 다시 한 번 상기시킬 수 있었다.

Longed for

  • 발표를 하게 된다면 현재보다 더욱 혼자서 시연을 많이 해보기. 연습만이 살 길이다.
  • 일찍 마무리가 될 경우 간단한 추가 기능이라도 제안하고 넣어보기.
  • 파비콘 넣기. 저번에도 하려고 다짐한 부분인데 잊고 이번에도 놓쳤다. 필수는 아니지만 기왕이면!
  • 깃 사용 시 dev 브랜치가 아닌 main에서 마무리할 것. 튜터님의 피드백이었다.
profile
웹 프론트엔드 개발자

0개의 댓글