Week 2 / JQuery, Ajax 기초와 다뤄보기

예대출신의 코딩 도전기 2주차

공부하며 정리한 내용입니다. 틀린 사항이 있으면 덧글로 알려주시면 감사하겠습니다.

1)JQuery 시작하기

1.1)jQuery란?

• HTML요소들을 조작하는, 편리한 JavaScript를 미리 작성해 모아둔 라이브러리. (마치 부트스트랩처럼)
• Import하여 사용해야함. Google이 호스트하는 jQuery CDN을 사용해 임포트 가능.

1.2)Import 방식 :

https://www.w3schools.com/jquery/jquery_get_started.asp 이 링크를 참고. (Download방식과 CDN 방식을 둘 다 보여준다)

Bootstrap을 이미 임포트한 상태면, Bootstrap에 jQuery가 포함되어 있어서 또다시 임포트할 필요 없다.

2)jQuery 다루기

CSS와 같이 jQuery도 대상을 가리켜야 조작할 수 있다.

• CSS → 선택자로 Class 사용 (제어시 ".class값")
• jQuery →선택자로 id 값을 사용해 특정 버튼/인풋박스/div/...등을 가리키게 된다. (제어시 "#id값"을 사용)

Class 와 id의 차이점
class는 하나의 HTML 문서에서 중복해서 사용할 수 있다.
id는 한 페이지의 고유하게 하나만 사용 가능. 하나의 태그에만 사용할 수 있다. 

 

jQuery에 정말 많은 기능이 있지만 외우는 식으로 학습 X → 눈과 손으로 익히고 필요한 기능은 구글링!!

 

2.1) 자주 쓰는 jQuery

크롬 개발자도구 콘솔창에서 입력해보며 진행하였다.

1. input 박스의 값 불러오기
   • <input>태그에 id를 지정해준 후,
   • $('#id값').val();
2. div보이기 / 숨기기
   • $('#id값').show();
   • $('#id값').hide();
3. css의 값 가져와보기 (display값 불러오는 메소드)
   • .display();
4. 태그 내 텍스트 입력하기
   • .text(원하는 텍스트 입력);
   • input 박스에서 .val(); 에 값 입력하는 것과 다름
5. 태그 내 html 입력하기 (백틱 `의 등장)
   • <div>~</div> 태그 사이에 동적으로 html을 넣고 싶을 때
   • html을 넣고 싶은 태그에 id값을 준다

   let temp_html = `<button>버튼을 추가해보기</button>` //작은 따옴표('')아님, 백틱을 쓴것임
   $('#id값').append(temp_html)
   
   //temp_html은 변수임으로 적절한 이름 지정할것
   //``사이에 아예 html에 있는 다른 요소를 (ex.만들어둔 카드) 넣어주면 그런 요소도 추가 가능하다. 당연히.​

 

자바스크립트에서 백틱(`)의 사용법

function q3() {
            let txt = $('#input-q3').val();
            let q3_txt = `<li>${txt}</li>`;
            $('#names-q3').append(q3_txt);

//왜 txt를 불러올 떄 ${txt}를 쓰는지 달러${}를 안쓰면 그냥 string으로 읽히는 이유?

위와 같은 궁금증에서 더 찾아본 결과

자바스크립트에서 ES2015이후 새로운 문자열 표기법이 생겼는데 그게 바로 백틱(`)을 사용하는 것이라고 한다.

``과 변수는 ${}에 넣어서 편하고 직관적인 문자열을 입력할 수 있다.

 

3)서버-클라이언트 통신 이해하기

JSON이란?

• JavaScrip Object Notation의 축약어, 데이어를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식(JS 문법과 유사하지만 문법이 아닌 그저 텍스트 형식)
• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아 최근 XML을 대체해서 데이터 전송 등에 많이 사용된다.
• Javascript에서 객체를 만들 때 사용하는 표현식을 의미

JSON특징

• 서버 -> 클라이언트 교류에서 많이 사용된다.
• JSON은 Key:Value로 이루어져있다. Dictionary 자료형과 흡사

출처 : https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

JSON 예시 - 서울시 미세먼지 OpenAPI
크롬 익스텐션 JSONView를 설치하면 편하게 볼 수 있다.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

클라이언트 to 서버 : GET 요청 이해하기

• GET : 통상적으로 데이터 조회(READ)를 요청할 때 (e.g. 상품 목록 조회)
• POST : 통상적으로 데이터의 생성(Create), 변경(Update), 삭제(Delete) 요청 시. (e.g. 회원가입, 회원탈퇴, 비밀번호 수정)
•  

4) Ajax 시작하기

Ajax란?

• 자바스크립트의 라이브러리 중 하나, Asynchronous Javascript And Xml (비동기식 자바스크립트와 xml)의 약자.
• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고 페이지 일부만을 위한 데이터를 로드하는 기법.
• Ajax라는 네트워크 기술을 이용해 클라이언트 -> 서버로 데이터를 요청하고 그 결과를 받을 수 있다.

출처 : https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

 

#참고# Ajax는 jQuery를 임포트한 페이지에서만 동작 가능하다.

 

Ajax 기본 골격 코드와 해설

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

• type : "GET" -> GET 방식으로 데이터 요청
• url : 요청할 url
• data: 요청하면서 함께 줄 데이터(GET 요청시엔 비워둔다
• success : 성공하면, 서버에서 준 결과를 response라는 변수에 담아서 함수를 실행한다.

 

Tip. 페이지 로딩 후 바로 Ajax 호출하기

$(document).ready(function(){
	alert('다 로딩됐다!')
});

 

2주차 개발일지 마무리하며

JS를 다루는 것을 처음 해보니 굉장히 Challenging하지만 재미있다. JSON이나 Ajax의 동작 방법에 대해 배웠지만 그 개념에 대한 이해나 필요성에 대해 이해하는 것은 시간을 필요로 했다. 수업 자료 외에 기본 지식은 구글링하면서 계속 쌓는 수 밖에 없는 것 같다.

 

내 손이 정말 오타를 많이 낸다. 대부분 오타에서 오는 에러 때문에 시간을 많이 썼다.