[사이드프로젝트] JavaScript to-do list 최신순 정렬

[사이드프로젝트] 영감기록지🔥

혼자 만들어본 기록지 앱에 최신순 정렬을 추가했다

수업(바닐라JS로 노마드코더 크롬 앱 만들기)에선 array를 만들고 거기에 push()를 통해 list에 추가할 수 있도록 알려줬다.

이를 통해 to-do list를 만들 수 있었지만

문제는 가장 최근에 추가된 요소가 가장 마지막으로 간다는 것이다🤔

왜그럴까..?

---

처음에는 array에 들어가는 순서를 바꾸면 되지 않을까 생각했다. 그래서 생각한 범인은 바로 push()

push를 사용하면 새로 추가하는 아이를 array 맨 마지막에 추가시킨다.

그래서 단순하게

' 그럼..array 첫번째 자리에 추가되도록 하면 되나? '

생각했다.

그래서 찾은 해법은?! unshift() 

확인 결과, 기대했던 대로 array의 첫번째 자리로 추가되며 원하던 최신순 정렬이 완성된듯 보였다.

그러나 문제는 새로고침을 해야 최신순 정렬이 되다는 점이었다..🤦‍♂️

preventDefault()를 통해 새로고침을 막았으니..

이대로 둔다면, 오히려 새로고침하면 순서가 바뀌는 셈이니 사용자의 혼란을 야기하는 없느니만 못한 기능인 것이다..

그래서 나는 push가 아닌 appendchild()를 건들기로 방향을 바꿨다.

appendchild()도 마지막 자리에 요소를 추가한다는 점은 push와 비슷했으나

얘는 HTML 요소를 추가하고 있었다.

그니깐

' HTML 기준으로 첫번째 자리에 추가되도록 하면 되지 않을까..? '

생각했던 것이다.

insertBefore()와 firsthchild를 활용해 항상 첫번째 node로 위치할 수 있도록 했다.

(firstchild는 insertBefore()의 2번째 파라미터로 활용)

array에는 push를 통해 꼬리로 들어가더라도

html 상에는 머리로 들어가니깐 새로고침없이도 최신순 정렬되는 것이다.

또 기존 localStorage에 있던 얘들을 불러와 HTML로 뿌릴 때도 같은 function을 활용하고 있는데

그러니 새로 추가된 건과 localStorage에 있던 건 모두 최신순으로 정렬되는 것을 확인할 수 있었다.

---

정리

array 머리에 넣는다 : unshift() / array 꼬리에 넣는다 : push()

👉근데 localStorage에 반영되는 내용이기에 이 array 순서는 새로고침해야 반영된다

👉 PreventDefault()를 넣었다면, 애초에 HTML에 넣을 때 머리에 넣을 수 있도록 하자 :

insertBefore(newNode, list.firstchild)

 

 

https://lim0517sh.github.io/recordInspirations/