[스파르타코딩클럽/웹개발 종합반] 4일차. 2-3 ~ 2-10 강의 (jQuery, Ajax, API)
2-3. JQuery 시작하기
JQuery란? 미리 작성된 자바스크립트 코드(라이브러리).
사용하기 전에 맨 위에 Import를 해야함.
자바스크립트로 길고 복잡하게 써야 하는 것을 jQuery로 보다 직관적으로 쓸 수 있음.
2-4. JQuery 다뤄보기
제이쿼리 임포트 방법 :
https://www.w3schools.com/jquery/jquery_get_started.asp - 구글 CDN 복사 -
<head> 안 <title> 밑에 붙여넣기
부트스트랩 템플릿으로 시작하면 제이쿼리가 이미 포함됨.
1. input 박스의 값을 가져와보기
$('#post-url').val(); //id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
2. div 보이기 / 숨기기
$('#post-box').hide(); //id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
(=css의 display 값을 none으로 바꾼다.)
$('#post-box').show(); //show()로 보이게 한다.
(=css의 display 값을 block으로 바꾼다.)
3. css의 값 가져와보기
$('#post-box').css('display');
4. 태그 내 텍스트 입력하기
$('#btn-posting-box').text('포스팅 박스 닫기'); // id 값이 btn-posting-box 인 곳에 포스팅 박스 닫기 입력.
5. 태그 내 html 입력하기
<div> 내에 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 버튼 추가)
html을 넣고 싶은 태그에 id값(ex. cards-box)을 줌 -
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);
html을 감쌀때는 backtick(`)으로 감싸야 함.
backtick을 사용하면 문자 중간에 Javascript 변수(${변수이름})를 삽입할 수 있음.
2-5. JQuery 적용하기(나홀로메모장)
display: none; //css에 작성. 화면에 안보이게함.
2-6. Quiz_JQuery 연습하기
<button onclick="q1()">클릭</button> //클릭이라는 버튼을 클릭하면 q1함수 실행
$("#아이디이름").val(); //해당 아이디의 입력값을 가져옴
조건 == " " //조건이 빈칸
.includes("어떤값") //어떤 값이 있으면 true, 아니면 false 출력
.split("어떤값") //어떤 값을 기준으로 문자열을 나눔
let temp_html = `<li>${변수}</li>` //태그 만들기
$("아이디이름").append(변수) //변수를 아이디에 붙임
$("아이디이름").empty(); //아이디 내부 태그를 모두 비움
2-7. 서버-클라이언트 통신 이해하기
API: 서버에서 클라이언트한테 여기로 요청해라고 열어놓은 창구. 은행창구와 비슷함.
JSON: 서버가 데이터를 클라이언트한테 내려줄 때의 포맷.
Key:Value로 이루어져 있음. 자료형 딕셔너리와 유사.
JSONView 다운로드 링크 https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd/related?hl=ko
JSONView가 JSON을 더 이쁘게 보여줌.
클라이언트가 요청 할 때 타입이 존재함.
GET: 통상적으로! 데이터 조회(Read)를 요청할 때. 예) 영화 목록 조회
POST: 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때.
예) 회원가입, 회원탈퇴, 비밀번호 수정
GET요청: 브라우저에 엔터를 치는 행위자체
URL= https://서버주소/창구이름?고객이 가져가는 데이터&데이터 더 추가
2-8. Ajax 시작하기
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
function 내에 기본골격 복붙하기.
Ajax 기본골격:
$.ajax({
type: "GET",
url: "여기에URL을입력", //API주소
data: {}, //POST에서 쓰는것
success: function(response){ //서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}
})
2-9. Ajax 함께 연습하기
폰트색은 css로.
2-10. Quiz_Ajax 연습하기(1)
파이참에서 작성한 괄호를 클릭하면 해당 괄호의 짝을 보여줌.
$("#names-q1").empty(); //업데이트를 클릭 할 때 이전 내용을 삭제