Weekly I Learned- 웹개발 종합반 2주차

배운점:

• Jquery - javascript를 간단하게 사용할수 있게 만들어진 언어

  • id를 지정해야 코드를 조작할수 있다

  • 미리 작성된 코드를 사용하기 때문에 임포트가 필요하다

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• json- 서버에서 api를 통해서 클라이언트로 데이터를 보낼 때 json 을 사용해서 예쁘고 보기좋게 변경해서 브라우저에 보여준다
• api 호출 방식

  • ajax: api 를 호출하기 위해 사용하는 코드, jquery가 임포트 되어있어야 사용이 가능하다

  • GET : 데이터 조회를 요청할 때 사용

    //네이버 영화에서 영화 정보를 요청할 때 GET 방식을 사용한다. 영화정보를 code라고 부르기로 약속했고 161967 영화정보를 브라우저에 보여주게 된다.
    
    https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
    
    ?  : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
    & : 전달할 데이터가 더 있다는 뜻입니다.
    

  • 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
  • 영화 정보: code=161967

$.ajax({
      type: "GET", // GET 방식으로 요청한다.
      url: "http://spartacodingclub.shop/sparta_api/seoulair",
      data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
      success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
        console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
      }
    })

- POST: 데이터 생성, 수정,삭제를 요청할 때 사용

어려운점:

코드 오류

// let을 사용해서 코드를 생성해야하는데 인풋값을 let = value 이렇게 지칭하지 않아서 오류가 생겼다
function q1() {
    $('#input-id').val();
    if ( input-id==' ' ) {
        alert('입력하세요!');
    }
    else
        {
            alert(input-id');
        }
    }

// 올바른 코드 
function q1() {
    let value = $('#input-id').val();
    if (value ==' ' ) {
        alert('입력하세요!');
    }
    else
        {
            alert(value);
        }
    }

// ajax 코드를 익히려고 복붙하지 않았더니 오류가 생겼다, $.ajax({ 에는 :가 붙지 않는다 
// for 문에서 rows를 붙이 지 않았더니 rows안에 [i]['name'] 이 꺼내지지 않는 오류가 발생했다 
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 = [i]['stationName'];
                let rack = [i]['rackTotCnt'];
                let bike = [i]['parkingBikeTotCnt'];
                let temp_html = `<tr>
                                <td>${name}</td>
                                <td>${rack}</td>
                                <td>${bike}</td>
                                </tr>`
                ${'#names-q1'}.append(temp_html);

            }

        }

    })
}

// 올바른 코드 
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 rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = `<tr>
                                            <td>${rack_name}</td>
                                            <td>${rack_cnt}</td>
                                            <td>${bike_cnt}</td>
                                        </tr>`
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }

노트

• 자주 사용하는 jquery

  
//$('#id값').명령 코드 ();
$('#url').val();            // 값을 불러오기
$('#url').val('값을 입력하자!');// 값을 입력하기 
$('#post-box').hide(); // id= post-box 숨기기
$('#post-box').show(); // id= post-box 보여주기

// jquery 코드를 적용하고자 하는 함수에 붙인다 예시) post-box 열기, 닫기 
<script>
        function open_box(){
            $('#post-box').show() 
        }
        function close_box(){
            $('#post-box').hide()
        }
 </script>

// temp_html 과 .append 사용해서 태그 내 html 입력하기 
// temp_html 에 `` 백틱으로 입력하고자하는 html 코드를 감싼다 
//.append () 안에 temp_html를 입력해서 코드를 붙여준다 


let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);


// ajax + jquery 
// GET 사용해서 버튼을 누를 때 마다 이미지와, 텍스트를 변경해보자 
// 이미지 바꾸기, src url 을 api에서 가져온다 -> $(selector).attr(attribute,value)
// .text() api 의 msg 내용을 텍스트로 리턴해준다 
function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function(response){
              let imgurl = response['url'];
              $("#img-rtan").attr("src", imgurl); // "src"= attribute, imgurl=value

              let msg = response['msg'];
              $("#text-rtan").text(msg);
            }
          })
      }