금일 달성 항목
1) 검색 기능 구현, 상세페이지 구현 (음식점, 메뉴 정보 불러오기)
문제 해결 과정 1 - 검색기능 구현
[문제]
프론트에 검색 형태는 만들었지만 어떻게 api 데이터를 가져와서 사용해야하는지 모르는 상황이었습니다.
[시도 및 해결]
튜터님에게 여쭤봐서 해결하였습니다.
1. Include를 통해 Op.like 로 메뉴데이터를 찾아 불러오는 코드를 추가 작성합니다.
repositories
getAllRestaurant = async (foodName, category) => {
// foodName search
if (foodName) {
return await Restaurant.findAll({
include: [
{
model: Menu,
where: {
name: { [Op.like]: '%' + foodName + '%' },
},
},
],
order: [['createdAt', 'DESC']],
});
}
// category search
if (category) {
return await Restaurant.findAll({
where: {
category: { [Op.like]: '%' + category + '%' },
},
order: [['createdAt', 'DESC']],
});
}
return await Restaurant.findAll({
attributes: [
'restaurant_id',
'Owner_id',
'name',
'address',
'phone_num',
'biz_hours',
'category',
'createdAt',
'updatedAt',
],
order: [['createdAt', 'DESC']],
});
};
// 음식점 조회
getRestaurant = async ({ restaurant_id }) => {
return await Restaurant.findAll({
where: { restaurant_id },
attributes: [
'restaurant_id',
'Owner_id',
'name',
'address',
'phone_num',
'biz_hours',
'category',
'createdAt',
'updatedAt',
],
include: [
{
model: Menu,
},
],
order: [['createdAt', 'DESC']],
});
};
2. search.ejs 파일에 fetch 문을 통해 해당 데이터를 불러옵니다.
</head>
<body>
<header>
<div class="search">
<form action="/" method="GET">
<input placeholder="음식, 음식 카테고리를 검색해보세요" id="searchBox" type="text" />
<i class="fa fa-search searchBtn" aria-hidden="true"></i>
</form>
</div>
</header>
<script>
const searchBtn = document.querySelector(".searchBtn");
const searchBox = document.getElementById("searchBox");
const search = async () => {
if (!searchBox.value) return alert("검색어를 입력해 주세요.");
let foodNameResult = await fetch(`/restaurant?foodName=${searchBox.value}`)
foodNameResult = await foodNameResult.json()
console.log({foodNameResult})
let categoryResult = await fetch(`/restaurant?category=${searchBox.value}`)
categoryResult = await categoryResult.json()
console.log({categoryResult})
};
searchBtn.addEventListener("click", search);
searchBox.addEventListener("keypress", (e) => {
e.preventDefault();
if (e.key === "Enter") search();
});
searchBox.focus();
</script>
</body>그럼 개발자모드에서 음식 메뉴명과 카테고리 데이터 배열이 나오는 것을 확인할 수 있습니다.
[알게된 점]
Op.like가 데이터를 뽑아서 찾아내는 역할을 하는 것을 알았습니다.
'혼자 고민해보기_ 개발 > TIL (Today I Learned)' 카테고리의 다른 글
| 20230724(월)_ 백오피스 프로젝트 발표 (0) | 2023.07.25 |
|---|---|
| 20230720(금)_ 백오피스 프로젝트 (0) | 2023.07.22 |
| 20230719(수)_ 백오피스 프로젝트 (0) | 2023.07.21 |
| 20230718(화)_ 백오피스 프로젝트 (0) | 2023.07.19 |
| 20230717(월)_ 백오피스 프로젝트 ERD 작성 (0) | 2023.07.19 |