2주차 수업은 jQuery와 Ajax에 익숙해지는 시간을 가졌다. Ajax 등 듣기는 많이 들었지만 한번도 사용해보지 않았던 것들을 활용해보는 시간을 가졌다.
👉jQuery란?
-html의 요소들을 조작하는 편리한 javascript를 미리 작성해둔 라이브러리이다.
So import를 해줘야한다.
-Javascript를 이용하면 document.getElementById("element").style.display = "none";
이렇게 길게 작성해야할 코드가, jQuery를 사용하는 경우 $('#element').hide(); 처럼 직관적이고 짧아질 수 있다.
jQuery 시용하기 위해서는
"<"script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script">"
코드를 import해줘야한다.
1.jQuery 사용방법
css에서 선택자로 class를 사용했듯이, jQuery에서 id 값을 통해 특정 태그 값을 가리키게 된다.
2.자주 사용되는 jQuery
1) input 박스 값 가져오기
input박스의 id 값을 가리키고, val()로 값을 가져옴 (ex. $('#post-url').val();)
2) div 숨기기 , 보이기
숨기기: div 그룹의 id 값을 가리키고, hide();(=css의 display 값을 none으로 바꾸는 작업)(ex.('#post-box').hide(); ) 보이기: 그룹의 id 값을 가리키고, show();(=css의 display 값을 block으로 바꾸는 작업)(ex.('#post-box').hide();
)
3) css의 값 가져오기
ex.display값 가져오기 : $('#post-box').css('display');
4) 태그 내 텍스트 입력하기
1)input box의 경우 : $('#post-url').val('텍스트 입력');
2)태그의 텍스트 바꾸기 : $('#btn-posting-box').text('포스팅 박스 닫기');
5) 태그 내 html 입력하기
<div id="cards-box" class="card-columns">
</div>
1)div 태그 안에 버튼 넣어보기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
2)div 태그 안에 카드 넣어보기
// 주의: backtick(`)으로 감싸야 함.backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있게 됨. let img_url = 'https://www.~~~.jpg';
let link_url = 'https://naver.com/';
let title = '여기는 기사 제목';
let desc = '기사의 요약 내용...';
let comment = '여기는 코멘트';
let temp_html = `
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;$('#cards-box').append(temp_html);
3.서버-클라이언트 통신 이해하기
1)서버->클라이언트 : "JSON"이해하기
json은 딕셔너리와 유사하게 key와 value로 이루어져있음
2)클라이언트->서버: "GET요청"이해하기
API에는 타입이 존재함
그래서 클라이언트가 요청할 때에도 Get 요청과 Post요청으로 나뉜다.
🔹Get 방식: 데이터 조회(Read)를 요청할 때 사용 ex.영화 목록 조회
(cf. Post 방식: 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용 ex.회원가입, 회원탈퇴, 비밀번호 수정 나중 포스팅에서 다시 살펴봄)
🔹Get방식 데이터 전달 방법
주소 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967'에서
? : 여기부터 전달 할 데이터가 작성 됨
& : 전달할 데이터가 더 있음을 뜻함 ex.google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
4.Ajax
Ajax또한 jQuery를 임포트한 페이지에서 동작 가능함
1)기본 골격
✔ $.ajax({
type: "GET", // Get방식으로 요청
url: "여기에URL을입력",
data: {}, // 요청시 함께 줄 데이터 (Get요청시 비워둠)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 어떻게 활용할지 작성
}
})
cf. data : get 요청은 url의 ? 뒤에 붙여서 데이터를 가져감
post 요청은 Ajax 코드의 data:{}에 넣어서 데이터를 가져감
success : 성공시, response값에 서버의 결과 값을 담아 함수 실행
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response)
}
<회고>
jquery , ajax 개념에 대해서 처음으로 학습하였는데 내가 웹상에서 물건을 사거나, 회원정보 수정을 하는 등 다양하게 활용된 데이터가 어떤식으로 관리되는지 알 수 있는 시간이었다. 앞으로 다양한 데이터를 응용하며 흐름을 잘 익혀야겠다.
