
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
강사님처럼 코드를 복사한 후 붙여넣기 하니 첫번쨰 스샷처럼 추가 문자가 붙어서 나오게 되고 이대로 실행을 누르니 두번째 스샷처럼
변수(?)코드값 그대로 나오게 됩니다.
세번째 스샷처럼 첫번째스샷에 표긴된 문자들을 삭제하니 아예 실행이 안됩니다.



<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQuery 연습하고 가기!</title> <!-- JQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } </style> <script> function q1() { $(`#names-q1`).empty() $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulbike", data: {}, success: function(response){ let rows = response['getStationList']['row'] for (let i = 0; i < rows.length; i++) { let name = rows[i]['stationName'] let rack = rows[i]['rackTotCnt'] let bike = rows[i]['parkingBikeTotCnt'] let temp_html = '<tr> <td>${name}</td> <td>${rack}</td> <td>${bike}</td> </tr>' $(`#names-q1`).append(temp_html) } } }) } </script> </head> <body> <h1>jQuery + Ajax의 조합을 연습하자!</h1> <hr /> <div class="question-box"> <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2> <p>모든 위치의 따릉이 현황을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <table> <thead> <tr> <td>거치대 위치</td> <td>거치대 수</td> <td>현재 거치된 따릉이 수</td> </tr> </thead> <tbody id="names-q1"> <tr> <td>102. 망원역 1번출구 앞</td> <td>22</td> <td>0</td> </tr> <tr> <td>103. 망원역 2번출구 앞</td> <td>16</td> <td>0</td> </tr> <tr> <td>104. 합정역 1번출구 앞</td> <td>16</td> <td>0</td> </tr> </tbody> </table> </div> </body> </html>
