[TIL #8] 개인프로젝트 - 정렬

개인프로젝트를 다 하고, 평점순으로 정렬을 하고싶어서 시도해보았다.
생각보다 오래걸렸다.

먼저, 평점을 반올림하고 싶어서

const Decimals = (num) => Math.round(num * 100) / 100;

math.round 함수를 사용해서 반올림하는 함수를 짜고,

 movieCards2.sort((a, b) => {
     let ratingA = Math.floor(a.getElementsByClassName("vote_average")[0].innerHTML);
    	return  ratingB - ratingA;
 }

중간에 코드를 다 붙이진않았지만, 이런식으로 정렬을 해주었는데,
정렬이 되지 않아서 진짜 다 해봤다. parseFloat 도 썼는데, 정렬이 되지 않는것이다.

그래서 디버깅하는것처럼 console.log를 사용해서 각 줄마다 반올림이 잘 되고 있는지 확인했는데, 애초에 반올림이 안먹더라.

검색을 통해 일단, parseFloat를 써야한다는것을 알았다.

💡parseFloat: 문자열을 부동 소수점 숫자로 변환하는 데 사용
문자열 내에 숫자가 아닌 부분이 있거나 형식이 올바르지 않으면 NaN을 반환 문자열에서 숫자를 추출
💡 Math.floor는 소수점 아래 부분을 무시하고 정수로 변환하는 데 유용
숫자를 정수로 변환하거나 내림하는 데 사용

let ratingA = parseFloat(a.getElementsByClassName("vote_average")[0].innerHTML);

하지만 ParseFloat를 사용해서 console.log를 사용한 출력값은 NaN 이었다.

---

해결

처음에 되게 단순하게 앞에 함수만 바꾸면 되겠지~ 라고 생각했던 과거의 나 반성합니다.

평점 코드를 짤때

<p> 평점: 4.xxx <p/>

이렇게 데이터를 넣었다.

근데 여기서 index[0]이 지금 text를 가리키고 있으니 숫자가 아니므로 NaN이 출력되고 있다는 것을 깨달았다.

이걸 깨닫고 정말 아무런 생각없이 '아 그럼 숫자를 나는 받아와야하니까 index[3] 하면 되겠다' 라고 생각한 것... 뭐하니 너

이상한짓을 하고 있다는걸 알고 다시 생각했더니
문자열에서 숫자와 소수점, 마이너스 기호 이외의 모든 문자를 제거해야겠다
라는 결론이 나왔다.

그래서,

 const cleaned = value.replace(/[^\d.]/g, ""); // 숫자와 소수점만 남김
    return parseFloat(cleaned); // 숫자로 변환

문자열에서 숫자를 추출한 후 sort를 사용해서 내림차순으로 정렬했더니 원하는 대로 정렬이 되었다!

💦 숫자 정렬할때 쓰는 sort와 문자열 정렬 sort는 비슷하지만 다르다는것! 그치만 구조는 비슷하다. 이건 나중에 자세하게 포스트하겠다.

---

마무리하며

처음부터 해결과정을 생각하기까지 오래걸렸다.
처음 생각한 코드가 아니라고 생각하면 다 엎어버리고 처음부터 짜버리는 나는...신중하게 고민해서 코드를 짜야겠다.

근데 이렇게 막히다가 갑자기 똭! 뚫리면 그것만큼 기분 좋은건 없다 ㅎ
그래서 맨날 다시 짜는건가
그래도 안해봤으면 몰랐을 것을 시도한것, 그리고 결국 완성한것에서 뿌듯함을 느낀다.

이렇게 개인프로젝트 끄읏~!