강의보고 안 먹혀서 찾아보니까 json-server에서 정렬방식이 새롭게 바뀐 거였다 .
공식문서에는 아래와 같이 나와있는데 사실 첨엔 봐도 잘 몰랐다. view는 두번째 기준인가, 이러면서...ㅎ
https://www.npmjs.com/package/json-server
여튼 다른 블로그도 찾아보고 알았음..ㅎ
기존 버전에서는
?_sort=createdAt&_order=desc
와 같은 방식으로, &order=asc 나 desc 를 써서 정렬해주었는데,
바뀐 버전에서는 order 가 아닌 sort를 써서, sort=정렬기준 혹은 sort=-정렬기준 을 통해 간단하게 오름차/내림차순 정렬!
✨
결국 더 간단해짐 !
(그리고 이런걸 페이지네이션 이라고 하나보다 . json-server는 페이지네이션 기능을 무료로 해준다고 ..)
..?_sort=id : id 기준으로 오름 차순
..?_sort=-id : id 기준 내림 차순
- 를 써주면 내림차순이 됨
(아래 사용 코드 예)
// comment-api.js
import axios from "axios";
export const commentClient = axios.create({
baseURL: import.meta.env.VITE_APP_SERVER_URL,
// process.env.REACT_APP_SERVER_URL,
headers: {
"Content-Type": "application/json",
},
});
export const getCommentsFromDB = async () => {
// 시간 순 정렬해서 가져오기
const { data } = await commentClient.get("?_sort=-createdAt");
return data;
http:// .... /comments?sort=-createdAt
주소로 get 요청 보내서 시간 순 (createdAt 기준) 내림차순 정렬된 데이터를 가져올 수 있다 !
+
참고로, 나는 createdAt 을 기준으로 정렬했는데 이게 다른 시간 type 이여도 정렬이 잘 된다 !!! ㅠ^ㅠ
"2023-11-03T02:07:09.423Z" 와 같은 ISO String (아마도) 의 시간 문자열도,
"24. 2. 23. 오전 12:27:12" 와 같은 new Date().toLocaleString 으로 변환한 시간 문자열도
그냥 같이 데이터에 섞여있었는데 알아서 잘 정렬이 되었다 ㅎㅎ 다행!
'React' 카테고리의 다른 글
[React/팀프젝] Youtube API 사용하기 (0) | 2024.02.26 |
---|---|
[React] React-Query(aka. Tanstack-Query) (0) | 2024.02.23 |
[React] 개인프젝 에러 : VITE 환경변수 설정 주의 & 리덕스 모듈에서 state로 위치 잘 쓰기 (0) | 2024.02.22 |
[React/Vite] 에러해결: Vite 프로젝트 .env 환경변수는 process.env => import.meta.env로 써주기 (0) | 2024.02.21 |
[React] 비동기 통신 - axios (0) | 2024.02.20 |