백오피스 프로젝트 5. 프로젝트 완성
프론트엔드 - 백엔드 연결 (고객님 파트)
가게목록 페이지/ 단일 가게의 메뉴 페이지/ 리뷰작성 페이지
중간에 장바구니가 있어야 할 것 같아 ERD를 수정했으나, 한정된 기간 내 프로젝트를 완성하기 어려울 것 같아서 ERD에서 장바구니와 장바구니 메뉴를 제외시켰다.
(수정 전)
(수정 후)
프론트엔드에서 메뉴를 가져오는 것은 LocalStorage와 Axios를 사용했다.
storeSearch.html 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- axios -->
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Qwerty's Delivery</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/customer.css">
</head>
<body>
<div id="wrap">
<!-- header -->
<header id="header">
<div class="inner">
<h1><a href="../index.html">Qwerty's Delivery - 고객용</a></h1>
<nav class="nav">
<ul class="gnb">
<li><a href="./user/login">로그인</a></li> <!-- ./login.html -->
<li><a href="./user/register">회원가입</a></li> <!-- ./register.html -->
<li><a href="./review/write">리뷰작성</a></li> <!-- ./register.html -->
</ul>
</nav>
<div class="searchWrap">
<input type="text" placeholder="음식점을 입력해주세요" />
<button class="search" id="search-form">검색</button>
</div>
</div>
</header>
<section id="subVisual"></section>
<main id="container" class="main">
<section id="content">
<ul id="card-list"></ul>
</section>
</main>
<footer id="footer">
<div class="inner">
<p>made by team.qwerty</p>
</div>
</footer>
</div>
<script>
const getStores = async () => {
axios.get('http://localhost:3000/api/user/stores')
.then(function (response) {
console.log(response.data);
const StoreCardList = document.querySelector("#card-list");
StoreCardList.innerHTML = response.data.map((store) => {
return `<li class="movie-card" id=${store.storeId}>
<p>${store.storeImage}</p>
<h3 class="movie-title">${store.storeName}</h3>
<p>평점: ${store.totalRating}</p>
</li>`
}).join('')
})
.catch(function (error) {
console.log(error);
})
}
document.addEventListener("DOMContentLoaded", async () => {
getStores()
})
function getStorePage() {
location.href = "/store"
}
const StoreCardList = document.querySelector('#card-list');
const storeIdSender = async ({ target }) => {
if (target === StoreCardList) return;
if (target.matches('.movie-card')) {
// alert("해당 가게로 이동합니다.");
await localStorage.setItem('storeId', target.id)
console.log('set storeId =>', localStorage.getItem('storeId'))
getStorePage()
} else {
// alert(target.parentNode.id);
await localStorage.setItem('storeId', target.parentNode.id)
console.log('set storeId =>', localStorage.getItem('storeId'))
getStorePage()
}
};
StoreCardList.addEventListener('click', storeIdSender);
</script>
</body>
</html>
1 느낀점
- 소통이 가장 중요하고 상황공유와 진행방향이 중요하다는것을 깨달음
- 백엔드 먼저 구현 후 프론트엔드 구현이 중요
- 조금 더 난이도가 쉬운 과제로, 레이어드 아키텍쳐 형태로 해봤으면 어떨까 하는 아쉬움이 있다.
2 문제
- 배민 프로젝트에서 구현하고자 하는 기본 필수 기능을 다 완성하지 못했다.
3 원인
- 처음에 완벽한 ERD가 짜여지지 않았음. 코드를 짜면서 테이블간의 상관관계를 계속 고민하게 되어 중간에 수정을 여러번 반복함
- 소통이 원활하지 않았고 상황공유가 되지 않았음
- 실력에 비해 프로젝트가 어려웠고, 프론트엔드까지 다 하는 것은 무리였음
4 노력
- 주말 양일 모두 게더에서 코드짜고 협업함
- 내 실력이 부족한것을 알기때문에 협업에 최선을 다하려 노력함.
Git
https://github.com/tuy112/team-qwerty
GitHub - tuy112/team-qwerty: [Node.js 4조 쿼티] 깃 레파지토리입니다
[Node.js 4조 쿼티] 깃 레파지토리입니다. Contribute to tuy112/team-qwerty development by creating an account on GitHub.
github.com
https://github.com/sangwoorhie/team-qwerty
GitHub - sangwoorhie/team-qwerty: [Node.js 4조 쿼티] 깃 레파지토리입니다
[Node.js 4조 쿼티] 깃 레파지토리입니다. Contribute to sangwoorhie/team-qwerty development by creating an account on GitHub.
github.com