JavaScript로 최신순, 베스트순 만들기

✅JavaScript로 최신순, 베스트순 만들기

안녕하세요 TriplexLab입니다.
오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다.

🔥Mock데이터를 화면에 출력

먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다.

const $ = (select) => document.querySelector(select);
(() => {
	const getDatas = async () => {
		const res = await fetch("./mock.json");
		const body = await res.json();
		return body;
	}

	const handleLoad = async () => {
		await getDatas().then(datas => {
			const temp_html = datas.map((item) => {
				const {title, imgUrl, createdAt, rating} = item;
				const date = new Date(createdAt);

				return (`<li>
                            <div>
                                ${title}
                            </div>
                            <img src=${imgUrl}>
                            <div>${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}</div>
                            <div>${rating}</div>
                        </li>`)
			}).join('');
			
			$(".App").innerHTML = temp_html
		});
	};

	const handleNewestClick = async (order) => {
		await getDatas().then(datas => {
			const sortedItems = datas.sort((a,b) => b[order] - a[order]);
			const temp_html = sortedItems.map((item) => {
				const {title, imgUrl, createdAt, rating} = item;
				const date = new Date(createdAt);

				return (`<li>
                            <div>
                                ${title}
                            </div>
                            <img src=${imgUrl}>
                            <div>${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}</div>
                            <div>${rating}</div>
                        </li>`)
				}).join('');
				
				$(".App").innerHTML = temp_html
			});
	}

  const handleBestClick = async (order) => {
		await getDatas().then(datas => {
			const sortedItems = datas.sort((a,b) => b[order] - a[order]);
			const temp_html = sortedItems.map((item) => {
				const {title, imgUrl, createdAt, rating} = item;
				const date = new Date(createdAt);

				return (`<li>
                            <div>
                                ${title}
                            </div>
                            <img src=${imgUrl}>
                            <div>${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}</div>
                            <div>${rating}</div>
                        </li>`)
				}).join('');
				
				$(".App").innerHTML = temp_html
		});
	};

	$('.newes').addEventListener('click', () => {
		handleNewestClick('createdAt')
	})
	$('.best').addEventListener('click', () => {
		handleBestClick('rating')
	})

	handleLoad();
})();

🔥코드 개선(중복 제거)

위에 코드를 보시면 중복되는 코드가 보일겁니다.
이 부분들을 하나의 함수로 만들어 제사용을 해보겠습니다.👏👍

const $ = (select) => document.querySelector(select);
(() => {
	const getDatas = async () => {
		const res = await fetch("mock.json");
		if(!res.ok){ // 이렇게 데이터 불러오는데 실패하면 에러 메세지를 넣을수 있습니다.
			throw new Error('데이터 불러오는데 실패했습니다')
		}
		const body = await res.json();
		return body;
	}

	const tempHtml = (datas) => {
		return datas.map((item) => {
			const {title, imgUrl, createdAt, rating} = item
			const date = new Date(createdAt);
			return (`<li>
                    <div>
                        ${title}
                    </div>
                    <img src=${imgUrl}>
                    <div>${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}</div>
                    <div>${rating}</div>
                </li>`)
		}).join('');
	};

	const handleLoad = async () => {
		await getDatas().then(datas => {
			$(".App").innerHTML = tempHtml(datas)
		}).catch((err) => {
			console.log(err);
      return;
		})
	};

	const handleNewestClick = async (order) => {
		const datas = await getDatas();
		const sortedItems = datas.sort((a,b) => b[order] - a[order]);
		$(".App").innerHTML = tempHtml(sortedItems)
	}

  const handleBestClick = async (order) => {
		const datas = await getDatas();
		const sortedItems = datas.sort((a,b) => b[order] - a[order]);
		$(".App").innerHTML = tempHtml(sortedItems)
	};

	$('.newes').addEventListener('click', () => {
		handleNewestClick('createdAt')
	})
	$('.best').addEventListener('click', () => {
		handleBestClick('rating')
	})


	handleLoad();
})();

👉전체 소스코드

전체 소스코드를 github에도 공유합니다.😃🔥👍

GitHub - younhoso/younhoso