가져온 좋아요 수를 어떻게 정렬할까 TIL

하루종일 시간을 잡아먹은것같다. 이것만 완료되면 내가 맡은부분을 거의 다 했는데 머리가 답답했다.

전에 프로젝트에서 최신순, 인기순으로 정렬하는건 해봐서 자신이 있었는데 멘붕이였다.

 

1. 내가 만난 역경

앞에서 적은 TIL에 이어서 이제 홈에는 좋아요 수 대로 유튜브영상들을 정렬해야했다.

그럼 videoBox에 있던 값이 많은 순서가 되어야하는데...어떻게 가져와야하는지 몇가지 방법을 생각해봐도 도중에 막혔다.

contentID가 일치하는 length값을 가져오면 그건 contentID가 아닌 그냥 누적 숫자였다.

숫자가 필요한게아니라 그 누적값이 가장많은 contentID가 필요한거였다.

여기서 멘붕😣

1️⃣ 홈은 가장 상단 페이지니까 props로 받아올 수 없다. 그러니까 내가 data를 likes와 video를 가지고 와야했다.

video를 useQuery로 가져오고 있던 터라 이게 두가지의 data를 어떻게 다 가져와야할까 고민했다.

2️⃣ 만약 두가지의 데이터를 가져왔다면 그 데이터들을 어떻게 비교 할 것인가.

3️⃣ 숫자까지는 비교가 가능하다고 해도 그 누적값이 많은 숫자가 contentID를 어떻게 들고 올것인가

---

2.시도 & 해결 

 1️⃣ 시도

- 전형적으로 쓰는 {isLoading, isError,data, error}=useQuery("likes",fetchLikes)를 다시 쓰면 videos를 가져오는 useQuery와 겹쳤다.  웃기긴한대 하다하다 route.js에서 props로 전달을 안될까 이런 생각을 가지고 시도도 해봤다ㅋㅋ 당연히 안된다. 가장 상단에선 쓰일수가 없다고 오류가 떴다.

1️⃣ 해결

- 굳이 전형적인 방법으로 쓰지 않아도 데이터를 가져올 방법은 있었다. 역시 아는 것이 힘이다.

 { }안에 있던 거는 useQuery에서 구조분해할당인거니까 useQuery.data도 맞는 말인거다.

그래서 const likeData = useQuery.data도 불러와진다.

 

2️⃣ 시도1

- 일단 [{...},{...}]으로 둘다 불러와지므로 likes의 데이터를 contentID:누적값 형식으로 바꿔보자라는 생각부터 들었다.

Object.entries   -> 비교가 가능하도록 바꿔준다.
//객체는 참조형이므로 비교를 하려면 원시형으로 바꿔주어야한다고 한다.

바꾼다음 객체의 value를 비교해서 가장 큰 key값을 들고오자 생각했다.

누적 값 까지 오케이

그럼 여기서 내가 해야할 꺼는 저 value값을 비교해야했다.

console.log(Object.entries(likeData).toString())  ->원시형으로 바꿔주자.

이렇게하면 결과값은 contentID,2,contentID,3이렇게 나왔다... 이런걸 원하지 않았따.   -> 다음방법으로 

이렇게 다 검색해도 원하는 방향이 나오지않았다... 검색을 다르게해야하나...

 

2️⃣ 시도2 

for (let key in likeData) -> 문자랑 값이랑 같이 필요하다 다음방법으로가자

 

2️⃣시도3(메모장에 끄적였던 거)

좋아요데이터랑 video데이터랑 map돌려서 일치하는 contentID가 나오면 그때마다 값을 누적하고 이 값을 배열에 넣고 그 배열을 sort 돌려서 순차적으로 값을 순서대로 나열한다.

=> 근데 이러면 같은 값( 즉 , 숫자)만 나오기 때문에 무슨 video인지 모른다.

=>이 비디오가 무엇인지 해결하면 참 좋을 듯...

=> 이 map돌려서 일치한 걸 객체에 정리하면 2️⃣ 시도1와 똑같은 모양이 나온다... => 결국 다시 원점

---

그래서 해결은?✅

like담당 팀원분이 좋아요를 누르게 되면 video와 likes에 동시에 값이 들어갈 수 있도록 해주셨다.

그럼 굳이 두번 나눠서 데이터를 들고올 필요도 없고, 해당하는 video id를 가져오면 알아서 그 비디오의 좋아요 값이 나오기 때문에 정렬하기 좋았다ㅎ 도와주셔서 감사했따.... 종일 하루종일 머리 붙잡고 있었는데 뭔가 자꾸 쫌만 더 하면 가지고 올껏같은 느낌이 답답했었기에 ㅠ

데이터베이스 수정 후에 한 3~40분...만에 성공했던거같다ㅋㅋ 이번 기회에 잘 정렬된 데이터베이스가 얼마나 중요한건지 알게되었다...👍

 

//데이터 정렬하는 함수 

const iLike = data?.sort(function (a, b) {
    let lengthB = b.likesCount;
    let lengthA = a.likesCount;
    return lengthB - lengthA;
  });
  
    <div style={videoListDiv}>
              {iLike &&
                iLike?.map((v) => (
                  <div key={v.id}>
                    <VideoBox
                      iconSize="17px"
                      style={{ height: "200px", width: "370px" }}
                      videoId={v.videoUrl}
                      item={v}
                      title={v.title}
                    />
                  </div>
             ))}
     </div>
     
//쿼리스트링으로도 가지고올 수 있다
http://localhost:3001/videos?_sort=likesCount&_order=desc사용

4.얻은점

데이터베이스 구조를 잘짜자...! 진심이다.

한번 잘 정렬해놓으면 보기도 좋고 가져오기도 좋은것 같다.. 이번에 뼈저리게 느낌

최종프젝 전에 이런 경험을 얻을 수 있어서 좋았다.😀

그리고 하루종일 똑같은 기능으로 생각을 해보니까 내가 가지고 있는 방법이 단조롭다라는 생각이 들었다.

좀 더 다양한 방법도 있을 껀데 아직까지 내 실력이 부족해서 다양한 해결책을 못내고 있는것 같아서 마음이 쫌 힘들었따. ㅠㅋㅋ

열심히 하자 화이팅!😎