[내일배움캠프] 사전캠프 - 미니팀과제 TIL 3~4일차

 

▼1~2 일차 TIL▼

https://chaeyami.tistory.com/21

[내일배움캠프] 사전캠프 - 미니팀과제 TIL 1~2일차

3일차 (3.8)

카테고리별 목록 완성하기

카테고리별로 가져오기 완성했다!

홈화면 만들어주실 때 카테고리를 select로 각각 선택할 수 있게 만들어주셔서 그 value만 사용하면 됐다.

결국 플라스크 함수는 각 카테고리별로 하나씩 다 만들었고, 자바스크립트에서는 select 폼에 target 함수를 넣어 사용자가 선택한 option값의 value를 변수로 가져오고, 지역값을 DB로 넘길 수 있게 미리 만들어둔 tag와 비교해서 서버에 넘기게 했다. 그 후 서버에서 tag와 비교해 해당 데이터를 불러왔다. value=""인 전체보기 카테고리도 추가!

플라스크 함수가 지역별로 열몇개 있는 게 너무너무 거슬리지만 일단 구현했으니 한 단계 나아갔다! 첨 쓰는 거 너무 어렵다...

// ============================카테고리 선택 시 리스트 ============================

    const changeValue = (target) => { //  <select onchange="changeValue(this)">
      // 선택한 option의 value 값
      let tag_name = target.value;

      fetch(`/popular/${tag_name}`)
        .then((res) => res.json())
        .then((data) => {
          let rows = data['result']
          $('#cards-box').empty()
          // list 꺼내기
          rows.forEach((a) => {
            let restaurant_name = a['restaurant_name'] //제목
            let comment = a['comment'] //내용
            let road_address = a['road_address'] //카테고리(지역)

            console.log('title')
            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <a href="" >
                    </a>
                    <div class="card-body">
                        <a href="" style="text-decoration: none;">
                        <h5 class="card-title">${restaurant_name}</h5>
                        <p>${road_address} </p>
                        <p class="card-text"> ${comment}</p>
                        </a>
                    </div>
                </div>
            </div>
                            `
            $('#cards-box').append(temp_html);
          })
        })

    }

상세페이지 보기

아무리 해도 상세페이지가 안 된다. 플라스크 특성상 자바스크립트에 파일 경로와 이름을 넣으면 홈주소/파일이름이 되어버려서  http://localhost:5000/read.html 이런 식으로 넘어가버리기때문에 뜨질 않는다.

그래서 플라스크 함수에 return render_template을 쓰면, 클릭한 해당 데이터를 담아갈 수가 없다. 자바스크립트로 click 속성에 함수를 주고 변수로 데이터를 받아 fetch로 return render_template 해봤는데, 상세페이지 함수가 로드되면 데이터를 가져오게 해놨음에도 불구하고 안 뜬다.... 안뜬다구

이외에도 여러 방법을 시도해봤는데, 여러번 건너가게 되면 데이터를 담아올 수가 없다던가, 데이터를 담아오려고 단계를 줄이면 로딩이 안 된다던가 해서 싹 다 실패해버렸다. React나 Node.js 할 때는 진짜 id값만 넣으면 모든게 일사천리였는데, 내가 동기식 프레임워크를 너무 만만하게 생각했나... 비동기적으로 처리하게 할 수 있다고 했었는데 내 능력 밖인가보다.

 

마무리

그치만 차근차근 잘 진행되고 있다. 카테고리 불러오기에서 거슬리던 문제가 해결됐다.

우리 리더가 플라스크 함수를 하나로 합쳐주신 거다! value에 해당하는 지역값을 바로 담아서 formData로 넘기는 방식으로 한 거다. 역시 대단해...

@app.route("/popular/sorted", methods=["POST"])
def review_sorted_get(): # 옵션값이 전체일때
    if request.form["region_tag_ko"] == "":
        reviews_category = list(db.restaurant.find({},{'_id':False}))
        return jsonify({"result":reviews_category})
    region_tag_ko = request.form["region_tag_ko"]
    reviews_category = list(db.restaurant.find({'tag':region_tag_ko},{'_id':False}))
    return jsonify({"result":reviews_category})

 

나 때문에 상세페이지가 지연돼서 상세페이지 프론트 맡은 분이 지도 API 가져오는 걸 하고 계신다. 뭔가 내 일을 떠넘긴 기분이라 죄송하다.

사진 가져오는 것도 해결이 안 됐다. 팀장님 말로는 현재 우리 과제 목표 수준보다 멀다고 했다. 다른 프레임워크나 언어 쓸 때도 사진 받아서 저장하는 건 해 본 적이 없어서,,, 도움이 안 되는 나.

그래서 우리 임의로 더미데이터 넣을 때 사진도 넣기로 했다. 

 

4일차 (3.9)

상세페이지 보기 완성

상세페이지 완성.... 은 했는데 새 창을 띄우는 게 아니라 그냥 보던 그 창을 바꾸는 거다. 엄밀히 말하면 reload 하는 방식도 아니고, 그냥 홈을 바꾸는 거다. 카테고리 불러오기랑 같은 방식...

그래서 글을 누르고 상세페이지(라고 하기도 부끄러운 홈이지만 상세정보가 나와있는 페이지)에서 back 하면 나가져버린당ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래서 뒤로가기 버튼 만들었다... 사실 얘의 정체는 홈으로 가는 링크가 달린 버튼이라는 거다...

세상에 얼레벌레 돌아가는 채야미의 백엔드세상

 

그 와중에 리더는 우리 파일을 취합하면서 뚝딱뚝딱 또 뭘 만들어오셨다. 등록, 취소 등등 작동에 reload하는 구문들을 깔끔하게 정리해버렸다. 난 진짜 깔끔하게 짜는데는 재능이 없는데 너무 부럽다. 열심히 하면 나도 할 수 있을까?

카카오맵 API 가져오기

나머지분들은 페이지를 예쁘게 꾸미고, 나는 삭제버튼을 만들었는데 지도 API 가져오기가 완성되었다. 그래서 내가 완성된 API를 조금 손봤다.

클릭한 카드의 정보를 변수로 받아와서 해당 주소에 맞는 지도를 띄울 수 있게 했다. 사실 다 해 주셔서 그냥 상세보기 함수에 API 추가하고 변수이름 넣은 게 끝이다. 오늘도 숟가락 얹기

# ============================= 글 조회 =============================
@app.route("/move_detail",methods=["POST"]) # 글 링크 누르면 상세페이지로 이동
def move_detail():
    address = request.form["address"]
    aaaa= list(db.restaurant.find({'road_address':address},{'_id':False}))
    return jsonify({"result":aaaa})


# ============================= 글 삭제 ============================= 

@app.route("/delete",methods=["POST"]) # 글 링크 누르면 상세페이지로 이동
def delete_card():
    address = request.form["address"]
    
    db.restaurant.delete_one({'road_address':address})
    return jsonify({'msg': '삭제되었습니다.'})

// ============================ 상세페이지 ============================

// ------------ (3.9 추가) 삭제하기 버튼------------
function click_card(name, road_address) {
  var name_selected = name;
  var address_selected = road_address;

  const formData = new FormData();
  formData.append("address", address_selected);

  fetch("/move_detail", { method: "POST", body: formData })
    .then((res) => res.json())
    .then((data) => {
      let rows = data["result"];
      $("#cards-box").empty();
      // list 꺼내기
      rows.forEach((a) => {
        let restaurant_name = a["restaurant_name"]; //제목
        let road_address = a["road_address"];
        let jibun_address = a["jibun_address"];
        let detail_address = a["detail_address"];
        let extra_address = a["extra_address"];
        let nickname = a["nickname"];
        let comment = a["comment"]; //내용
        let rating = a["rating"];
        let star_repeat = "⭐".repeat(rating);

        let temp_html = `
        <div id = "detail_page">
        <h5 class="detail-title">${restaurant_name}</h5>
          <div id = "detail-body">
            <div class="rating">${star_repeat} </div>
            <div class="comment"> ${comment}</div>
            <div id ="info">
              <div class = "address">
                ${road_address} ${extra_address}
              </div> 
              <div class = "nickname">글쓴이: ${nickname}</div>
              <div>
                <form id = "delete-form">
                  <button id="del_button" class="btn btn-outline-secondary" onclick="delete_card ('${restaurant_name}','${road_address}')" >삭제하기</button>
                </form>
              </div>
            </div>
          </div>
          <div class="maps">
            <div id="map" style="width:100%;height:350px;"></div>
            <p style="font-size:13px; margin-top:5px; text-align: right;">
              <em class="link">
                  <a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
                      결과 오류 제보하기
                  </a>
              </em>
            </p>
          </div>
          <script>
            var mapContainer = document.getElementById('map'), 
            mapOption = {
                center: new kakao.maps.LatLng(33.450701, 126.570667), 
                level: 3
            };
            var map = new kakao.maps.Map(mapContainer, mapOption);
            
            var geocoder = new kakao.maps.services.Geocoder();
            
            geocoder.addressSearch('${road_address}', function (result, status) {
            if (status === kakao.maps.services.Status.OK) {
                var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
                var marker = new kakao.maps.Marker({
                    map: map,
                    position: coords
                });
                var infowindow = new kakao.maps.InfoWindow({
                    content: '<div style="width:150px;text-align:center;padding:4px 0; font-size:12px;">${restaurant_name}</div>'
                });
                infowindow.open(map, marker);
        
                map.setCenter(coords);
              }
            });    
          </script>
          
                 `;
        $("#cards-box").append(temp_html);
      });
    });
}

//------------(3.9 추가) 삭제하기 버튼 함수------------

function delete_card(name, road_address) {
  var name_selected = name;
  var address_selected = road_address;
  // return restaurant_name_selected
  // console.log(name_selected,address_selected)
  const formData = new FormData();
  formData.append("address", address_selected);

  fetch("/delete", { method: "POST", body: formData })
    .then((res) => res.json())
    .then((data) => {
      alert(data["msg"]);
    });
}

// ============================ 상세페이지 끝 ============================

 

꾸미기

웹페이지가 거의 완성되었다. 홈이랑 배너 등등 만들어주신 CSS를 이어받아 상세페이지를 꾸몄다. CSS는 진짜 자신 없지만, 티스토리 블로그 스킨 꾸민 짬으로 열심히 해봤다...

마무리

거의 다 됐는데, 아직 몇가지 문제가 남았다.

푸터도 완성해야 하고,

데이터를 가져올 때 필수입력값을 제외한 데이터들이 입력되지 않은 상태에서 저장되면 불러올 때 undefined로 출력된다. 아니 너무 당연하잖아...?

이 정도는 내일 해결하고 완성할 수 있을 것 같다. 

다같이 하니까 혼자할때보다 훨씬 빠른 것 같다. 내가 막히는 부분을 이어받아 도와주시고, 내가 할 부분도 틀을 만들어주셔서 뭔가 뚝딱뚝딱 완성된다. 

 

이게 끝나면 본 캠프 개강이다. 여전히 자신 없고 걱정 많지만... 어쩌겠어 하기로 했는데 열심히 해야지