๐Ÿชด React

[React] json-server์˜ ์ƒˆ๋กญ๊ฒŒ ๋ฐ”๋€ sort-order ๋ฐฉ์‹ ํŽ˜์ด์ง€๋„ค์ด์…˜ ์š”์ฒญ ( - ๋กœ ๋‚ด๋ฆผ์ฐจ์ˆœ ์ •๋ ฌ)

๋ จ๋”” 2024. 2. 23. 00:48
SMALL

 

๊ฐ•์˜๋ณด๊ณ  ์•ˆ ๋จนํ˜€์„œ ์ฐพ์•„๋ณด๋‹ˆ๊นŒ json-server์—์„œ ์ •๋ ฌ๋ฐฉ์‹์ด ์ƒˆ๋กญ๊ฒŒ ๋ฐ”๋€ ๊ฑฐ์˜€๋‹ค .

๊ณต์‹๋ฌธ์„œ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‚˜์™€์žˆ๋Š”๋ฐ ์‚ฌ์‹ค ์ฒจ์—” ๋ด๋„ ์ž˜ ๋ชฐ๋ž๋‹ค. view๋Š” ๋‘๋ฒˆ์งธ ๊ธฐ์ค€์ธ๊ฐ€, ์ด๋Ÿฌ๋ฉด์„œ...ใ…Ž 

https://www.npmjs.com/package/json-server

 

json-server

> [!IMPORTANT] > Viewing alpha v1 documentation – usable but expect breaking changes. For stable version, see [here](https://github.com/typicode/json-server/tree/v0). Latest version: 1.0.0-alpha.23, last published: a month ago. Start using json-server in

www.npmjs.com

์—ฌํŠผ ๋‹ค๋ฅธ ๋ธ”๋กœ๊ทธ๋„ ์ฐพ์•„๋ณด๊ณ  ์•Œ์•˜์Œ..ใ…Ž

 

 

 

๊ธฐ์กด ๋ฒ„์ „์—์„œ๋Š” 

?_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 ์œผ๋กœ ๋ณ€ํ™˜ํ•œ ์‹œ๊ฐ„ ๋ฌธ์ž์—ด๋„ 

 

๊ทธ๋ƒฅ ๊ฐ™์ด ๋ฐ์ดํ„ฐ์— ์„ž์—ฌ์žˆ์—ˆ๋Š”๋ฐ ์•Œ์•„์„œ ์ž˜ ์ •๋ ฌ์ด ๋˜์—ˆ๋‹ค ใ…Žใ…Ž ๋‹คํ–‰!

 

SMALL