가장 마지막으로 채팅한 시간을 기준으로 채팅방을 위에서부터 최신순으로 정렬하고자 한다.
사고과정
1. 최신 채팅을 포함하는 요소를 모두 가져온 후, 각 요소의 textContext를 읽어 배열로 만든다.
2. 각 요소에 original Index를 붙인다. (=시간 순으로 정렬되지 않은 원래 배열)
3. sort()를 활용하여 각 요소의 순차를 비교하여 새로운 정렬을 만든다.
4. 새로운 정렬에 new Index를 붙인다. (=시간 순으로 정렬된 새 배열)
5. 목록 하나에 해당하는 list-box 요소를 모두 가져온다.
6. 원본배열의 시간과 사본 배열의 시간이 정확히 일치하는 요소를 찾아 원본 list-box의 order를 사본 배열의 new Index로 교체한다.
어려웠던 점
간단하게 구현할 줄 알았는데 생각보다 오랜 시간이 걸렸다.. index를 주는 것 까지 고려하는데는 성공했으나, 원본 배열과 사본 배열을 대조할 때 정확히 일치하는 글을 식별하는 조건을 떠올리는 부분이 어려웠다. GPT의 도움을 받아서 결국 게시글의 생성시간이 정확하게 일치하는 요소를 근거로 대조할 수 있었다.
완성코드
(chatList.ejs)
<script>
// 채팅 날짜순 정렬하기
let chatdates = document.querySelectorAll(".lastChat-date")
let chatdatesArr =[]
chatdates.forEach((date, idx) => {
let chatdate = date.textContent;
chatdatesArr.push({originalIndex: idx, date:chatdate});
});
console.log('chatdatesArr',chatdatesArr) //원본배열
//toSorted를 활용한 사본배열
const orderedDate = chatdatesArr.toSorted(function(a, b) {
if (a.date < b.date) return 1;
if (a.date > b.date) return -1;
return 0;
});
console.log('orderedDate', orderedDate)
// index를 기준으로 정렬
orderedDate.forEach((date, index) => {
date.newIndex = index; // 새로운 인덱스 추가
});
// 위의 정렬 기준에 따라서 list-box 정렬하기
let listboxes = document.querySelectorAll(".list-box");
listboxes.forEach((box) => {
let newIndex = orderedDate.find((date) => date.date === box.querySelector(".lastChat-date").textContent).newIndex;
console.log('newIndex',newIndex)
box.style.order = newIndex
});
</script>
새롭게 학습한 점
포인트1. toSorted()를 활용하면 원본배열을 없애지 않고 사본을 만들 수 있다.
포인트2. order 속성 적용하려면 listbox의 부모요소(white-bg)에 flex나 grid 적용되야 한다.
포인트3. items.forEach(item, index) => { item.필드명 = index} 와 같이 새로운 필드명을 추가 할 수 있다.
포인트4. let boxes= document.querySelectorAll(".class")로 모든 요소를 가져온 다음, boxes.forEach((box)=>box.querySelector(".class"))를 쓰면 해당 요소들 중 하나의 요소에만 조건을 줄 수 있으니 자주 활용하자.