웹개발 종합반[내일배움단] - 2주차

2주차에서는 Javascript로 서버에 데이터를 요청하고 받는 방법을 공부한다.

jQuery 시작하기

HTML의 요소들을 조작하는데 편리한 Javascript를 미리 작성해둔 라이브러리

특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드. 그렇기 때문에 "import"를 해야 사용할 수 있다.
길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있다.

javascript 코드
document.getElementById("element").style.display = "none";

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

jQuery 다뤄보기

jQuery 사용을 위해 import해야 할 코드

src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"

자주쓰는 jQuery

input 박스의 값을 가져와보기

$('#post-url').val();

div 보이기 / 숨기기

id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

input 박스의 값을 가져와보기

id 값이 post-box인 곳의 css 중 display값 찾기
$('#post-box').css('display');

태그 내 텍스트 입력하기

input box 내용 변경시
$('...').val('원하는 텍스트');

그 외 텍스트
$('...').text('원하는 텍스트');

태그 내 html 입력하기

html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">

추가할 태그를 작성해서 변수에 담고
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('...').append(temp_html);

append로 추가한다.
$('...').append(temp_html);

추가할 때는 백틱(`)을 쓰고 태그 사이에 글자를 추가할 때는 변수에 저장해서 ${}사용
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
<p class="card-text">${desc}</p>

jQuery 연습

입력 받은 값을 출력해주기

값 가져오기
$('...').val();

if문을 활용해서 값 판별
let result = $('...').val();
if(result === ''){
  }else{
  }

이메일을 입력 받아서 도메인명만 출력

값 가져오기
$('...').val();

이메일 형식이 맞는지 확인
.includes === true

도메인명 분리
.split('@')

태그 삽입

값 가져오면서 변수에 할당
let text = $('...').val();

입력값을 변수에 담기 
let temp_html = `<li>${text}</li>`)

태그 추가
$('...').append(temp_html);

입력된 태그 모두 지우기
$('...').empty()

서버-클라이언트 통신 이해

API를 활용한다. JSON형식(Key:Value로 이루어진)으로 이루어짐.
클라이언트→서버: GET 요청 이해하기

JSON과 API

JSON 은 Key:Value 로 이루어져 있다. 자료형 딕셔너리와 매우 유사한 형태다. 크롬 익스텐션 JSONView를 설치하면 좀 더 직관적으로 볼 수 있다.

서울시 미세먼지 공공API 예
RealtimeTicyAir : {
  row: [
    {
      IDEX_MVL : 00,
    }
  ]
}

API는 요청하는 타입에 따라 상호작용하는 것을 도와주는 매개체이다. 이 때 2가지 타입(GET, POST)이 존재한다.

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

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

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 의미.

Ajax 시작하기

Ajax는 jQuery를 임포트한 페이지에서만 동작한다.
Ajax 기본 골격

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

jQuery+Ajax의 조합 연습

css에 빨간 글자색이 적용되는 css를 만들어 둔 후

.bad {
  color: red;
  font-weight: bold;
}

if문을 사용. 특정 기준 충족은 정상출력. 불만족은 빨간색으로 표시되게 하기.

for (let i = 0; i < rows.length; i++) {
  let gu_name = rows[i]['MSRSTE_NM'];
  let gu_mise = rows[i]['IDEX_MVL'];
  
  let temp_html = ''
  
  if (gu_mise > 70) {
    temp_html = `만들어둔 badclass와 함께 삽입할 태그`
  }else {
    temp_html = `삽입할 태그`
  }
  
  $('...').append(temp_html);
  

jQuery 이미지 태그 src 바꾸기

로딩되면 바로 실행되는 함수

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

jQuery 이미지 변경 방법

$("#img-cat").attr("src", imgurl);