<팀 프로젝트 진행 상황>
1. 메인페이지&상세페이지 공용부 팀에 공유
메인페이지와 상세페이지에 공통으로 들어가는 header부분과 footer부분의 html 뼈대와 css부분을 github를 이용해 공유했다.
2. 어제 완성한 메인페이지 틀에 맞게 API에서 불러온 정보를 넣는 js코드를 작성
API에서 불러오고 sorting 옵션에 맞게 화면을 구성하는 내용까지 했다. 검색 기능 정상 작동까지 완료.
↓ 사전식 정렬
↓ 검색 기능 구현
+++와 캡쳐하다가 검색 이후에 상단 sorting 버튼을 누르면 다시 영화카드들이 출력되는게 아니라 페이지 이름만 바뀌는 걸 발견했다. 검색 결과에서 sorting 버튼을 없애던지 아니면 음 잘 고쳐야지 뭐
3. CSS 수정/보완
어제 빠트린 것도 새로 넣고 고치기도 했다. 영화 카드가 그리드 중앙에 위치하도록 했고(가로 기준) 마우스 오버레이 시 영화 카드가 커지는 애니메이션? 도 구현했다.
<추가적으로 구현/보완해야 하는 것>
0. 또 마구잡이로 돌아가게만 만들었음
예쁘게 잘 정리하자..
1. 영화 카드 클릭 시 상세 페이지로 연결 + 연결 시 상세페이지로 영화 정보 전달
영화 정보 전달은 id 전송만 하는 걸로 하고 상세 페이지에서 개별적으로 api불러와서 전달 받은 id에 해당하는 정보 화면에 출력하는 방식으로 하게 될 듯!! 상세 페이지로 id 전송하는 방법 공부해야함..!! localstorage로 가능한가?!
2. 메인 페이지 로딩 속도 개선
이것 저것 많아져서 그런지 로딩 속도가 눈에 띄게 느려졌다. js 코드도 너무 지저분해서 정리가 필요하다. 비동기 구현이 필요할 거 같은데 아직 js코드 구동이 어떻게 되는지 정확히 모르겠다. 그 부분도 공부가 필요하다..!!
3. 페이지 하단 github 링크 추가
이건 급하지 않으니까 까먹지만 않으면 된다.
4. 제목이 긴 영화카드가 다른 것에 비해 살짝 위로 올라가있음
하.. 고치고 싶은데 일단 흐린 눈 하는 중...
++가능하면 해보고 싶은 것
반응형 페이지 구현을 생각해서 전체적인 css를 px이 아니라 rem으로 만들었다. 시간이 있으면 반응형으로 만들어 보고 싶다.
<오늘 팀 프로젝트 하면서 알게 된 내용>
1. 문자열 형태로 되어있는 날짜를 Data형식으로 변환하면 쉽게 정렬할 수 있다.
//문자열형태로 되어있는 날짜를 Date 형식으로 변환
date: new Date(obj[i].release_date),
...
tmp.sort((a, b) => (a.date < b.date ? -1 : a.date > b.date ? 1 : 0));
...2. 클릭 이벤트 핸들러 함수(콜백함수)는 매개변수가 있으면 안된다?!
정확한 내용인지는 알 수 없지만 버튼 클릭이벤트를 addEventListener()로 추가할 때 콜백함수에 매개변수없이 넣어야 정상적으로 작동했다. (매개변수 타입이 함수 포인터 같은건가?!) 영화 카드 sorting 옵션을 버튼으로 선택할 때 콜백함수를 하나로 만들고 매개변수에 따라 다르게 작동하게 (switch-case사용해서/과제 필수 구현 조건이다) 하려고 했는데 버튼 클릭 이벤트가 정상적으로 작동하지 않아서 마지막에 꽤 애를 먹었다. 다른 버튼의 클릭 이벤트는 잘 되는데 이 녀석들만 안돼서 뭐가 다른지 살펴봤더니 매개변수 차이밖에 없어서 그 부분을 수정 했더니 문제 없이 작동했다. 결국 어쩔 수 없이 각 sorting 옵션에 따라 이벤트 핸들러 함수를 따로 만들 수 밖에 없었다.
