html, css를 배우고
Javascript로 html을 움직임, 동적임을 가능하게끔 도와주고
Javascript로 짜여진 jQuery와 Ajax를 배웠다.
1. 나만의 jQuery에 대한 정의는
- "Javascript로 어려운걸 쉽게 만들어주는 MSG"라는 것 이다.
요리를 하다 보면 망칠 때가 많은데 MSG로 죽어가는 음식을 살려주기도 하는데 jQuery가 그 역할을 하는거 같다.
jQuery는 하나의 라이브러리이자 즉 특별한 소프트웨어 이기에 꼭 import 해야한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>생김새는
// 특정 div를 안 보이게 하기 위해 쓴 Javascript
document.getElementById("element").style.display = "none"; // 복잡한 코드
// 특정 div를 안 보이게 하기 위해 쓴 jQuery
$('#element').hide(); // 편리하고 간단 명료한 코드로 나타낼 수 있다.
$(선택자(id)).동작함수(); // 선택자는 주로, id를 가져온다.다양한 문법이 존재하는데 대표적으로,
$(document).ready() - 메소드를 사용하면 문서가 완전히 로드되었을 때 함수를 실행
$('#id').hide();, $("#id).show();" - HTML 문서를 숨기거나 표시할 수 있습니다.
$('#id').val(); - 설정한 id에서 값을 가져옵니다.
$('#id').attr(); - 메소드는 속성 값을 가져오는 데 사용
$('#id').append(); - 선택한 요소의 끝에 내용을 삽입합니다.
2. 나만의 Ajax에 대한 정의는
- "Javascript라는 언어로 소통하는 창구"라는 것 이다.
생김새는
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // console에 response 결과를 보여줌
// 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})→ Get방식으로 url에 요청해서 response 해주었다는 하나의 함수를 만듦
꼭, 확인 차 console.log() 찍어보는 버릇을 들여야 겠다.
이렇게 생겼는데 생긴거 처럼 서버랑 html과 소통하게끔 해주는 창구 역할을 한다.
Ajax의 주요 두가지 특징은 아래의 작업을 할 수 있게 해줍니다.
- 1) 페이지 새로고침 없이 서버에 요청
- 2) 서버로부터 데이터를 받고 작업을 수행
Ajax를 알게 되면서 자연스럽게 서버라는 존재를 알게 되었고
클라이언트 와 서버 사이에 연결 방식을 알게 되었다.
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
완벽하진 않지만, 배우는 입장이기에 차분히 따라가면서 추가해 나가야 겠다.
