[내일배움캠프-사전캠프 07일차] Web 3주차

jQuery + fetch 로 웹페이지 제어

 

'fetch'는 인터넷을 통해 데이터를 요청하고 받아오는 과정

 

1. togle

html 태크에 display:none 속성을 부여하여 보이거나 안보이도록 해주는 것

<script>
    function openclose() {
        $('#postingbox').toggle();
    }
</script>

 

 

2. Input 값 가져오기

• $('#id').val() 을 통해 값을 가져온다.
• html 코드 원하는 부분에 ${image} 와 같이 값을 동적으로 설정
• $('#id').append() 을 통해 원하는 영역에 html 코드 추가

function makeCard() {
    let image = $('#image').val();
    let title = $('#title').val();
    let content = $('#content').val();
    let date = $('#date').val();

    let temp_html = `
    <div class="col">
      <div class="card h-100">
        <img
          src="${image}"
          class="card-img-top"
          alt="..."
        />
        <div class="card-body">
          <h5 class="card-title">${title}</h5>
          <p class="card-text">${content}</p>
        </div>
        <div class="card-footer">
          <small class="text-body-secondary">${date}</small>
        </div>
      </div>
    </div>`;
    $('#card').append(temp_html);
  }

 

 

 

클라이언트 - 서버

API는 은행 창구와 같은 것!

 

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

• GET        
  • 통상적으로! 데이터 조회(Read)를 요청할 때
  • 예) 영화 목록 조회
• POST 
  • 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
  • 예) 회원 가입, 회원 탈퇴, 비밀번호 수정

 

GET 방식으로 데이터를 전달하는 방법

• ?  : 여기서부터 전달할 데이터가 작성된다는 의미
• & : 전달할 데이터가 더 있다는 뜻
  • 예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달

• q=아이폰(검색어)
• sourceid=chrome (브라우저 정보)
• ie=UTF-8 (인코딩 정보)

 

 

 

Fetch 시작

• JQuery import 가 필요함

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

 

 

반복문으로 구 데이터를 출력

function hey() {
    let url = 'http://spartacodingclub.shop/sparta_api/seoulair';

    fetch(url).then(res => res.json()).then(data => {
        let rows = data['RealtimeCityAir']['row'];
        rows.forEach(a => {
            let gu_name = a['MSRSTE_NM'];
            let gu_mise = a['IDEX_NM'];
            console.log(gu_name, gu_mise);
        })

    })
}

 

 

조건문으로 미세먼지 수치가 40을 넘긴 값만 빨간색으로 표시

<style>
    div.question-box {
        margin: 10px 0 20px 0;
    }
    .bad {
        color: red;
    }
</style>

<script>
        function q1() {
    fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
        $('#names-q1').empty()
                    let rows = data['RealtimeCityAir']['row']
        rows.forEach((a) => {
            let gu_name = a['MSRSTE_NM']
                            let gu_mise = a['IDEX_MVL']
                            let temp_html = ``
                            if (gu_mise > 40) {
                                temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                            } else {
                                temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                            }
            $('#names-q1').append(temp_html)
        });
      })
  }
</script>

 

 

 

Reload 될 때 마다 데이터 업데이트

버튼과 같은 특정 이벤트가 아닌 페이지가 Reload 될 때마다 이벤트를 발생시키고 싶다면?

$(document).ready(function() { ... })

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url).then(res => res.json()).then(data => {
        let temp = data['temp'];
        $('#msg').text(temp);
    })
})