[내일배움캠프 15일차 TIL] 팀 프로젝트 1: 영화 검색 사이트 (1)

 

첫 팀프로젝트는 저번 개인 프로젝트를 발전시키는 형식의 주제였다.

팀원 중 가장 완성도가 높은 한 분의 개인과제를 선정한 후 각자 역할을 나눠서 작업을 시작했고,

내가 맡은 부분은 메인 페이지의 영화 카드를 제목, 평점 등의 기준에 맞춰 정렬시키는 기능이었다.

 

 

아직 코드를 짜서 기능을 구현하는 행위가 익숙하지 않아 연습장에 먼저 시작해봤다.

비록 이 뒤에 코딩을 시작하고 저 당시에 쥐어짜낸 생각에서 8할은 뒤엎은 것 같지만 이런 연습이 쌓이고 쌓여서 도움이 되리라고 믿는다!

 

 

진행 현황

• 이름순, 평점순 버튼 만들고
• js로 정렬 기능 구현

 

기능 구현은 팀원 분의 개인 프로젝트 파일 상태에서 진행해서 팀원 분의 css가 적용되어 있다

 

// 상위 부모 요소 선택

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 함수의 중괄호를 닫아주면 끝!

 

 

발표용 ppt 초안

정리하면 이렇다.

 

 

 

남은 과제

• 기본 정렬 상태인 인기순으로 돌아가는 버튼 클릭 이벤트 구현

(+ 이 부분은 내가 착각했다!! 평점순이라고 생각했던 것이 인기순의 내림차정렬이었다🥹 sort() 메서드 내에서 if문 return의 값을 서로 바꿔주었다)

• 이름순, 평점순 코드에서 중복되는 부분 최대한 합쳐보기
• 깃 정리(pull, merge 등..)
• merge 후 팀플 버전 css 적용해서 정렬 버튼 html, css 다듬기

 

---

 

📢 오늘의 TIL은 친절하게 그렇지만 혼자서도 해낼수있도록 이끌어주신 ㅇㅁㅇ튜터님께 바칩니다.....