2주차_서버와 통신하기

jQuery 시작 

jQuery는 빠르고 작고 기능이 풍부한 JavaScript 라이브러리

다양한 브라우저에서 작동하는 사용하기 쉬운 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만듬

 

라이브러리란?

다 직접 개발하는것이 효율적이지 않으니 전세계의 많은 개발자들이 써보라고 공개를 해놓은 코드

 

jQuery 공식홈페이지: https://jquery.com/

jQuery

jQuery CDN: https://releases.jquery.com/

 

jQuery CDN에서 minified는 전부 다 들어가 있는 버전이고 slim은 ajax 및 효과 모듈을 포함하는 jQuery의 일반 버전과 함께 이러한 모듈을 제외한 버전

 

예시

($)기호는 jQuery에서 사용하는 문법같은 것. 태그를 가리키거나 기능을 사용할때마다 사용

(#)은 id 속성값을 의미.

- 코드를 작성하다보면 ID속성 앞에 #을 누락하는 경우가 많음으로 주의해야함

(.)은 가지고 있다는 뜻

 

$("#test").text("안녕하세요");는

id인 속성값이 test인 태그가 가지고 있는 text라는 함수(동작을 만들어 내주는 기능), text안에다가 문자열을 넣으면 결국에 그 안에 text가 변경 되는 것

 

예시2

text 안에 어떤 값을 넣으면 값을 넣어주고 아무것도 넣지 않으면 안에 어떤 텍스트가 있는지를 알려줌

---

게시판 클릭 이벤트에 jQuery 적용하기

json sample api: https://jsonplaceholder.typicode.com/

bt2.html

0.00MB

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"/>
<link rel="stylesheet" href="./bt2.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>

부드스트랩이 jQuery를 사용하고 있음

$("#post-3").click(function () {
 	 clickPost(3);
});

-이벤트 처리 부분에 괄호가 많기 때문에 주의해서 작성해야 함

위 코드를 실행하여 클릭했지만 실행이 안됨

$(document).ready(function () {
	$("#post-3").click(function () {
 		 clickPost(3);
	});
});

$("#post-3").click(function () {
   clickPost(3); });가 실행이 안된 이유는 모든 문서는 위에서부터 해석됨.

post-3를 만났을때 post-3는 밑에서 사용하기 때문에 현재 무엇인지 알 수가 없음

그래서 위쪽 코드만 했을때는 post-3를 못찾아서 실행이 되지 않는 것

밑에 코드에 추가한 것 코드는 문서가 준비 다 되면 이것을 실행해달라고 조치를 취하는 것

- 지정하는 속성값을 가진 태그보다 스크립트가 먼저 작성되는 경우 꼭 $(document).ready 안에서 처리를 해야 함.

---

jQuery를 활용한 태그 조작

$("#post-3").click(function () {
  $(this).addClass("fastcampus");
  clickPost(3);
  $(this).removeClass("fastcampus");
});

클릭 하지 않은 상태

클릭하고 있는 상태

함수 안에 this를 사용했을때 나 자신을 가리키게 됨

즉 함수 안에 나 자신을 이용할때 this 사용

$(".fastcampus").click(function () {
  let id = $(this).attr("id");
  clickPost(id);
});

(.클래스이름)을 하게 되면 해당 클래스 속성을 가지고 있는 모든 태그를 가리킬 수 있음

변수 id에는 현재 클릭이 되는 시점에, 클릭된 태그에 id 속성 값을 할당

attr은 태그가 가진 속성값을 가지고 올때 사용하는 함수

---

서버와의 통신 이해하기

Ajex는 통신 방법중에 하나, jQuery안에 포함되어 있는 기능

액션을 할때마다 계속해서 페이지가 바뀌면 쓰는 사람이 불편함

액션을 한 후 처리가 내 화면에서만 끝나는것이 아니라 서비스를 만든사람에게 액션에 정보를 알려주어야함 

이때 화면에 보이지 않게 백그라운드에 숨어서 요청을 해야하고 화면만 바꿈(새로고침x 화면의 일부를 변경하는 것)

그래서 페이지에 접속하는 것 또는 검색을 하는 것과는 다르게 Ajex라는 방식을 통해서 통신을 해야 하는 것

---

API 이해하기

api라는 것은 데이터를 요청(가져옴, 변경 등)하는 방법

페이지로 가는 주소가 아니라 데이터로 주는 주소로 제공해주는 인터페이스 

일반적인 웹페이지는 웹페이지를 주는에 api는 데이터를 줌