2주차

1. jQuery

CSS - 부트스트랩이 있다면 Javascript -라이브러리 jQuery

HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 것

 

항상 임포트 후 사용한다

jQuery 임포트하기 (부트스트랩 사용 시 이미 임포트 되어 있음)

https://www.w3schools.com/jquery/jquery_get_started.asp

 

CSS에서 class를 선택자로 사용했던 것처럼  jQuery는 id 값을 통해 조작하고자 하는 것을 가리킴

// id 값이 url인 곳에서 값 가져오기
$('#url').val();
// id 값이 url인 곳에 값 입력하기
$('#url').val('입력');

// id 값이 post-box인 곳을 숨김
$('#post-box').hide();
// id 값이 post-box인 곳 보이게 함
$('#post-box').show();

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

//includes와 split 사용
if ( txt.includes('@') == true) {
	alert(txt.split('@')[1].split('.')[0])
} else {
	alert('이메일이 아닙니다.')
}

2.  서버-클라이언트 통신 이해하기

크롬 익스텐션 JSONView 설치해서 JSON 쉽게 확인하기

JSON은 Key:Value로 이루어져 있다.

프론트엔드 개발자와 백엔드 개발자가 정해둔 약속대로 데이터 조회 & 전달!

3.  Ajax

Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

 

$.ajax 코드

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

조건에 따라 내용 다르게 보여주기

let temp_html = `` // temp_html 빈 상태로 만들어두기 ``

if (gu_mise > 80) {
	temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` // 미세먼지 수치 높을 경우 class "bad"
} else {
	temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}

$('#names-q1').append(temp_html) // temp_html 내용 추가

변경사항 반영 시점

// 클릭할 때 반영
<button onclick="q1()">업데이트</button>

// 새로고침할 때 반영
$(document).ready(function () {
	$.ajax({
		type: "GET",
		url: " ",
		data: {},
		success: function (response) {
		}
	})
});

이미지와 텍스트 변경하기

// img-rtan에 해당되는 이미지의 소스를 url로 변경하기
$('#img-rtan').attr('src',url)

// text-rtan에 해당되는 텍스트를 msg로 변경하기
$('#text-rtan').text(msg)

2주차 과제는 1주차 팬명록에 현재 기온 추가하기! 

* 2주차를 마치며 *

1주차와 비슷하지만 조금씩 1주차 때 배운 태그들과 2주차에서 배운 내용이 뒤섞이면서 헷갈리기 시작한다. 분명 공부를 더 하고 나면 헷갈릴 내용이 아닐 것 같은데 이상하게 계속 헷갈린다. 여기에 쓰는 게 맞나? 형식이 이거였나? 꽤 자주 이러는 중,, 복습하면서 확실히 내것으로 만들어야겠다.

 

특히 이번 과제를 할 때 분명히 쉬운 내용이고 배운 내용이라는 것을 알면서도 어떤 코드를 써야 하는지 초반에 헤맸다. 다행히 차근차근 직전에 배운 내용을 따라가면서 해결했다. 나중에 여러 내용들을 적재적소에 활용할 수 있어야 할텐데 각 분야별로 내용을 구조화하는 습관이 필요할 것 같다. 

 

그리고 자꾸 일요일 저녁에 모든 것을 마무리하는 나,,,^^ 이번 주는 미리미리 들어서 진도를 앞질러봐야겠다!