-
백오피스 프로젝트 5. 프로젝트 완성Projects/Qwerty - 배달의민족 (team) 2023. 7. 24. 18:14
프론트엔드 - 백엔드 연결 (고객님 파트)
가게목록 페이지/ 단일 가게의 메뉴 페이지/ 리뷰작성 페이지
중간에 장바구니가 있어야 할 것 같아 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
https://github.com/sangwoorhie/team-qwerty
'Projects > Qwerty - 배달의민족 (team)' 카테고리의 다른 글
백오피스 프로젝트4. 회원가입 시 이메일인증, 회원가입 CRUD, 백엔드 API 기능구현 (0) 2023.07.24 백오피스 프로젝트 3. view Engline (ejs), 리뷰 CRUD, 프론트엔드 - 백엔드 연결 (0) 2023.07.24 백오피스 프로젝트 2. 고객님 주문, 주문조회, 회원가입, 이메일인증, 트랜젝션 (0) 2023.07.18 백오피스 프로젝트 1.역할분배, 와이어프레임, ERD, API 명세 (0) 2023.07.17