항해99 사전강의 2주차 JQuery, Ajax 회고

본 내용은 항해99 & 스파르타코딩클럽에 강의 내용이 포함되어 있습니다.

문제 시 바로 삭제하겠습니다.

---

 

이번 주차에서는 JQuery와 Ajax에 대해 학습해봤다. 

JQuery는 기본 JS코드에서 많이 사용하는 코드를 더 간편하게 작성할 수 있도록 해주는 라이브러리 기능이라 생각되고, 

(본 정의 : jQuery는 빠르고 작고 기능이 풍부한 자바스크립트 라이브러리입니다. HTML 문서 통과 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 여러 브라우저에서 작동하는 사용하기 쉬운 API로 훨씬 간단하게 만듭니다. jQuery는 다재다능함과 확장성의 조합으로 수백만 명의 사람들이 자바스크립트를 작성하는 방식을 변화시켰습니다.

출처 : JQuery )

 

Ajax는 서버로부터 데이터를 가져오는 기능이라 생각된다.

(본 정의 : 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

출처 : mozilla)

 

2주차 목차 

2주차 부터는 내가 한 번도 접하지 못한 내용을 배운다는 생각에 설레(?)고 긴장했다. 하지만 받아드리는게 어렵지는 않았다(기초적인 내용 부분에서는)

 

 

 

1주차에서 JS를 짧게 배우고 넘어갔는데, 이 부분에서 "이렇게 간단하게 넘어가도 되나?'라는 의문이 들었지만 그 빈 부분을 JQuery가 채워줬다. 확실히 JS를 기반으로 작성하다보니, 받아드리기 어렵지는 않았다. 다만 빨리 배웠어야 한다는생각만 하게 됬다. 그 이유는 지금까지 연습하면서 힘들게 작성한 코드가 더 간편하게 작성할 수 있었다는 사실이였다.

 

document.getElementId('txt').style.display = "none";  //JS
// $('#txt').hide();     JQuery

난 항상 위에 코드를 사용해 작성해 왔는데, JQuery는 매우 간편하게 이를 작성할 수 있었다. 

.hide()와 같은 메서드들을 이용하여 박스를 숨기고 보이기, 추가하기 등을 연습했다.

 

 

 

Ajax를 이용하여 외부 API 정보를 가지고 표시하는 법을 학습했다. 이 방식은 GET 방식인 것 같다. 또한 데이터는 JSON을 사용했다 ( JSON은 key:Value로 이루어져있다.)

서버와 통신하는 방법을 강의에서는 GET, POST만 설명했다. 궁금해서 더 찾아보니 PUT, DELETE, HEAD, OPTIONS, PATCH, CONNECT 다양하게 많았다. 

각각의 사용 방법이나, 개념은 사용할 때 다시 공부하는게 효율적일 것 같다. 

 

        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response.temp
                    $('#temp').text(temp)
                }
            })
        });

과제로 이런 코드를 작성해 봤다. JQuery를 사용하여 document가 준비됐을 때 실행하는 함수에서 Ajax를 통해 서울시 기온을 가져와 표시할 수 있었다. 

빈 객체로 되어있는 data 부분은 POST 요청으로 API를 요청하면서 함꼐 줄 데이터를 입력한다.

 

Ajax를 통해 따릉이 API, 미세먼지 API 등을 받아와 처리하는 연습을 했다. 

 

 

 

 

2주차 숙제 결과물

 

 

1주차에 작성한 홈페이지 제목 하단에 변경되는 서울 기온 데이터를 가져와 표시했다.