2주차 숙제 제출 문의

커뮤니티

포인트

로딩중

쿠폰

내 강의실

국비 신청 내역

수강권

증명서

숙제 피드백

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

2주차 숙제 제출 문의

[왕초보] 비개발자를 위한, 웹개발 종합반 (프로그래밍 실무, 풀스택)

2주차

이*열

・

추천

・

조회수

답변 완료

2주차 마지막 숙제 제출에서 노션에있는 코드내용이 동영상 해설로 보았을때 보다 더 간략하게 작성해주신것 같더라구요.

$(document).ready(function(){

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/weather/yongin",

data: {},

success: function(response){

let temp = response['temp']

$('#temp').text(temp)

}

})

});

</script>

를 사용했었는데 해설을 보면 let temp=response['temp']가 없이 바로

$('#temp').text(response['temp']) 한줄로 끝내버렸더라구요. 그래서 더욱 효율적인걸로 보이는데

질문의 요점은

이 코드를 보면 response['temp']가 스크립트 내용으로 볼때 response 정의를 어떻게 ajax url의 response로 정의(?)가 되는건지 궁금합니다.

보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 상황을 이해할 수 있어요.

<!doctype html>
<html lang="en">

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet"><style>
      *{
        font-family: 'Noto Sans KR', sans-serif;
      }

      .mytitle{
        width: 100%;
        height: 250px;

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://i.ytimg.com/vi/NHpR38fI_xE/hqdefault.jpg);
        background-position: center;
        background-size: cover 10%;

        color: white;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .mypost{
        width: 500px;
        height: 230px;
        margin: 20px auto 0 auto;
        border: 1px solid blue;
        padding: 10px;
        box-shadow: gray;
      }
      .card{
        margin: 5px auto 5px auto;
      }
      .form-floating1{
        margin-bottom: 15px;
      }
      .form-floating2{
        margin-bottom: 15px;
      }
      .cardbox{
        width: 500px;
        margin:20px auto 0 auto;
      }
    </style>

    <script>    
      $(document).ready(function(){
        $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/yongin",
                data: {},
                success: function(response){
                $('#temp').text(response['temp'])

                //이런상황에서는 temp_html을 사용할 필요가 없음////temp_html = `<span id="temp">${temp}</span>`////$('#temp').append(temp_html)을 사용할 필요가 없이 바로 .text를 사용하는 것이 코드 이득으로 사료됨////코드내용을 한줄이라도 줄이고 효율적으로 사용하는것이 훨씬 중요//
                }
      })
      });
    </script>

</head>

<body><div class="mytitle"><h1 class="head">youra 팬명록</h1><p>현재기온 : <span id="temp">00.00</span>도</p></div><div class="mypost"><div class="form-floating1"><input type="email" class="form-control" id="floatingInput" placeholder="닉네임"></div><div class="form-floating2"><textarea class="form-control" placeholder="응원댓글" id="floatingTextarea2" style="height: 100px"></textarea></div><button type="button" class="btn btn-dark">응원 남기기</button></div><div class="cardbox"><div class="card"><div class="card-body"><blockquote class="blockquote mb-0"><p>새로운 앨범 너무 멋져요!</p><footer class="blockquote-footer">호빵맨</footer></blockquote></div></div><div class="card"><div class="card-body"><blockquote class="blockquote mb-0"><p>새로운 앨범 너무 멋져요!</p><footer class="blockquote-footer">호빵맨</footer></blockquote></div></div><div class="card"><div class="card-body"><blockquote class="blockquote mb-0"><p>새로운 앨범 너무 멋져요!</p><footer class="blockquote-footer">호빵맨</footer></blockquote></div></div></div>
</body>

</html>

댓글 알림