230913 개발일지 TIL - JavaScript를 이용한 데이터 정렬 및 상태 설정

JavaScript를 이용한 데이터 정렬 및 상태 설정

문제 발생
프로젝트 작업 중 이미지와 URL을 Firestore에 저장하고 불러오는 과정에서 역순으로 보여지는 문제가 발생했다.

시도한 방법

• Firestore에서 복합 컬렉션을 자동,수동 설정을 하였지만 실패
• orderBy('createdAt', ‘desc’) 실패
• reverse() 실패
• timestamp를 등록하여 기록된 시간을 기준으로 sort()를 사용하여 값을 비교하여 오름차순으로 정렬

문제 해결

let sortedLinksData = [...newLinksData];
sortedLinksData.sort((a, b) => {
  return a.timestamp - b.timestamp;
});
setDefaultLinks(
  Array(3 - newLinksData.length)
    .fill()
    .map((_, i) => i),
);
setLinksData(sortedLinksData);

1. let sortedLinksData = [...newLinksData];

• 여기서는 newLinksData라는 배열을 복사하여 새로운 배열 sortedLinkdDdata를 생성한다. 이때 spread 연산자(...)를 사용하여 기존 배열의 모든 요소들을 새로운 배열에 복사한다.

2. sortedLinkdDdata.sort((a, b) => { return a.timestamp - b.timestamp; });

• 이 부분에서는 sort() 함수를 사용하여 'timestamp' 속성 값을 기준으로 오름차순 정렬한다. 여기서 a와 b는 각각 비교되는 두 개의 요소이다.

3. setDefaultLinkd(Array(3 - newLinkdDdata.length).fill().map((_, i) => i));

• 이 부분은 'default links'라는 상태값을 설정하는 것이다.
• 먼저, 3에서 현재 링크 데이터의 길이(newLinkdDdata.length)를 뺀 값만큼의 크기를 가진 새로운 배열을 생성하고,
• 그 다음에 이 배열을 .fill() 메소드로 undefined 값으로 채우고,
• 마지막으로 .map() 메소드를 사용하여 각 요소에 대한 인덱스값(i)으로 변경한다.

4. setLinkdDdata(sortedLinkdDdata);

• 최종적으로, 정렬된 링크 데이터(sortedLinkdDdata)가 저장되어 있는 상태 설정 함수인 'setLinkdDdata()'가 호출된다.

전체적인 로직은 주어진 링크 데이터(newLinkdDdata)에 대해서 timestamp 순서대로 정렬하고, 그 결과를 상태 값(setLinkdDdata)에 저장하는 것이다. 그리고 만약 newLinkdDdata 의 길이가 3보다 작다면 setDefaultLink 에서 남은 자리만큼 인덱스 값을 추가해서 기본 링크들을 설정하는 과정까지 포함되어 있다.

느낀 점
시간이 오래 걸리기는 했지만 다양한 방법을 시도할 수 있어 좋은 경험이라고 생각되었다.