첫 팀프로젝트는 저번 개인 프로젝트를 발전시키는 형식의 주제였다.
팀원 중 가장 완성도가 높은 한 분의 개인과제를 선정한 후 각자 역할을 나눠서 작업을 시작했고,
내가 맡은 부분은 메인 페이지의 영화 카드를 제목, 평점 등의 기준에 맞춰 정렬시키는 기능이었다.
아직 코드를 짜서 기능을 구현하는 행위가 익숙하지 않아 연습장에 먼저 시작해봤다.
비록 이 뒤에 코딩을 시작하고 저 당시에 쥐어짜낸 생각에서 8할은 뒤엎은 것 같지만 이런 연습이 쌓이고 쌓여서 도움이 되리라고 믿는다!
진행 현황
- 이름순, 평점순 버튼 만들고
- js로 정렬 기능 구현
// 상위 부모 요소 선택
const $movieContainer = document.querySelector('#movie-container');
먼저 querySelector로 상위 부모요소를 선택
(팀원 분께서 기존에 선언하신 변수명이 있어 통일을 위해 똑같이 가져왔다!)
// 정렬 버튼 클릭 이벤트
const nameSortBtn = document.querySelector('#name-sort-btn');
nameSortBtn.addEventListener('click', (e) => {
nameSort();
});
html에서 만들어둔 button 태그에 nameSort() 함수가 시작되는 클릭 이벤트 달아주기
여기서부터는 nameSort() 함수 내부
// 영화 제목 선택
const selectTitle = element => {
const titleElements = element.querySelector('h4');
return titleElements.innerText;
제목 정렬을 위해 먼저 api에서 영화 제목을 뽑아온 부분을 querySelector로 선택
(이 부분은 명확하게 보여줄 수 있도록 h4가 아닌 클래스명으로 수정할까 생각중)
titleElements에 저장된 영화 제목들을 어떻게 반환해야할지 몰랐는데 튜터님께서 innerText를 사용하면 된다고 힌트를 주셨다🥹👍
// card div 선택
const cardArr = [...document.querySelectorAll('.card')];
정렬을 위해 sort()를 사용할 예정이라 스프레드 연산자로 영화 정보가 담긴 하나의 div인 card를 펼침
이렇게 작성하면 배열의 원본과 다른 메모리 주소를 만들어내는 것이기 때문에 원본 유지가 가능
// card div 정렬
cardArr.sort((a, b) => {
const elementA = selectTitle(a);
const elementB = selectTitle(b);
if (elementA < elementB) {
return -1;
}
if (elementA > elementB) {
return 1;
}
// 이름 같을 때
return 0;
})
sort() 메서드는 아직 익숙하지 않아서 튜터님의 조언대로 mdn 문서를 참고하여 작성
if문을 사용하여 순서 변경에 대한 내용 넣어줌
// 정렬 전 기존 카드 삭제
$movieContainer.innerHTML = "";
// card 정렬 후 해당 순서를 반영하여 $movieContainer에 다시 추가
cardArr.forEach(element => $movieContainer.appendChild(element));
빈 문자열로 부모 컨테이너에서 기존의 인기순(디폴트상태)으로 정렬된 카드를 비워주고
이름순으로 정렬한 결과값을 다시 배치해서 보여줌
마지막으로 nameSort 함수의 중괄호를 닫아주면 끝!
정리하면 이렇다.
남은 과제
- 기본 정렬 상태인 인기순으로 돌아가는 버튼 클릭 이벤트 구현
(+ 이 부분은 내가 착각했다!! 평점순이라고 생각했던 것이 인기순의 내림차정렬이었다🥹 sort() 메서드 내에서 if문 return의 값을 서로 바꿔주었다)
- 이름순, 평점순 코드에서 중복되는 부분 최대한 합쳐보기
- 깃 정리(pull, merge 등..)
- merge 후 팀플 버전 css 적용해서 정렬 버튼 html, css 다듬기
📢 오늘의 TIL은 친절하게 그렇지만 혼자서도 해낼수있도록 이끌어주신 ㅇㅁㅇ튜터님께 바칩니다.....
'💻 > 프로젝트' 카테고리의 다른 글
[Node.js] 개인 프로젝트: 이력서 백엔드 서버 만들기_2 (0) | 2024.02.05 |
---|---|
[Node.js] 개인 프로젝트: 이력서 백엔드 서버 만들기_1 (0) | 2024.02.05 |
[Node.js] 개인 프로젝트: 장터 백엔드 서버 만들기 (0) | 2024.01.24 |
[내일배움캠프 17일차 TIL] 팀 프로젝트 1: 영화 검색 사이트 (2) (2) | 2024.01.16 |
[내일배움캠프 12일차 TIL] 개인 프로젝트 1: 영화 검색 사이트 (0) | 2024.01.09 |