점심 메뉴를 내맘대로 정렬하기

🥘  점심 메뉴를 내 맘대로 정렬하기

안녕하세요 TriplexLab입니다.

오늘은 2가지에 관해서 살펴보도록 하겠습니다.
1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법)
2) fetch함수를 사용해서 서버와 비동기 통신 하기
new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 
그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다.

자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙)
서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는 콜백인 소비자(Consumer)를 설정하는 메소드라는 사실을 잘 기억하셔야 합니다.
(그럼 코드를 해석하기 좀더 수월할 것 같네요)

// data.json

[ 
    { "type": "ko", "name": "비빔밥", "price" : "8,000" }, 
    { "type": "ko", "name": "삼계탕", "price" : "12,000" }, 
    { "type": "ko", "name": "김치찌개", "price" : "8,500" }, 
    { "type": "ko", "name": "라볶이", "price" : "5,000" }, 
    { "type": "ch", "name": "짜장면", "price" : "8,000" }, 
    { "type": "ch", "name": "탕수육", "price" : "17,000" }, 
    { "type": "ch", "name": "짬뽕", "price" : "8,500" }, 
    { "type": "jp", "name": "라멘", "price" : "9,000" }, 
    { "type": "jp", "name": "스시", "price" : "14,900" }, 
    { "type": "jp", "name": "우동", "price" : "8,000" },
    { "type": "jp", "name": "나가사키 짬뽕", "price" : "7,500" } 
]

 /** // random으로 아이템 걸러내는 함수 */
function randomItem(resolve, menus) { 
	setTimeout(() => { 
		const randomIdx = Math.floor(Math.random() * menus.length); 
		const selectedMenu = menus[randomIdx]; 
		resolve(selectedMenu); 
	}, 1000);
};
/** random으로 아이템 걸러내는 함수 // */

/** // random으로 리스트에 있는 아이템들 정렬하는 함수 */
function randomList(resolve, menus) {
	setTimeout(() => { 
		const randomItems = menus.sort(() => Math.random() - 0.5);
		resolve(randomItems);
	}, 1000);
};
/** random으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 이름순으로 리스트에 있는 아이템들 정렬하는 함수 */
function nameList_ascending(resolve, menus) { // 오름차순(Ascending order)
	setTimeout(() => { 
		const nameItems = menus.sort((a,b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
		resolve(nameItems);
	}, 1000);
};
/** 이름순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 이름순으로 리스트에 있는 아이템들 정렬하는 함수 */
function nameList_descending(resolve, menus) { // 내림차순(descending order)
	setTimeout(() => { 
		const nameItems = menus.sort((a,b) => a.name > b.name ? -1 : a.name < b.name ? 1 : 0);
		resolve(nameItems);
	}, 1000);
};
/** 이름순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 가격순으로 리스트에 있는 아이템들 정렬하는 함수 */
function priceList_ascending(resolve, menus) { // 오름차순(Ascending order)
	setTimeout(() => { 
		const priceItems = menus.sort((a,b) => parseInt(b.price) - parseInt(a.price));
		resolve(priceItems);
	}, 1000);
};
/** 가격순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 가격순으로 리스트에 있는 아이템들 정렬하는 함수 */
function priceList_descending(resolve, menus) { // 내림차순(descending order)
	setTimeout(() => { 
		const priceItems = menus.sort((a,b) => parseInt(b.price) - parseInt(a.price));
		resolve(priceItems);
	}, 1000);
};
/** 가격순으로 리스트에 있는 아이템들 정렬하는 함수 // */

function pick(data) { 
	const p = new Promise((resolve, reject) => { 
		if (data.length === 0) { 
        	reject(new Error('Need Candidates')); 
		} else { 
            randomItem(resolve, data);
            // randomList(resolve, data)
            // nameList_ascending(resolve, data);
            // nameList_descending(resolve, data);
            // priceList_ascending(resolve, data);
            // priceList_descending(resolve, data);
        }
	}); 
	return p;
};

function getRandomMenu() {
	return fetch('./data.json') 
	.then((response) => response.json()) 
	.then((result) => { 
		const menus = result; 
		return pick(menus); // ! random pick 함수 
	}); 
};

getRandomMenu() 
	.then((menu) => { 
		console.log(`오늘의 점심은 ${menu.name}`); // randomItem함수를 사용했을 경우

	menu.forEach(el => { // List에 관한 함수들을 사용했을 경우
		// console.log(el)
	});
}).catch((error) => { 
	console.log(error.message); 
}).finally(() => { 
	console.log('Random Menu candidates change everyday'); 
});

 

전체코드 👏

<script>
/** // random으로 아이템 걸러내는 함수 */
function randomItem(resolve, menus) { 
	setTimeout(() => { 
		const randomIdx = Math.floor(Math.random() * menus.length); 
		const selectedMenu = menus[randomIdx]; 
		resolve(selectedMenu); 
	}, 1000);
};
/** random으로 아이템 걸러내는 함수 // */

/** // random으로 리스트에 있는 아이템들 정렬하는 함수 */
function randomList(resolve, menus) {
	setTimeout(() => { 
		const randomItems = menus.sort(() => Math.random() - 0.5);
		resolve(randomItems);
	}, 1000);
};
/** random으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 이름순으로 리스트에 있는 아이템들 정렬하는 함수 */
function nameList_ascending(resolve, menus) { // 오름차순(Ascending order)
	setTimeout(() => { 
		const nameItems = menus.sort((a,b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
		resolve(nameItems);
	}, 1000);
};
/** 이름순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 이름순으로 리스트에 있는 아이템들 정렬하는 함수 */
function nameList_descending(resolve, menus) { // 내림차순(descending order)
	setTimeout(() => { 
		const nameItems = menus.sort((a,b) => a.name > b.name ? -1 : a.name < b.name ? 1 : 0);
		resolve(nameItems);
	}, 1000);
};
/** 이름순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 가격순으로 리스트에 있는 아이템들 정렬하는 함수 */
function priceList_ascending(resolve, menus) { // 오름차순(Ascending order)
	setTimeout(() => { 
		const priceItems = menus.sort((a,b) => parseInt(a.price) - parseInt(b.price));
		resolve(priceItems);
	}, 1000);
};
/** 가격순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** // 가격순으로 리스트에 있는 아이템들 정렬하는 함수 */
function priceList_descending(resolve, menus) { // 내림차순(descending order)
	setTimeout(() => { 
		const priceItems = menus.sort((a,b) => parseInt(b.price) - parseInt(a.price));
		resolve(priceItems);
	}, 1000);
};
/** 가격순으로 리스트에 있는 아이템들 정렬하는 함수 // */

/** new Promise 영역 및 fetch 영역 */
function pick(data) { 
	const p = new Promise((resolve, reject) => { 
		if (data.length === 0) { 
        	reject(new Error('Need Candidates')); 
		} else { 
            randomItem(resolve, data);
            // randomList(resolve, data)
            // nameList_ascending(resolve, data);
            // nameList_descending(resolve, data);
            // priceList_ascending(resolve, data);
            // priceList_descending(resolve, data);
        }
	}); 
	return p;
};

function getRandomMenu() {
	return fetch('./data.json') 
	.then((response) => response.json()) 
	.then((result) => { 
		const menus = result; 
		return pick(menus); // ! random pick 함수 
	}); 
};

getRandomMenu() 
	.then((menu) => { 
		console.log(`오늘의 점심은 ${menu.name}`); // randomItem함수를 사용했을 경우

	menu.forEach(el => { // List에 관한 함수들을 사용했을 경우
		// console.log(el)
	});
}).catch((error) => { 
	console.log(error.message); 
}).finally(() => { 
	console.log('Random Menu candidates change everyday'); 
});

/** new Promise 영역 및 fetch 영역 // */
</script>

위에 코드를 파일로 제공합니다.

필요하신 분들은 다운로드하여 가세요 😄

sort정리.zip

0.00MB

제가 작성한 글중에서 lodash라이브러리 라는 컨텐츠를 정리한것이 있습니다.
lodash라이브러리는 위에 제가 함수로 정리한 (data정렬 규칙)말고도 더 디테일하고, 유용한 data정렬 방식을
제공고 있습니다. 참고하세요 😄

lodash 라이브러리 정리