1. 2주차 회고
이번 주차에서는 배워본적이 없는 JQuery와 Ajax에 대해서 학습해서 재미있었고 흥미로웠다.
2. JQuery
1) jQuery란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것으로 라이브러리이다.
- Javascript로도 모든 기능을 구현할 수 있지만, 코드가 복잡하고 브라우저간 호환성 문제로 등장하게 되었다.
2) jQuery 사용
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>위 코드를 임포트하여 jQuery를 사용가능하다.
jQuery에서는 id, class를 통해 특정 버튼/인풋박스/div/.. 등을 선택자로 가리키게 된다.
- input 박스의 값 가져오기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');- div 보이기 / 숨기기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 콘솔을 통해 입력 가능!');- html에 tag 넣기 / 모든 항목 지우기
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);
$('#cards-box').empty();
// 해당 선택자의 자식들 모두 삭제3. 서버-클라이언트 통신
1) 서버 -> 클라이언트 : "JSON"
- JSON이란 JavaScript Object Notation의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
- Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
- JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
- 데이터를 나타낼 수 있는 방법 중 대표적인 것이 XML이고 그 다음으로 많이 사용되는 것이 아마도 JSON일 것이다.
- 형태
JSON은 Key:Value로 이루어져 있다. 자료형 Dictionary와 아주 유사하다.
2) 클라이언트 -> 서버 : GET, POST
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
ex) naver.com/code?id=value&movie
? : 뒤로 전달할 데이터
& : 추가적인 전달할 데이터
- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
4. Ajax
Ajax는 jQuery를 임포트한 페이지에서만 동작이 가능하다.
- Ajax 기본 골격
$.ajax({
type: "GET", // GET 방식으로 요청
url: "여기에URL을입력",
data: {}, // 요청하면서 함꼐 줄 데이터 (GET 요청시엔 비워두기)
success: function(response){ // 서버에서 준 결과를 response 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성해 사용한다.
}
})POST 요청은 data:{}에 넣어서 데이터를 가져간다.
1) 간단한 Ajax 사용
$.ajax({
type: "GET",
url: "API URL",
data: {},
success: function (response) {
let msg = response["msg"];
let img = response["url"];
// let temp_html = `<div class="content">
// <img id="img-rtan" width="300" src="${img}"/>
// <h1 id="text-rtan">${msg}</h1>
// </div>`
//
// $('.question-box').append(temp_html);
$('#img-rtan').attr('src', img);
$('#text-rtan').text(msg);
}
})주석에서의 코드보다 attr(해당 선택자가 있는 태그의 속성), text(태그 내의 텍스트)를 사용해서 더 간결히 작성 가능!
2) 페이지 로딩 후 바로 실행
$(document).ready(function(){
listing();
});
function listing() {
console.log('화면 로딩 후 잘 실행되었습니다');
}ready(function(){})을 통해서 로딩 후 바로 실행할 수 있다.
참고
https://hdlee.dev