사전학습 1주차 - jQuery / 서버 통신 / API / Ajax

- jQuery

웹페이지 상에서 요소(Element)를 쉽게 찾고 조작하게 도와주는 자바스크립트 라이브러리

다양한 브라우저에서 작동하는 API를 사용하여 HTML 문서 순회 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 훨씬 더 간단하게 만드는데 사용됨

바닐라 js와 리액트로 인해 jQuery 인기가 식고 있음

 

다운로드, NPM or Yarn, CDN 총 3가지 방법으로 불러올 수 있음

https://releases.jquery.com/

jQuery CDN

 

- jQuery Indicator

jQuery는 기본적으로 $(" ")로 문법이 구성됨

전체 선택	$("*")
id 속성 이용	$("#id명")
class 속성 이용	$(".class명")
element명 이용	$("element명")

 

Ref) jQuery 기본문법(선택자 및 메소드 모음)

https://soft91.tistory.com/9

 

- 게시판 클릭 이벤트 jQuery 적용

지정하는 속성값을 가진 태그보다 스크립트가 먼저 작성되는 경우 꼭 $(document).ready 구문 안에서 처리를 해야함

 

- jQuery를 활용한 태그 조작

속성값 변경

this -> 나 자신을 가리키는 indicator

addClass, removeClass

attr -> 선택한 요소에 속성값을 가지고 옴

여러개 태그가 있는 경우 아래와 같은 반복문으로 가져올 수 있음

function clickPost(postid){
                alert(postid + "게시글을 클릭했습니다.");
            }
            $(document).ready(function () {
                $(".fastcampus").click(function () {
                    let id = $(this).attr("id");
                    clickPost(id);
                })
            });

 

- 서버와의 통신(Ajax)

Ajax(Asynchronous JavaScript and XML)

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

웹 페이지의 전체를 리로딩하지 않고, 일부분만을 갱신할 수 있게 함

Ajax 통신을 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시 가능

즉, javascript를 통해서 서버에 데이터를 요청하는 통신을 의미함

 

<장점>

1. 웹 페이지 전체 리로딩이 아닌 일부분만 갱신 가능

2. 웹 페이지가 로드된 후 서버로 데이터 요청 보내기 가능

3. 웹 페이지가 로드된 후 서버로부터 데이터 받을 수 있음

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있음

 

<단점>

1, 클라이언트 풀링 방식 사용(클라이언트가 서버에 데이터를 요청)으로, 서버 푸시 방식의 실시간 서비스는 불가능

2. Binary 데이터를 보내거나 받을 수 없음

3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청 보낼 수 없음

4. 클라이언트의 PC로 Ajax 요청 보낼 수 없음

 

Ref)

http://www.tcpschool.com/ajax/ajax_intro_basic

 

 

- API(Application Programming Interface)

응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 의미함

그냥 정의만 봐서는 API가 뭔지 감이 안잡힘 그래서 일상에서 자주보이는 API를 예시로 들고자 함

 

기상청 API를 검색해보면 다음과 같은 서비스가 제공되고 있는 것을 알 수 있음

기상청 Open-API

어떤 제공되는 서비스를 내가 활용할 수 있도록 특정 자료포멧으로 제공되는 것이 흔히 우리가 말하는 API로 대부분 JSON과 XML 포멧으로 되어 있음

 

API는 공개(open)와 비공개(closed) 둘로 나뉘어지는데 open API는 누구나 쉽게 접근하여 정보를 공유할 수 있게 만들어진 일종의 규격이고 closed API는 특정 권한이 있는 대상에게만 정보를 제공하기 위해 만들어진 규격으로 이해하면 됨

 

다음 링크는 JSON 포멧으로 API를 테스트할 수 있는 사이트

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

- Ajax 에서 샘플 api 사용 예시

<script>
            let url = "https://jsonplaceholder.typicode.com/posts";
            $.get(url).then(function (data) {
                let content = "";
                for (let i=0; i<data.length; i++) {
                    content = $("#titles").html() + data[i].title + "<br>";
                    $("#titles").html(content);
                }
            });
</script>

 

$.get() - 전달받은 주소로 GET 방식의 HTTP 요청을 전송

then - 특정 결과 값이 나온다면 then 구문으로 넘어감 (위에 코드에서는 HTTP 요청 전송시)