웹개발종합반 2주차

1. 자바스크립트 복습

2. JQuery

JQuery(?) => HTML 요소를 조작하는 편리한 javascript 기능을 미리 작성해 놓은것 => 즉 javascript 라이브러리
javascript로 모든기능 작성 가능하지만 길고 복잡해지니까 미리 작성해둔 JQuery 사용하면 된다.

CDN이란?
라이브러리를 가져와 사용할 때는 로컬에 다운로드하거나 웹의 주소를 입력하며 됩니다.

여기서 웹 주소를 입력하는 것이 cdn입니다.

cdn은 content delivery nerwork의 약자로

웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다.

cdn을 사용하면 빠르게 제이쿼리를 로드할 수 있습니다.

cdn은 사용할 일이 많으니 개념을 반드시 익혀 두시기 바랍니다.

제이쿼리(jQuery) CDN 사용법
https://www.w3schools.com/jquery/jquery_get_started.asp

<script> src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>d

ex)

js
document.getElementById('element').style.display = 'none';

jquery
$('#element').hide();

미리 작성된 javascript 코드 !
그렇기 때문에 쓰기전에 반드시 import 해주어 읽어와야 한다.

jquery 간단 예시 ppt

ex1)
요소에 id값주고 jquery로 id값 이용해 요소 조작 가능
$('#post-box').val()

$('#post-box').hide()

$('#post-box').css('width')

$('#post-box').css('display')
...

ex2)
let temp_html = <button>버튼추가</button>;
$('#cards-box').append(temp_html);

let title='제목'
`...
${title}
...
`

백틱 내에서 변수 재활용
ex)

<script>
    let cnt=0;
    let status = '열기';
    function openclose(){
        if($('#post-box').css('display')=='block'){
            $('#post-box').hide();
            status='열기';
        }
        else{
            $('#post-box').show();
            status='닫기';
        }
        
        $('#btn-posting-box').text(`포스팅 박스 ${status}`);

    }

</script>

3. Ajax API JSON

Ajax란?
페이지 전환 없이 서버에서 값을 받아오는 통신방법
그러니까 비동기적으로 작동해서 전체 html문서를 갱신할 필요가 없음

3-1 API

서버에서 클라이언트의 요청을 받는 창구

3-2 JSON

서버 -> 클라이언트 데이터를 내려줄때 데이터 포멧 => JSON
JSON의 구조에 대해 공부

클라이언트 -> 서버 요청 타입
1. Get : 통상적으로 데이터 조회 요청시 사용
2. Post : 통상적으로 데이터 생성 변경 삭제 요청시 사용
=> Get에 대해 알아보자 (post는 4주차 글 참고)

ex)
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
https://movie.naver.com : 지점
/movie/bi/mi/basic.nhn? : 창구
code=161967 : 서버로 보내는 데이터

code 라는 이름은? 서버프로그래머와 클라이언트 프로그래머 사이에 약속된 이름

get은 데이터가 url에 다 나타나므로 post에 비해 보안이 약함
반면 post는 데이터가 헤더에 포함되어 겉으로 보이지 않아 상대적으로 보안이 좋음

3-3 Ajax

Ajax는 JQuery를 import한 페이지 에서만 동작한다는것 주의!!
Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

ex)

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
    console.log(response)
  }
})

요청한 값이 response에 전부 다 들어옴(여기서는 대기오염(?) 정보)

ex quiz)

 function q1() {
            $('#names-q1').empty();

            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row'];

                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];

                        if (gu_mise > 50) {
                            $('#names-q1').append(`<li style="color:red">${gu_name} : ${gu_mise} </li>`);
                        } else {
                            $('#names-q1').append(`<li>${gu_name} : ${gu_mise} </li>`);
                        }

                    }
                }
            })
        }

Ajax 통신으로 API창구를 통해 데이터를 페이지 갱신 없이 받아와서
화면에 뿌려주는 퀴즈

Ajax 기본형식에서 url은 API 주소라고 생각해도됨

받아온 데이터는 response에 딕셔너리,리스트 형태로 구조적으로 저장되
어 있으므로 for문 이용해 데이터를 순회하며 정보를 화면에 뿌려줌

뿌릴때는 역시 id값을 이용해 필요한 위치에 요소를 append시킬 수 있음

뿐만 아니라 조건문을 통해 조건에 따라 다른 형태로 append를 시킬 수도 있다는 것

+)로딩 후 호출 방법

  $(document).ready(function(){
      alert('다 로딩됐다!')
  });