[TIL]231026_sort()메소드를 이용한 정렬

👩🏻‍💻 팀 프로젝트에서 내가 맡은 부분 🧑🏻‍💻

• API에서 가져온 영화데이터를 정렬하기(이름순/평점순)

👊🏻 일단 부딪혀보자 (라고 쓰고 1차 문제발생이라 읽는다...)

//1. 정렬해야 할 데이터 지정
//2. 정렬한 데이터를 '이름순','별점순' 클래스에 연결하기
//3. 이름순, 별점순 각각 클래스에 클릭이벤트 설정
//4. 추가)홈화면 아이콘 누르면 다시 처음페이지, 순서로 돌아갈수있게..!

//이름순 : 한글->영어->숫자->그 외문자... 순서설정
const arrName = [moviesContainer.${title}];  //정렬해야할 데이터요소가 들어가야함
   arrName.sort(function (a, b) {
   return a.name < b.name ? -1 : a.name == b.name ? 0 : 1;  //가나다 순
 });
 console.log(arrName);

 arrName = document.getElementsByClassName('nameAlignment')[0];  //의도한건 2번..

 nameAlignment.addEventListener('click', function () {
   console.log();
 });  //의도한건 3번..

우선 이런식으로 내가 작업해야할 순서를 정해보고 거기에 써야할 기능의 코드를 무턱대고 적어보았다.
그리고 여기에 어떤 함수명, 변수명, 메소드가 들어가야할지를 생각하면서 조금씩 출력을 해보려고 했는데 될리가없지....🤦🏻‍♀️

💊 1차 해결

질문 ➡️ 설명 ➡️ 이해를 반복하며 접근방식부터 갈아엎은 후 성공

//이름순, 평점순 정렬
//1. 이름순, 평점순 클릭시 클릭이벤트 발생
//2. 클릭이 발생하면 기존에 있는 데이터를 가져오기
//3. 가져온 후 이름순, 평점순으로 순서를 정렬
//4. 정렬한것을 화면에 그려주기
//추가) 홈화면 아이콘 누르면 다시 처음페이지, 순서로 돌아갈수있게..!


// 평점순 : 높은순->낮은순 (평점이 동일할경우? 기본정렬)
document.querySelector('.scoreAlignment').addEventListener('click', () => {
  const scoreAlignment = movies.sort(function (a, b) {
    return b.vote_average - a.vote_average;
  }); //1-3번
  moviesContainer.innerHTML = ''; //기존 카드 지워주기
  displayMovies(); //4번
});

평점순 데이터 먼저 작업을 해보았는데 sort() 메소드를 이용해 위에서 가져온 영화데이터의 (vote_average)를 이용해 평점 높은순 -> 낮은순으로 정렬했다.

❌ 2차 문제발생

평점순을 토대로 최신순, 이름순 정렬 코드를 작성했는데 이름순에서 의도한것과 다르게 출력되었다.

• 의도 : 한글 -> 영문 -> 숫자
• 출력 : 숫자 -> 영문 -> 한글

document.querySelector('.nameAlignment').addEventListener('click', () => {
  const nameAlignment = movies.sort(function (a, b) {
   return a.name < b.name ? -1 : a.name == b.name ? 0 : 1;  //가나다 순
  });
  moviesContainer.innerHTML = '';
  displayMovies();
});

그래서 역순으로 바꿨더니 의도한대로 되었지만 한글도 ㅎ ➡️ ㄱ 순으로 출력...^^

💊 2차 해결

document.querySelector('.nameAlignment').addEventListener('click', () => {
  const nameAlignment = movies.sort(function (a, b) {
    let titleACode = a.title[0].charCodeAt(0);
    let titleBCode = b.title[0].charCodeAt(0);
    if (titleACode <= 12593) titleACode += 999999;
    if (titleBCode <= 12593) titleBCode += 999999; //추가 및 수정코드
    return titleACode < titleBCode ? -1 : titleACode > titleBCode ? 1 : 0;
  });
  moviesContainer.innerHTML = '';
  displayMovies();
});

ascii코드의 원리를 이용하여 한글을 엄청 큰 숫자로 변환해서 숫자끼리의 정렬로 비교해주는 코드를 추가하였더니 한글 -> 숫자 -> 영문 순서로 성공했다!

(사실 이 부분은 구세주🔆의 도움이 곁들여졌기 때문에 더 이해하고 공부해야하는 부분이다.
+추가로 영문이 숫자보다 앞에 나올 수 있게 하는부분도 고민필요)

이름순, 평점순 정렬을 성공하고 나니 한가지 더 응용해보고 싶어서 개봉날짜에 따른 '최신순' 정렬까지 추가하였다!

🔐 추가로 풀어야할 문제

영화 카드가 한 페이지 20개씩 있고 페이지는 500페이지가 넘는다.
그런데 이 수많은 데이터가 한번에 정렬이 이루어지는 것이 아닌 각 페이지에서만 정렬이 돌아가는 함정이 있었다.

이 부분을 해결하기 위해서는 불러온 데이터를 다시 불러서 재정렬하기..? 에 대해 생각해보았지만 머리가 돌아가지 않았다.
그래 일단 그것까지는 오케이👌🏻

하지만 우선적으로 해결해야하는 부분은 이것이다.

• 의도한 것 : 1페이지에서 최신순을 클릭해서 보다가 2페이지로 넘어갔을때도 최신순이 유지가 되는것
• 출력된 것 : 다른 페이지로 넘어가면 다시 불러온 데이터 순서로 바뀜

💡 이 부분을 해결하기 위한 접근방식에 관하여 받은 팁

• localStorage를 이용해서 내가 '이름순', '평점순', '최신순'을 클릭했다는 정보를 저장해두면 페이지를 넘어가도 그대로 정렬이 이루어 질 수 있음

풀어야 할 문제에 대해서 머리짜내보고 해결하면 다음 TIL에 올라올 것이고 올라오지 않는다면.......(이하생략)

이번에 짜본 코드도 다음에 다시 활용, 응용할 수 있도록 반복학습 필수‼️