#01 한 일, 배운 내용 +
[팀프로젝트]
주제: 영화 소개 페이지
기간: 23.06.05 ~ 23.06.08
팀장: me - 전체 css 디자인
팀원: a - intro 페이지, 페이지 이동, 깃 머지
팀원: c - 서브 페이지 댓글 리스트(로컬스토리지), 서치 페이지
팀원: d - 서브 페이지 영화 소개카드, 페이지 이동
팀원: e - 메인 페이지 배너 디자인
와이어프레임
내용
Intro 페이지
- 애니메이션 (페이지 클릭시 오디오 On)
- THE MOVIE 클릭시 메인 페이지 이동
메인 페이지
- 상단 배너에 TOP3 소개
- SEARCH 버튼 클릭시 서치 페이지로 이동
- fetch로 받아온 영화 카드 리스트
서치 페이지
- 입력창에 영화 제목 검색하면 해당 영화 display
- 이미지 클릭하면 영화 세부 페이지로 이동
영화 서브 페이지(세부 페이지)
- 영화 이미지, 내용 display
- 각 영화마다 로컬스토리지에 저장되어 있는 리뷰 리스트 display
- 댓글 등록, 수정, 삭제 기능 가능
- 홈버튼과 서치버튼 누르면 각 페이지로 이동 가능
#02 회고🧐
📌 새롭게 공부한 내용
1) map 함수 : 어떤 배열에 있는 모든 요소들의 값을 변경해 새로운 배열로 만드는 메소드
map함수
2) z-index
요소들의 수직 위치를 z-index 속성으로 정할 수 있는데 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려감. (z-index 속성이 없으면 0처럼 취급)
우리조에선 z-index 속성을 이용해 이미지가 담긴 div를 겹치게 배열해줬다.
추가로 호버효과도 줬다.
📌 문제점/해결과정
- 대부분 개인과제에서 해본 기능들이라 크게 기능면에서 문제된 건 없었지만
로컬스토리지를 처음 사용해봐서 아주 낯설었다. 여기에 플러스 영화별 댓글 리스트를 어떻게 가져올까 고민이 많았는데 다행히 조원분이 해결해주셨다.
핵심은 원하는 정보를 가져오려면 URL에서 쿼리스트링을 추출한 후 URLSearchParams 객체를 사용해 Query String 파싱한다.
1) location.search 로 '?' 뒤의 쿼리스트링을 가져온다.
2) URLSearchParams 객체로 Query String 파싱한다.
3) URLSearchParams 객체의 메서드 중 get을 이용해 Query String의 특정 키(Key)에 대한 값(value)을 가져온다.
window.location
URLSearchParams 객체 사용 방법
결과 : id와 로컬스토리지에 저장된 comment.id가 동일하면
댓글 리스트에 로컬스토리지에 저장되어 있던 작성자와 댓글을 가져와 붙여라.
📌 아쉬웠던 점
- intro는 비장하게 시작했지만.. 메인페이지부터 급 정적인 느낌이라 아쉬움.. 🫠
- 영화 댓글을 등록할 때 동일한 닉네임을 중복해서 사용할 수 없음, 동일한 닉네임이면 저장 불가,
중복된 비밀번호를 고치라는 알림 없음
---> 댓글 저장과 수정 함수를 따로 뒀으면 가능했을 것 같은데
시간상 따로 분리를 못하고 그냥 동일한 함수를 그대로 사용해 저 기능까지 구현하는 게 어려웠다. - 상세페이지에서 검색 기능 바로 사용할 수 없음, 서치 페이지로 이동을 해야만 거기서 검색 기능을 사용할 수 있음.
--> 검색 기능을 못한 게 아니었는데.... 애초에 와이어프레임을 짜면서 꼼꼼하게 기능 구현이나 페이지 이동 동선을 짰더라면 기능 코드를 짤 때 거기에 맞게 짤 수 있었을 건데.... 하는 아쉬움이 크다. - export/import 사용 못해봄
--> Fetch로 데이터를 가져오는 것도 그렇고 다른 중복되는 함수나 변수에 있어서 조금이라도 모듈 export, import를 사용했음 좋았을 텐데 다들 써본 적도 없고 공부해서 적용할 시간도 부족해 이용을 하지 못했다...! - 메인 페이지 카드리스트 부분만 반응형으로 구현해 아쉬움. 다른 부분은 화면 크기에 따라 잘려서 보인다..
느낀점✨
- 이번 조에선 뭔가 정말 팀플다운 팀플을 한 느낌이다. 첫만남에 간단한 자기소개를 제외하곤 초반 2주간은 정말 대화도 없었는데ㅋㅋㅋ 팀플 들어가니 거의 매일 미팅하며 질문도 하고 어려운 과제를 함께 풀어나갔다. 유독 말이 없으셨던 팀원 한분이 계셨는데 그분이 리팩토링을 적극 제안해주셔서 마지막까지 시간을 정말 알차게 보낼 수 있었다. 또 이번 조에선 깃을 제대로 활용해봤는데 git clone도 모르던 내가 이번 팀플을 통해 꽤나? 깃이랑 좀 친해질 수 있었다ㅎㅎ 깃 명령어는 정말 써도 써도 맨날 까먹어서 생각이 안나는데🫠 조원분 모두 나도 그렇다면서 블로그 정리한 거 보고 맨날 치신다고 ㅋㅋㅋㅋㅋ
암튼 짧은 시간에 함께 으샤으샤하면서 많이들 편해졌는데 이제 내일이면 또 다른 조원들을 만나게 된다. 사전캠프 동기들과 헤어지면서 참 아쉬웠는데 이번 조도 아쉬움이 꽤 크다. 부족한 조장(나)를 만나 답답한 점도 많았을 텐데 다들 적극적으로 따라와줘서 너무나 고마웠고 무엇보다 자기 몫 이상을 해내려 노력하는 책임감 있는 조원들이라 나 또한 그들을 믿고 내 파트에 집중할 수 있었다.
다음에 더 성장한 모습으로 한두명이라도 같은 조원으로 만나 함께하는 시간이 있음 참 좋을 것 같다 ;)
