👩🏻‍💻 해당 글은 스파르타 코딩클럽 '웹개발 종합반' 강의 및 내용 정리사항을 바탕으로 개인 공부차원에서 정리 및 작성한 글입니다.

👉 수강 중인 교육과정 : 스파르타코딩클럽 [웹개발 종합반]

  

1. jQuery

1) jQuery란?

• HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!

2) jQuery와 JavaScript 차이점?

• jQuery는 javascript와 다른 소프트웨어가 아닌, 미리 작성된 javascript 코드
• 전문 개발자들이 짜둔 코드를 가져와서 사용!
• 이러한 이유로 jQuery를 사용할 때는 “임포트" 해줘야 함

3) 직관적인 jQuery

• 길고 복잡한 javascript

document.getElementById("element").style.display = "none";

• 직관적인 jQuery

$('#element').hide();

  

2. jQuery 사용해보기

1) 임포트하기

• jQuery CDN

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

• 사이에 아래를 넣기 ```html ```
• jQuery는 id 값을 통해 특정 버튼/input box/div 등을 가리키게 된다.

2) input 박스 값 가져오기

• id 설정

   <input id="url" type="email" class="form-control" placeholder="name@example.com">

• 크롬 개발자도구 콘솔창에 아래 코드 쳐보기

  • id 값이 url인 곳을 가리키고, val()로 값을 가져옴

  • 값 입력시에는 val()에 입력해주면 됨

    // val()로 값을 가져온다.
    $('#url').val();
    
    // 값 입력
    $('#url').val('값 입력');

3) div 보이기&숨기기

• id값 설정

  <div class="mypost" id="post-box">

• 숨기기

  $('#post-box').hide();

• 보이기

  $('#post-box').show();

4) 태그 내 html 입력하기

• 동적으로 html을 넣고 싶을 경우 div에 id 추가하기!

  <div class="mycards">
      <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

• 버튼 넣기 (태그붙이기)

  let temp_html = `<button>나는 버튼이다!</button>`;
  $('#cards-box').append(temp_html);

• box 감쳐두기

  • display: none;

    .mypost {
        width: 95%;
        max-width: 500px;
        margin: 20px auto 0px auto;
        padding: 20px;
        box-shadow: 0px 0px 3px 0px gray;
        
        display: none;
    }

• 내부 태그 모두 지우기

  function remove() {
        // 1. names-q3의 내부 태그를 모두 비운다.
        $('#names-q3').empty()
    }

  

3. JavaScript 더 알아보기

1) includes()함수

1) includes(searchElement)
2) includes(searchElement, fromIndex)

• 배열이 특정값을 포함하고 있는지 여부를 boolean값으로 반환
• searchElement : 검색할 값
• fromIndex : searchElement 검색을 시작할 이 배열의 위치입니다 .

2) split() 함수

변수명.split('구분의 기준이 되는 문자열');

• 기준이 되는 텍스트로 분리하여 여러개의 값을 가진 배열로 변환 후 반환
• 아래 코드는 ‘@’를 기준으로 텍스트를 분리하여 배열 형태로 출력시켜준다.

let email = 'mark@gmail.com'
let domainWithDot = email.split('@')
console.log(domainWithDot) // [ 'mark', 'gmail.com' ] 출력 

  

4. 서버-클라이언트 통신

1) JSON?

• key-value로 이루어져있음

2) GET 방식

• 데이터 조회(Read) 요청할 때
• 예) 영화 목록 조회

❓ **GET 방식으로 데이터를 전달하는 방법**

?  : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         q=아이폰                        (검색어)
         sourceid=chrome        (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)

3) POST 방식

• 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
• 예) 회원가입, 회원탈퇴, 비밀번호 수정 등
   

5. Ajax

1) Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

2) Ajax 기본 골격

$.ajax({
  type: "GET", //GET 방식으로 요청 
  url: "요청할URL",
  data: {}, 
	// 요청하면서 함께 줄 데이터(GET 요청시엔 비워 둠)
	// data: { param: 'value', param2: 'value2' },
  success: function(response){ 
	// 성공할 경우, response 값에 서버의 결과 값을 담아서 함수 실행 
	// 서버에서 준 결과를 response라는 변수에 담기
    console.log(response) // 서버에서 준 결과를 이용하여 코드 작성 
  }
})

  

6. 이미지 및 텍스트 바꾸기 (태그 이용)

1) 함수 삽입

function q1() {
        $.ajax({
            type: "GET", //GET 방식으로 요청 
            url: "url",
            data: {}, 
            success: function(response){ 
              let image = response['url'];
              let msg = response['msg'];
							
							// 해당 id(img, text)가 바뀜 
              $("#img").attr("src", image);
              $("#text").text(msg);
            }
          })
      }

  

7. JavaScript 로딩 후 실행

$(document).ready(function(){
	alert('로딩 완료!')
});