심기일전

2주차때 많이 못따라가서 '아.. 역시 안되나봐..'라고 살짝 느꼈다.
일단 돈은 냈으니 꼬박꼬박 수업은 들어야하니 월요일부터 3주차도 힘내서 시작!
이번엔 순조롭게 진행되는 듯 보였다.
튜터님 수업방식이 코드를 같이 쓰기보단 설명듣고 코드스니펫을 붙이는 식이라
손과 머리와 눈이 다 바쁘진 않았다.

그러다 중간쯤 네이버클라우드플랫폼에 등록을 해야하는데 해외카드는 사용이 안되는거다..
갑자기 여기서 시간은 다 잡아먹고 스파르타코딩클럽에 문의를 드렸더니
꼭 결제등록도 해야한다며 네이버 고객센터쪽에 문의하라는 답변..
일단 진행을 해야하니 한국에 있는 동생 명의랑 카드를 빌렸다.

'해외거주자도 수강할 수 있다더니 뭐야..'
라는 생각이 들때쯤 슬랙을 보다보니 똑같은 수강주차에서 해외에서 어려움을 겪는 분들이 계셨다.
거기에 답변을 해준 튜터분의 답변을 보니 스파르타코딩클럽에서 해외거주자를 위해 준비해둔 키가 있는거임!!
'뭐야,, 답변하는 사람마다 답이 달라..'
요건 서비스개선의 요지가 있는듯!

강의는 듣고 있으나 내 머리는 백지상태

3주차에서 API사용을 위한 등록에서 고비를 한번 겪었지만 수강은 순조로웠다.
하지만 숙제에서 꽉 막혀버린 나의 뇌회로.
머리야 움직여!!

이번엔 숙제해설도 설명은 해주시지만 코드를 같이 쓰는게 아니었다.
숙제해설영상을 다섯번은 돌려본 것 같다.
수업 다 들었는데 숙제를 하려고 파이참화면을 보면서 키보드에 손은 올렸으나
움직이지 못하는 나의 손가락.
손가락아 제발 움직여!!

이제 진짜 복습을 안하면 못따라가겠다.
기초반도 이제 복습기간이 얼마 남지 않았는데 빨리 복습하지 않으면 모든것이 거품이 될것같다.

이번주에 배운것

셀레니움을 사용해서 웹스크래핑.
크롬이 열렸다 데이터 긁어 온 다음 꺼지는데 신기했다!
네이버지도API사용해서 지도 나타내고 맛집데이터랑 연동시켜 지도위에 표시하기.
뭔가 그럴싸한 서비스에 활용해도 될듯!

일본은 맛집사이트는 있는데 구글 이외에 한정된 지역안에서 지도위에 맛집을 모아서 볼 수 있는 서비스가 없는것 같아 괜찮을 것 같은데 네이버지도API같은 일본판API가 있을까?

생생정보통에서 맛집정보를 가지고 왔는데 일본 맛집사이트 데이터를 이용해도 되는지 허가가 필요한가?

서비스를 만들때 분명 제약은 있을테니 구상이 잡히면 제약도 리스트화 해야할듯!

이번주 배운것을 토대로 맛집지도는 완성했다.
마지막 해답코드를 보고 따라썼는데도 갑자기 맛집리스트가 안뜨고
서버에 올렸더니 지도 연동이 안되고 트러블은 있었지만
코드를 천천히 다시 보고 비교해보고 하면서 해결되서 자랑스럽게 동생에게도 링크를 보냈다!

하루빨리 내 서비스를 만들 날이 오길!

3주차과제

index.html

<meta property="og:title" content="스파르타 맛집 지도"/>
<meta property="og:description" content="mini project for Web Plus"/>
<meta property="og:image" content="{{ url_for('static', filename='banner.jpg') }}"/>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

<style>
    .wrap {
        width: 90%;
        max-width: 750px;
        margin: 0 auto;
    }

    .banner {
        width: 100%;
        height: 20vh;
        background-image: url("{{ url_for('static', filename='banner.jpg') }}");
        background-position: center;
        background-size: contain;
        background-repeat: repeat;

    }

    h1.title {
        font-family: 'Jua', sans-serif;

        color: white;
        font-size: 2rem;
    }

    h5 {
        font-family: 'Jua', sans-serif;
    }

    .matjip-list {
        overflow: scroll;
        width: 100%;
        height: calc(20vh - 30px);
        position: relative;
    }

    .card-title, .card-subtitle {
        display: inline;
    }

    #map {
        width: 100%;
        height: 50vh;
        margin: 20px auto 20px auto;
    }

    .iw-inner {
        padding: 10px;
        font-size: smaller;
    }

</style>
<script>
    let y_cen = 37.4981125   // lat
    let x_cen = 127.0379399  // long
    let map;
    let markers = [];
    let infowindows = [];

    $(document).ready(function () {
        map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(y_cen, x_cen),
            zoom: 12,
            zoomControl: true,
            zoomControlOptions: {
                style: naver.maps.ZoomControlStyle.SMALL,
                position: naver.maps.Position.TOP_RIGHT
            }
        });
        get_matjips();
    })

    function get_matjips() {
        $('#matjip-box').empty();
        $.ajax({
            type: "GET",
            url: '/matjip',
            data: {},
            success: function (response) {
                let matjips = response["matjip_list"]
                for (let i = 0; i < matjips.length; i++) {
                    let matjip = matjips[i]
                    console.log(matjip)
                    make_card(i, matjip);
                    let marker = make_marker(matjip);
                    add_info(i, marker, matjip);
                }
            }

        });
    }

    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']}</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 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
    }

    function add_info(i, marker, matjip) {
        let html_temp = `<div class="iw-inner">
                            <h5>${matjip['title']}</h5>
                            <p>${matjip['address']}
                           </div>`;
        let infowindow = new naver.maps.InfoWindow({
            content: html_temp,
            maxWidth: 200,
            backgroundColor: "#fff",
            borderColor: "#888",
            borderWidth: 2,
            anchorSize: new naver.maps.Size(15, 15),
            anchorSkew: true,
            anchorColor: "#fff",
            pixelOffset: new naver.maps.Point(10, -10)
        });

        infowindows.push(infowindow)
        naver.maps.Event.addListener(marker, "click", function (e) {
            if (infowindow.getMap()) {
                infowindow.close();
            } else {
                infowindow.open(map, marker);
                map.setCenter(infowindow.position)
                $("#matjip-box").animate({
                    scrollTop: $("#matjip-box").get(0).scrollTop + $(`#card-${i}`).position().top
                }, 2000);
            }
        });
    }

    function click2center(i) {
        let marker = markers[i]
        let infowindow = infowindows[i]
        if (infowindow.getMap()) {
            infowindow.close();
        } else {
            infowindow.open(map, marker);
            map.setCenter(infowindow.position)
        }
    }

    function bookmark(title, address, action) {
        $.ajax({
            type: "POST",
            url: '/like_matjip',
            data: {
                title_give: title,
                address_give: address,
                action_give: action
            },
            success: function (response) {
                if (response["result"] == "success") {
                    get_matjips()
                }
            }
        })
    }
</script>

<div class="matjip-list" id="matjip-box">
</div>