내일배움캠프 D+15(웹개발 심화반3)

💻 웹 프로그래밍 A-Z 심화 3주차

---

3-3

      decompose() 태그 없애기

• 원하는 태그와 그 내용을 지울 수 있음

  likes_tag = song.select_one("td > div > button.like > span.cnt")
  likes_tag.span.decompose()  # span 태그 없애기
  likes = likes_tag.text.strip()  # 텍스트화한 후 앞뒤로 빈 칸 지우기

• Python BS4 Use of clear(), extract() and decompose()

Sl - 스크롤

# 1000픽셀만큼 내리기
ver.execute_script("window.scrollTo(0, 1000)")  
sleep(1)
# body 만큼 스크롤 내리기(=맨 밑까지 내리기)
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") 

---

3-5

      네이버 지도 API

• 확대/축소 버튼 넣기
  map에 네이버에서 지정한 옵션 추가

  let map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.4981125, 127.0379399),
    zoom: 10,
    zoomControl: true,
    zoomControlOptions: {
        style: naver.maps.ZoomControlStyle.SMALL,
        position: naver.maps.Position.TOP_RIGHT
    }
  });

• 마커 띄우기
  마커가 나타날 경위도 좌표, 지도, (필요시 이미지 지정)

  let marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.4981125, 127.0379399),
    map: map
    icon: "{{ url_for('static', filename='rtan_heart.png') }}"
  });

• 정보창 띄우고 닫기
  addListener 어떤 행동이 발생했음을 알리는 걸 등록

            naver.maps.Event.addListener(marker, "click", function () { 
              // 정보창이 열려있을 때는 연결된 지도를 반환하고 닫혀있을 때는 null을 반환
                console.log(infowindow.getMap()); 
                if (infowindow.getMap()) {
                    infowindow.close();
                } else {
                    infowindow.open(map, marker);
                }
            });

---

3-6

      API 설계하기

• 맛집 정보 스크래핑
  • 셀레니움 이용해서 더 많은 정보 가져오기
• 지도 보여주기
  • 네이버 지도 API 이용
• 각 맛집 별 마커, 정보창, 카드 만들고 서로 연결하기
  • DB에 저장된 정보를 GET API로 가져와서 반복문으로 하나씩 넣어주기

---

3-12

      특정 함수와 연결

• id도 반복문으로 돌리면서 숫자 넣을 때 변수값 따옴표 해줬는데 강의 자료에서는 빠져있다. 백틱 안이라서 생략해도 되나보다...

  <a href="javascript:click2center(${i})" 
   class="matjip-title">${matjip['title']}</a>

---

3-13

      숙제

• 즐겨찾기 기능
  • DB에 즐겨찾기 표시
  • 조건문으로 마커 변경
  • 취소 시 DB에서 삭제 unset
    참고

    if action_receive == "like":
        db.matjips.update_one({
        "title": title_receive, "address": address_receive
        }, {
        "$set": {"liked": True}
        })
        msg = '등록 완료!'
    else:
        db.matjips.update_one({
        "title": title_receive, "address": address_receive}, {
        "$unset": {"liked": False}
        })
        msg = '취소 완료!'

	function make_card(i, matjip) {
                let html_temp = ``;
                if ("liked" in matjip) {
                    html_temp = `<div class="card" id="card-${i}">
                                    <div class="card-body">
                                        <h5 class="card-title"><a href="javascript:click2center(${i})" class="matjip-title">${matjip['title']}</a></h5>
                                        <h6 class="card-subtitle mb-2 text-muted">${matjip['category']}</h6>
                                        <i class="fa fa-bookmark"token interpolation">${matjip['title']}', '${matjip['address']}', 'unlike')"></i>
                                        <p class="card-text">${matjip['address']}</p>
                                        <p class="card-text" style="color:blue;">${matjip['show']}</p>
                                    </div>
                                 </div>`;
                } else {
                    html_temp = `<div class="card" id="card-${i}">
                                    <div class="card-body">
                                        <h5 class="card-title"><a href="javascript:click2center(${i})" class="matjip-title">${matjip['title']}</a></h5>
                                        <h6 class="card-subtitle mb-2 text-muted">${matjip['category']}&nbsp; </h6>
                                        <i class="fa fa-bookmark-o"token interpolation">${matjip['title']}', '${matjip['address']}', 'like')"></i>
                                        <p class="card-text">${matjip['address']}</p>
                                        <p class="card-text" style="color:blue;">${matjip['show']}</p>
                                    </div>
                                 </div>`;
                }
                $('#matjip-box').append(html_temp);
        }


function bookmark(title, address, action) {
            $.ajax({
                type: "POST",
                url: `/api/bookmark`,
                data: {
                    title_give: title,
                    address_give: address,
                    action_give: action
                },
                success: function (response) {
                    alert(response["msg"])
                    get_matjips()
                }
            });
        }

✅ Check Point

- title, address, action 매개 변수로 받기
- 필드만 추가 삭제
  {"$set": {"liked": True}}) /    {"$unset": {"liked": False}})

• 마커

  function make_marker(matjip) {
  		  let marker_img = '';
            if ("liked" in matjip) {
                    marker_img = '{{ url_for("static", filename="marker-liked.png") }}'
                } else {
                    marker_img = '{{ url_for("static", filename="marker-default.png") }}'
                }
                let marker = new naver.maps.Marker({
                    position: new naver.maps.LatLng(matjip["mapy"], matjip["mapx"]),
                    map: map,
                    icon: marker_img
                });
            markers.push(marker) //전역변수 선언
            return marker //리턴값 인포윈도우에 활용
        }

marker를 if문 넣어서 안에 두 번 쓰니까 실행이 안 됐다. 선언 자체는 marker_img처럼 밖에서 해줘야한다.

---

SAVE 💾

  아우 헷갈려... 좋아요 기능은 마커처럼 하나만 변하게 하려고 했고 마커는 반대로 다 변하게 하려고했다. ㅠㅠ어렵고만...

  그래도 2주차가 더 난이도 높았던 느낌이다. 네이버에서 정해둔 서식을 따라야하는 게 많아서 좀 덜 생각하고 구현이 가능했다. 2주차에서 배웠던 부분을 조금 응용하는 부분이 있어서 좋았다. 근데 진자2 섞어 보려했는데 정말 헷갈린다ㅜㅜ