제이쿼리(jQuery)란

제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다.

제이쿼리의 특장점

웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다.

거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다.

네트워크, 애니메이션 등 다양한 기능을 제공합니다.

공식 웹사이트(www.jquery.com)와 수많은 레퍼런스를 통해 쉽게 접근 가능합니다.

ex) javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";
jQuery로 보다 직관적으로 쓸 수 있다.
$('#element').hide();

jQuery 사용하기

jQuery CDN 부분을 참고해서 임포트

jQuery CDN : https://www.w3schools.com/jquery/jquery_get_started.asp

head 와 사이에 /head 코드를 입력한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery를 사용하는 방법

jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
css에서는 선택자로 class를 사용한것 처럼 id값을 통해 특정부분을 가리킨다.

jQuery + Javascript의 조합을 연습

jQuery 연습하고 가기!

<!-- JQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<style type="text/css">
    div.question-box {
        margin: 10px 0 20px 0;
    }
</style>

<script>
    function q1() {
        // 1. input-q1의 입력값을 가져온다.
        let value = $('#input-q1').val();
        // 2. 만약 입력값이 빈칸이면 if(입력값=='')
        if (value == '') {
            // 3. alert('입력하세요!') 띄우기
            alert('입력하세요!');
        } else {
            // 4. alert(입력값) 띄우기
            alert(value);
        }
    }

    function q2() {
        // 1. input-q2 값을 가져온다.
        let email = $('#input-q2').val();
        // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
        if (email.includes('@')) {
            // 3. [email protected] -> gmail 만 추출해서
            // 4. alert(도메인 값);으로 띄우기
            let domainWithDot = email.split('@')[1];
            let onlyDomain = domainWithDot.split('.')[0];
            alert(onlyDomain);
        } else {
            // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
            alert('이메일이 아닙니다.');
        }
    }

    function q3() {
        // 1. input-q3 값을 가져온다.
        let newName = $('#input-q3').val();
        if (newName == '') {
            alert('이름을 입력하세요');
            return;
        }
        // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
        let temp_html = `<li>${newName}</li>`;
        // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        $('#names-q3').append(temp_html);
    }

    function q3_remove() {
        // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        $('#names-q3').empty();
    }

</script>

서버-클라이언트 통신 이해

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
JSON은, Key:Value로 이루어져 있는데. 자료형 Dictionary와 유사한 구조입니다.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

GET 방식과 POST방식의 장단점 및 차이점

Select 기능을 원한다면 GET 메서드, Update 기능을 원한다면 POST 메서드
검색 결과 등 고정적인 주소 및 링크 주소로 사용될 수 있다면 GET 메서드를 사용
정보를 담을 URL길이(최대 2048자)는 한계가 있기 때문에
이를 해결하고 싶다면 POST 메소드를 사용한다.
POST 메서드를 쓰면 정보를 숨길 수 있다.
GET은 캐시가 남아있어 전송 속도가 빠르고 POST는 캐시가 남지 않아
보안적인 면에서 유리하다.
GET은 브라우저 히스토리에 파라미터가 남고 POST는 저장되지 않는다.

Ajax란?

자바스크립트를 이용해서 비동기식으로 JSON을 사용하여 서버와 통신하는 방식이다.
비동기식이란 여러가지 일이 동시적으로 발생한다는 뜻으로,
서버와 통신하는 동안 다른 작업을 할 수 있다

Ajax의 동작방식

브라우저는 서버에 정보를 요청, 서버는 응답으로 데이터를 전달한다.
(브라우저는 Ajax요청을 담당하는 XMLHttpRequest 라는 객체를 구현)

Ajax 연습하기

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <style type="text/css">
      div.question-box {
        margin: 10px 0 20px 0;
      }
      div.question-box > div {
        margin-top: 30px;
      }
      
    </style>

    <script>
      function q1() {
        $.ajax({
          type: "GET",
          url: "http://spartacodingclub.shop/sparta_api/rtan",
          data: {},
          success: function(response){
              let imgurl = response['url'];
              $("#img-rtan").attr("src", imgurl);

              let msg = response['msg'];
              $("#text-rtan").text(msg);
            }
          })
      }
    </script>

  </head>
  <body>
    <h1>JQuery+Ajax의 조합을 연습하자!</h1>

    <hr/>

    <div class="question-box">
      <h2>3. 르탄이 API를 이용하기!</h2>
      <p>아래를 르탄이 사진으로 바꿔주세요</p>
      <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
      <button onclick="q1()">르탄이 나와</button>
      <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
      </div>
    </div>
  </body>
</html>```

Author And Source

이 문제에 관하여([2] jQuery, Ajax에 대한 이해), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dbd02017/2-jQuery-서버-클라이언트-통신-Ajax에-대한-이해

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[2] jQuery, Ajax에 대한 이해