23.08.09 항해 99 16기 개강준비과정 웹미니 프로젝트 1일차

웹 미니 프로젝트의 날이 밝았다

기획부터 코딩까지 조원과 함께 다 해야 하는 프로젝트였다

이전 기수의 완성본을 보니 생각보다 퀄리티가 높았다

다른 조원분들은 뜯어보면 별거아니라고 했는데 나는 그렇게 생각하지 않았다

진짜 처음 입문하는 나에게는.. 주어진 시간에 만들기엔 쉽지 않은 일이라고 생각했기 때문이다

 

우리 조가 만들고자 하는 웹페이지는

밥도둑 가게 즉 맛집을 소개하는 페이지였다

그중에서 나는 메인 페이지를 맡아 만들기로 했다

 

항해 99 웹개발 종합반 수업을 다시 보면서

조금씩 구연하기 시작하였다

 

하면서 가장 큰 문제는 상세페이지의 식당별 각 댓글 부분의 별점의 합을

메인페이지에 평균을 내는 것이었다

구글링도 해보고 챗 GPT에게 물어보고 하였지만

방법을 찾을 수 없었다 이해하지 못했다는 것이 더 맞을지도 모르겠다

 

팀원에게 물어봤는데 이렇게 이렇게 하면 될꺼 같다 하셨지만..

도통 이해가 가지 않았다 그렇게 포기를 할 무렵

다른 팀원분께서 화면공유 하여 0부터 10까지 알려주셨다 

너무 감사한 분이다 정말로

 

그걸 들으면서 생각한 것은 얼개에 대한 이해가 너무 낮다는 것이었다

그래서 어려웠던 부분을 조금 뜯어서 살펴보고자 한다

 

우선 mongo db에서 더미 데이터를 만드는 것부터 시작했다

 

 

이후 python 부터 차근차근 고쳐나가기 시작했다

우선 팀원들과 함께 사용할 데이터 베이스를 python에 입력하였다

나는 내가 필요한 것만 입력했는데 그러면 안된다고 한다

 

필요한 데이터베이스 sparta

음식점 restaurant

 음식점 id num

 음식점 이름 name

 음식점 지역 region

 음식점 사진 URL image

 음식점 맛 별점 star

 음식점 추천 메뉴 recommend

 음식점 코멘트 comment

댓글 comment

 유저아이디 id 

 음식점 id num

 코멘트 comment

별점 star

 회원 정보 user

 아이디 id

 비밀 번호 pw

 비밀 번호 확인 ( 둘이 틀릴 경우 다시 입력하시오) pw_check

 닉네임 nickname

 

 

@app.route("/api/main", methods=["POST"])

def main_post():

    urlimage_receive = request.form['url_give']

    name_receive = request.form['name_give']

    star_receive = request.form['star_give']

    num_receive = request.form['num_give']

    comment_receive = request.form['comment_give']

    region_receive = request.form['region_give']

    recommend_receive = request.form['recommend_give']

    comment_receive = request.form['comment_give']

 

이후 평균내기 작업에 들어갔다

app.py 작업물이며 왼쪽이 기존 코드고 오른쪽이 변경한 코드다

팀원들과 코드를 맞췄을 때 문제가 없도록 이름들을 변경하였다

 

가장 이해안간게 for 문이었다

for i in range(len(a))

range : ()안을 포함하는 객체를 만들어줌
len : list(a)안의 요소 개수를 리턴하는 함수 라고 한다

@app.route("/bab", methods=["GET"]) def bab_get():     all_bab = list(db.bab.find({},{'_id':False}))     return jsonify({'result':all_bab})

@app.route("/api/main", methods=["GET"]) def main_get():     all_restaurant = list(db.restaurant.find({},{'_id':False}))     for i in range(len(all_restaurant)):         total_star = 0         count = 0         all_comment = list(db.comment.find({'num':all_restaurant[i]['num']},{'_id':False}))               total_star = total_star + all_restaurant[i]['star']         count+= 1                 for j in range(len(all_comment)):             total_star = total_star + all_comment[j]['star']             count+= 1         all_restaurant[i]['total_star'] = round(total_star/count,1)             return jsonify({'result':all_restaurant})

 

index.html 작업물이며 왼쪽이 기존 코드고 오른쪽이 변경한 코드다

function listing() {             fetch('/bab').then((res) => res.json()).then((data) => {             let rows = data['result']             $('#bab-box').empty()             rows.forEach((a)=>{                 let name = a['name']                 let image = a['image']                 let star = a['star']                                           let temp_html =` <div class="col">                                     <div class="card h-100">                                         <img src="${image}"                                             class="card-img-top">                                         <div class="card-body">                                             <h5 class="bab-title">${name}</h5>                                             <p>${star}</P>                                         </div>                                     </div>                                 </div>`                   $('#bab-box').append(temp_html)                 })              })         }

function listing() {             fetch('/api/main').then((res) => res.json()).then((data) => {             let rows = data['result']                                                     $('#bab-box').empty()             rows.forEach((a)=>{                 let name = a['name']                 let urlimage = a['urlimage']                 let total_star = a['total_star']                                 let temp_html =`<div class="col">                                     <div class="card h-100">                                         <img src="${urlimage}"                                             class="card-img-top">                                         <div class="card-body">                                             <h5 class="bab-title">식당이름 : ${name}</h5>                                             <p id="star">총점수 : ${total_star}</P>                                         </div>                                     </div>                                 </div>`                   $('#bab-box').append(temp_html)                 })               })         }

 

아직 프로젝트 기간이 2일 더 남았다

이 프로젝트를 통해 한발짝 더 나아갈수 있게 힘내봐야겠다