[TIL] 0825 개발일지

예짱·2020년 8월 25일
0
post-thumbnail

7주차 수업

  • 벌써 7주차라니.. 아니! 그렇단 말은 이제 다음주면 끝난다는 것과, 프로젝트를 얼른 마무리 해야한다는 것인데😦
  • 여러모로 아쉽다! 더 열심히 배워볼걸 싶기도 하고...
  • AWS 서버와 mongodb를 연결하고 구동하는 등 다양한 것들을 리눅스에서 실행시키는 방법에 대해 배웠다. 앞으로 개발을 더 하게 되면 자주 사용하거나 익숙해져야 할 리눅스! 아직은 너무 어색하고 어렵다.

💡 피드백

지도 경로 및 정보 띄우기

✅ box 만들기

<div id="result-box" class="row">
        <div id="map" class="col-md-8" style="height:400px"></div> <!-- this is jido -->
        <div id="show-info-box" class="col-md-4">
            <p>이동경로</p>
            <p>환승역</p>
            <p>소요시간</p>
        </div>
    </div>
  • 일단 지도와 show-info-box를 id="result-box" class="row" 로 묶어주었다.
  • 총 12 중에서 map에 "col-md-8"을, box에 "col-md-4"를 적었다.
  • 이렇게 하면 내가 원했던 대로 지도옆에 정보가 나오는 박스가 뜬다!

✅ 지도에 들어갈 정보 알아내기

결과 데이터 요소 분석하기

  • console.log(json.parse(xhr.responseText)["result"])를 해서 결과를 분석해보니 여러가지 데이터 요소들이 있었다. 오딧세이 홈페이지에서 각각의 이름들이 어떤 결과를 나타내는지 살펴보고 필요한 것들만 떼어내었다.
  • 사진에 있는 것 이외에도 버스 노선, 지하철 노선, 도보 소요 시간 등 다양한 정보들이 있어서 내가 원하는 대로 코딩을 하는 것에 매우 도움이 되었다.
  • 아직 ajax를 이용해서 정보를 받고 그것을 옆에 내가 원하는 대로 나타나도록 하는 것은.. 못하겠다ㅠ__ㅠ (바부🤨) 그래서 일단은!
    console.log를 이용해서 개발자도구 console 창에 해당 경로에 대한 모든 이동 정보를 보여주는 것을 목표로 했다.

코딩하기

  • 하위 subpath의 length를 기준으로 for문을 돌렸다. 처음에는 경로가 아닌 것 같은 부분이 있어서 그 부분을 빼고 설정했는데, 알고보니 경로가 없는 게 아니라 trafficType=3 즉, 도보로 이동하는 부분이어서 그랬다.

  • 전체 경로 중 몇 번째인지 나타내기 위해서 m이라는 변수를 함수 밖에 지정해주었다.

  • trafficType=3의 경우 만약 도보에 소요된 시간이 0분인 경우 바로 환승함을 의미한다. 이 경우에 굳이 '도보 0분 소요'라고 쓸 필요도 없고 이동 경로 수를 count할 필요도 없겠다는 생각이 들었다.
    그래서 아래 코드와 같이 소요 시간이 0인 경우에는 따로 'm 번째' 표시를 하지 않고 (환승) 으로 나타내도록 만들었다.

  • 처음에는 내가 원하는 대로 나오지 않고 에러도 많이 떴다.😫

  • 진짜 오기로 했는데..! 결국 해결했다. (내 실수도 많았..예를 들면 버스 타입인데 지하철 노선이라고 적어놨다든가.. 잘못 썼다든가...)

아무튼!
완성코드와 완성(이라고 하기엔 그냥 콘솔창에 나타나는 것 뿐이지만)결과는 아래와 같다.

<script>
function getInfo(sx, sy, ex, ey) {
            var xhr = new XMLHttpRequest();
            //ODsay apiKey 입력
            var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=zZOOCFJaccyfaXpDSn6kJaK%2BV5CTfh4tdW7Bp4Mg2Jo";
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    for (let i = 0; i < ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"]).length; i++) {

                        if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["trafficType"] == 1) {
                            console.log(m + '번째 =', (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["startName"] + '-->'
                                + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["endName"],
                                '(지하철 ' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["lane"][0]["name"] + ')')
                            m++;
                        } else if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["trafficType"] == 2) {
                            console.log(m + '번째 =', (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["startName"] + '-->'
                                + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["endName"],
                                '(버스 ' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["lane"][0]["busNo"] + '번)')
                            m++;
                        } else {
                            if ((JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["sectionTime"] == 0) {
                                console.log('(환승)')
                            } else {
                                console.log(m + '번째 = 도보로 이동', '(' + (JSON.parse(xhr.responseText))["result"]["path"][0]["subPath"][i]["sectionTime"] + '분 소요)')
                                m++;
                            }
                        }


                    }
                }
            }

        }
</script>

  • 이게 환승 설정하기 전! 저렇게 0분 소요라고 뜨는데 굳이 쓸 필요가 없다고 생각

👻 완성! 👻

헤헤.. 😉 이제 망원한강공원 앞으로 가는 기념으루다가~!

(tmi 사족을 덧붙이자면)
ODsay에 내 어플리케이션 관리를 들어가면 내가 해당 API를 몇 번 호출했는지 볼 수 있는데 새벽에 2시간 동안 80회 이상 호출했다는 게 너무 웃겼다. 얼마나 오류를 고치고 싶었길래...! ㅋㅋㅋㅋㅋ (지금은 90..!)

✅ html 연결하기 (render_template)

  • 아래와 같은 navbar 또는 index.html (프론트페이지)의 버튼을 클릭하면 다른 html로 연결되도록 하는 작업을 했다.
    -전에는 되게 .. 막 복잡하게 잘 못했었는데 (제대로 한지는 모르겠다마는) 이번에는 쉽게 잘 해서 깜짝..!😮💡

  • 먼저 app.py에는 다음과 같이 적어준다.
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/date')
def review_date():
    return render_template('review.html')

@app.route('/get_location')
def show_location():
    return render_template('location.html')
  • 그리고 각각 해당하는 html 파일에는 아래와 같이 url_for 을 사용하면 된다.
<a class="nav-link" href="{{ url_for('review_date')}}">데이트 코스 추천</a>

아무튼, 아무튼~~ 이렇게 하면! 클릭할 때마다 잘 넘어가는 걸 확인할 수 있다!

favicon 설정하기🍋

  • 이건 그냥,,~ 404 오류 뜨는 게 괜히 싫기도 하고 그냥 뭐라도 하고 싶기는 한데 코드는 보기 싫어서 했다.


    작지만..보일 거라고 믿어요🍋🍋🍋 (직접 끄적끄적 그렸다, 심심했지!)
profile
코딩 천재만재가 되고 싶은 코린이💻🍎 EWHA BCS & SW

0개의 댓글