TIL 10 파이어스토어 랜덤정렬을 Date.now() 사용 내림차순만들기

프로젝트 진행중에 추가하기 기능을 써서 단어를 추가하면 이상하게 순서가 랜덤하게 위치하게 되었다. 알아보니 파이어베이스 스토어에는 랜덤한 id 값을 각 콜렉션 문서마다 넣어 주게 되는데 0-9,a-zA-Z 이런 순서로 차례로 정렬이 된다. 하지만 새로 추가한다고 1번부터 시작하는것도 a부터 시작하는것도 아니고 랜덤하게 주어지기때문에 로드액션함수 미들웨어 부분에서 파이어스토어에서 가져온 콜렉션을 forEach 를 사용하여 그 스토어에 담긴 순서대로 data()값을 새 리스트에 만들어 주기때문에 추가할때마다 단어가 앞이나 맨뒤에 뜨지 않게 되는것이였다. 

 

이리저리 찾아보다가 멘토님들이 알려준 타임스탬프, 임의의 값을 주어서 그것을 sort 하는 방식, 파이어베이스의 orderBy 등등 이있었는데 아직 생소한 지식들이 많고 파이어베이스 공식문서는 나한텐 그닥 친절하게 설명해주지않고 다 스킵한상태로 예제만 덩그러니 주는거 같아서 눈에 들어오지 않았다. 생각을 하다가 sort 를사용하기로하고 추가할때 거기다가 index 값을 하나씩 넣어줘야겠다고 생각했다. 하지만 이것마져 완벽하지 않았는데 수정하거나 추가만 한다면 차례차례 내림차순,오름차순에 따라 잘 정렬하지만 삭제를 한후 추가하게되면 기존에 5라는 인덱스를 지웠다고해서 나중에 추가한애가 6이 되지않고 5가 되었다 왜냐하면 리스트으 length 로 index 를 설정해주었기때문에 제대로 구현을 못하게 되었다. 어떻게할까 생각하다가 예전에 new Date() 을 사용할때 밀리세컨단위로112349123 이런식으로 나왔던것이 생각이났다. 이걸 어따 써먹을려고 만들었나 했는데 지금 이라고 생각이들었다 지금 현재 시간을 밀리세컨으로 표시했기때문에 중복되거나 마이너스 될일은 없기 때문에 sort 로 - 연산을 할시 잘 정리가 되겠다고 생각했다. 결과는 만족스러웠다. 

 

요번 4주차의 요구사항+ 추가기능까지 모두 완수하게되었다. 아쉬운건 메모장,단어장이기때문에 정답예시에 나온것처럼 다 외운건 체크박스를 해서 색을 변화하게 하는기능은 시간이없어서 하지못했다. 강의내용중에 프로그래스바를 애니메이션, transition 을 이용하였는데 실전에선 사용하지 못해서 나중에 기회가 된다면 쓸 생각이다. 내일은 팀과제 다같이 정리를하고 1강부터 5강까지 놓쳤던 부분을 다시 들을려고한다. State 부분과 Prop 부분을 다시 이해해야겠다고 생각했고, 자바스크립트 책도 보고 Css 도 좀 봐야겠다고 생각했다. 

 

배울게 너무많다!!