2주차에 나에게는 생소하고 익숙하지 않은 Jquery와 Ajax에 대해 배우는 주차였다.
뭘 하든지 익숙하지 않으면 어렵게 느껴지는 법이지만 기초부터 차근차근 밟고 전진하니 그렇게 막 어렵지도 않고 간단했다.
할 수록 신기한것은 간단하게 요점만 알려주고 수강생인 내가 직접해보면서 넘어가는데 눈이 금방 익히고 손쉽게 다룰 수 있게된다.
어떤 강의는 보기도 전에 직접 구글링을 해서 구현해내고 추후 답안지를 보며 내 코드와 비교를 하는데 차이라고는
지저분한 코드 vs 깔끔한 코드 이 정도였다.
아직 깔끔하게 코드를 짜는 것에 익숙하지 않지만 코드를 유심히 보며 많지는 않고.. 몇가지지만 구글링을 통해 몇가지 요령을
알게 되었다. 아직 스스로 부족함을 느끼는 것은 당연하다 생각하지만 그래도 더 많이 성장하고 싶은 욕심에 간단한 것이라도
혹여 놓치는 것이 없는지 유심히 보게되고 강의가 나를 흥미롭게 만든다.
과제를 통해 스스로 직접 무언가 만들어내는 것이 나를 더 흥미롭게 만든다.
jquery
jquery를 다루는 목적은 jQuery를 이용해 Javascript로 HTML을 쉽게 제어하기 위함이다.
사용방법에 대해 간략하게 이해하고 외우지는 않았다. 구글링하면 다 나온다.
여기서 "javascript 로딩 후 실행" 을 키워드로 구글링을 하게 됐고 알게된 사실이 하나 있다.
|
자바스크립트에는 빠른 로딩속도를 위해 자바스크립트 구문을 나중에 따로 로드할 수 있는 함수를 지원한다고 한다.
그중 대표적 속성인 window.onload 는 HTML의 모든 태그를 불러온 이후 코드 내에 onload 가 있을 경우 읽어내게 된다.
[onload 에는 크나큰 단점]
글자로만 이루어진 태그라면 상관없다. 하지만 이미지나 영상이 포함되어있을 경우
이미지, 영상의 크기가 크든 말든 두 미디어까지 모두 읽어낸 뒤의 시점이 바로 onload이다.
때문에 심각하게 느릴수밖에 없다고한다.
그래서 이에 대한 대처로 나온 것이 JQuery의 ducument.ready 이다. |
Ajax
Ajax를 이용해 서버에 데이터를 요청하고 받아보는 과정을 다루어봤다.
Client에서 보내는 요청의 Type은 크게 2가지 GET, POST가 있었다.
여기서 나는 요청 Type에 대해 더 궁금해져 구글링을 통해 알게 된 것이 있다. GET, POST만 있는 것은 아니었다.
- GET : 정보 검색, 통상적으로! 데이터 조회(Read)를 요청할 때, ex) 게시판 리스트 불러오기
- POST : 실행 / 저장, ex) 회원가입 / 로그인
- PUT : 전체 수정, ex) 회원정보 전체 수정
- DELETE : 삭제, ex) 회원정보 삭제
- PATCH : 일부 수정, ex) 회원정보 일부 수정 (Update에 가장 가깝게 쓰이고 있다)
- OPTIONS : 시스템에서 지원하는 메소드 확인
내가 만든 팬명록 페이지에 날씨 정보 추가 (날씨 API 활용)
추가된 코드
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
console.log(response)
$('#weather').text(response['temp'])
}
})
});
response로 받아온 날씨 정보 확인
이미지 첨부
'회고록' 카테고리의 다른 글
| [항해99] 1주차를 마치며 / 회고록 (0) | 2022.10.03 |
|---|