1. jQuery
jQuery는 HTML 사용자가 HTML을 조금 더 잘 제어하기 위한 방법 중 하나로, 자바스크립트(Javascript)를 더 편하게 사용할 수 있게 하는 자바스크립트 함수의 모음(라이브러리)입니다. jQuery를 통해 다음과 같이 기존의 긴 자바스크립트 명령을 직관적인 함수로 사용할 수 있습니다.
document.getElementById('element').style.display = "none";위 명령은 순수하게 자바스크립트 언어로 작성한 명령이고, 해당 id(예시에서는 'element')의 태그를 숨긴다는 명령입니다.
$('#element').hide()맨 위의 명령과 같은 명령이며, 보다 직관적이고 편리한(짧은) 것을 알 수 있습니다.
또, 알 수 있는 것은 자바스크립트 부분인 <script></script> 내에서는 태그의 class로 호출하는 CSS의 <style></style>과는 다르게 id로 호출한다는 점을 알 수 있습니다. 그리고 id를 호출할 때는 $('#id ')와 같은 형태로 호출한 후, 마침표(.)로 사용할 함수를 이어서 작성한다는 점도 알 수 있습니다.
이렇게 자바스크립트를 더 편리하게 사용할 수 있게 해주는 jQuery는 HTML의 <head></head> 내에서 먼저 임포르(import)를 해야 사용할 수 있습니다. 임포트 하는 방법은 다음 코드를 HTML의 head 내에 작성하면 끝이며, W3schools에서도 확인할 수 있습니다.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>W3schools의 jQuery 표준: https://www.w3schools.com/jquery/
jQuery Tutorial
jQuery Tutorial Examples in Each Chapter With our online editor, you can edit the code, and click on a button to view the result. Example $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); Try it Yourself » Click
www.w3schools.com
2. Ajax
Asynchronous Javascript And XML(비동기식 자바스크립트 XML)의 약자로, HTML만으로 수행하기 어렵고 다양한 작업을 웹페이지에서 구현해 이용자가 웹페이지와 자유롭게 상호 작용할 수 있도록 하는 기술입니다. 쉽게 표현하면 자바스크립트를 통해 페이지 전환 없이 서버에서 값, 데이터를 받을 수 있는 방법입니다.
Ajax는 주로 API(Application Programming Interface)에서 값을 받아오며, 이 API는 서버와 데이터의 은행 창구 같은 것이라고 생각하면 됩니다. 클라이언트가 원하는 데이터와 데이터 타입(GET, POST가 있음)을 요청하면 해당하는 데이터를 주는 역할을 합니다. 이때 제공하는 데이터의 형식에는 XML, JSON, CSV 등이 존재하며, 요청하는 데이터의 타입에는 대표적으로 GET과 POST가 있는데 이에 대한 간략한 설명은 다음과 같습니다.
| 형식 | 설명 | 특징 |
| XML | HTML처럼 태그 형식으로 표현한 데이터 | 용량이 높음 |
| JSON | Ajax를 사용할 때 거의 표준으로 이용되는 데이터 형식이며, 딕셔너리 형식처럼 키-값 형태로 구성된 데이터 | 자바스크립트, Ajax에서 거의 표준으로 사용됨 |
| CSV | 쉼표를 기준으로 항목을 구분하여 저장한 데이터 | 빅데이터, 머신러닝 등에서 종종 사용됨 |
| 타입 | 설명 |
| GET | 통상적으로 데이터를 '조회'할 때 쓰는 타입 ex) 영화 목록 조회 |
| POST | 통상적으로 데이터를 '생성', '변경', '삭제' 등을 수행할 때 쓰는 타입 ex) 회원 가입, 정보 수정, 회원 탈퇴 |
이런 Ajax를 통해 데이터를 요청하고 받아오는 경우 필수적인 문법은 다음과 같이 작성할 수 있습니다.
$.ajax({
type: "", // GET 또는 POST
url: "", // 데이터를 요청할 API, url
data: {},
success: function () {
// 요청, 통신이 성공했을 때 실행할 함수
}
})
'지극히 개인적인 공부 노트 > 웹(Web)' 카테고리의 다른 글
| [Web] 수정한 CSS 파일이 HTML에 적용되지 않을 때 (0) | 2021.07.23 |
|---|---|
| [Web] AWS 가상 서버 이용하기(2) - 가상 컴퓨터에서 서버 파일 실행하기 (0) | 2021.07.02 |
| [Web] AWS 가상 서버 이용하기(1) - AWS 인스턴스 생성하기 (0) | 2021.07.01 |
| [Web] API 설계 시 데이터 타입 POST, GET 사용법(feat. CRUD, Flask) (0) | 2021.06.29 |
| [Web] 웹 개발의 0단계: HTML, CSS, JS(Javascript) 간단 요약 + 유용한 CSS 사이트 (0) | 2021.06.22 |