JS, jQuery) 39번째 회고

유쨈미 2024. 5. 29. 22:45

1. JS에서 AJAX 처리 방법

1️⃣ 기본 Ajax 방법 (XMLHttpRequest)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
window.onload = () => {
	document.querySelector("#btn1").onclick = funcJs;
}

let xhr;

function funcJs() {
	xhr = new XMLHttpRequest();
	xhr.open('get', "js38.json", true);

	// 통신상태 확인 - 문제가 없으면 process()
	xhr.onreadystatechange = function(){
		if (xhr.readyState  === 4) {
		    if (xhr.status === 200) {
				processFunc();
			} else {
				alert("요청 실패 : " + xhr.status);
			}
		}
	}
	xhr.send(null);
}

function processFunc() {
	let data = xhr.responseText;
	//alert(data);
	let parseData = JSON.parse(data);
	
	let str = "";
	for(let i = 0; i < parseData.sangpum.length; i++) {
		str += parseData.sangpum[i].code + " " + parseData.sangpum[i].sang + "<br>";
	}
	document.querySelector("#show1").innerHTML = str;
}
</script>

</head>
<body>
<h2>* JS에서 AJAX 처리 방법 *</h2>
<button id="btn1">기본적 방법</button>
<br>

<hr>
방법 1 : <br>
<div id="show1"></div>
</body>
</html>

2️⃣ Fetch 방법

fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다.
따라서 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있다.
(Catch, Finally도 마찬가지)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
window.onload = () => {
	document.querySelector("#btn2").onclick = funcFetch;
}

let xhr;

function funcJs() {
	xhr = new XMLHttpRequest();
	xhr.open('get', "js38.json", true);

	// 통신상태 확인 - 문제가 없으면 process()
	xhr.onreadystatechange = function(){
		if (xhr.readyState  === 4) {
		    if (xhr.status === 200) {
				processFunc();
			} else {
				alert("요청 실패 : " + xhr.status);
			}
		}
	}
	xhr.send(null);
}

function funcFetch() {
	// fetch 함수는 HTTP response 객체를 래핑한 Promise 객체를 반환한다.
	// 따라서 프로미스의 후속 처리 메서드인 then을 사용하여 resolve한 객체를 전달받을 수 있다.
	const url = "js38.json";
	fetch(url, {method:"GET"}).then(response => {  // {method:"GET"} 생략 가능.
		//alert(response.status);
		if(response.status === 200) {
			return response.json();
		}else{
			console.log(`HTTP ERROR! STATUS : ${response.status}`);
		}
	}).then(jsonData => {
		//alert(jsonData);	// JSON.parse()가 된 상태
		let str = "";
		for(let i = 0; i < jsonData.sangpum.length; i++) {
			str += jsonData.sangpum[i].code + " " + jsonData.sangpum[i].sang + "<br>";
		}
		document.querySelector("#show2").innerHTML = str;
	}).catch(error => {
		console.error(error);
	});
}
</script>
</head>
<body>
<h2>* JS에서 AJAX 처리 방법 *</h2>
<button id="btn2">Fetch 방법</button>
<br>

<hr>
방법 2 : <br>
<div id="show2"></div>
</body>
</html>

3️⃣ Async/Await 방법

Async/Await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해 준다. Fetch API와 함께 사용하면 좋다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
window.onload = () => {
	document.querySelector("#btn3").onclick = funcAsync;
}

let xhr;

function funcJs() {
	xhr = new XMLHttpRequest();
	xhr.open('get', "js38.json", true);

	// 통신상태 확인 - 문제가 없으면 process()
	xhr.onreadystatechange = function(){
		if (xhr.readyState  === 4) {
		    if (xhr.status === 200) {
				processFunc();
			} else {
				alert("요청 실패 : " + xhr.status);
			}
		}
	}
	xhr.send(null);
}

async function funcAsync() {
	const url = "js38.json";
	const response = await fetch(url);
	const jsonData = await response.json(); // promise가 내부적으로 활동
	//alert(jsonData);
	
	let str = "";
	for(let i = 0; i < jsonData.sangpum.length; i++) {
		str += jsonData.sangpum[i].code + " " + jsonData.sangpum[i].sang + "<br>";
	}
	document.querySelector("#show3").innerHTML = str;
}
</script>

</head>
<body>
<h2>* JS에서 AJAX 처리 방법 *</h2>
<button id="btn3">Async 방법</button>
<br>

<hr>
방법 3 : <br>
<div id="show3"></div>
</body>
</html>

4️⃣ Axios 방법

Axios는 HTTP 요청을 쉽게 할 수 있게 도와주는 라이브러리이다.
JSON 데이터를 자동으로 변환해 주고, 브라우저와 Node.js에서 모두 사용할 수 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
window.onload = () => {
	document.querySelector("#btn4").onclick = funcAxios;
}

let xhr;

function funcJs() {
	xhr = new XMLHttpRequest();
	xhr.open('get', "js38.json", true);

	// 통신상태 확인 - 문제가 없으면 process()
	xhr.onreadystatechange = function(){
		if (xhr.readyState  === 4) {
		    if (xhr.status === 200) {
				processFunc();
			} else {
				alert("요청 실패 : " + xhr.status);
			}
		}
	}
	xhr.send(null);
}

function funcAxios() {
	// Axios : Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다.
	// alert("4");
	const url = "js38.json";
	axios.get(url).then((response) => {
		//alert(response.status);
		return response.data;
	}).then((data) => {
		//alert(data);
		let str = "";
		for(let i = 0; i < data.sangpum.length; i++) {
			str += data.sangpum[i].code + " " + data.sangpum[i].sang + "<br>";
		}
		document.querySelector("#show4").innerHTML = str;
		
	}).catch((error) => {
		console.error('오류 : ', error);
	});
}

</script>

</head>
<body>
<h2>* JS에서 AJAX 처리 방법 *</h2>
<button id="btn4">Axios 방법</button> <!-- axios : 외부 라이브러리. 실무에서 가장 많이 쓰임 -->
<br>

<hr>
방법 4 : <br>
<div id="show4"></div>
</body>
</html>

[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법

fetch 함수는 XMLHttpRequest 객체보다 최근에 나온, HTTP 요청 전송 기능을 제공하는 Web API다. 데이터를 받아오기 위해 습관처럼 쓰던 fetch에 대해 정리해보았다.

velog.io

- 출처 : eunjin

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

- 출처 : axios-http.com

[JS] Axios 라이브러리를 통한 비동기처리 방식

비동기처리 : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 처리방식

velog.io

- 출처 : unani92

[JavaScript] fetch 함수 쓰는 법, fetch 함수로 HTTP 요청하는 법

velog.io

- 출처 : eunjin

2. Axios

Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양하다. Axios는 브라우저와 Node.js에서 모두 작동하는 약속 기반의 HTTP 클라이언트이다. JSON 데이터를 자동으로 직렬화 및 역직렬화하며, 비동기식으로 HTTP 요청을 쉽게 수행할 수 있게 도와준다. Axios는 네트워크 요청을 간단하게 관리할 수 있게 해주는 다양한 기능을 제공한다.

💡 주요 기능

약속(Promise) 기반
비동기 코드 작성이 간단해지며, .then() 및 .catch()를 사용하여 요청 결과를 처리할 수 있다.
요청 및 응답 인터셉터
요청 또는 응답이 처리되기 전에 가로채서 작업을 수행할 수 있다.
자동 JSON 데이터 변환
응답 데이터를 자동으로 JSON으로 변환해 준다.
HTTP 요청 취소
필요에 따라 요청을 취소할 수 있는 기능을 제공합니다.
타임아웃 설정
요청에 대한 타임아웃을 설정할 수 있다.
동시 요청 처리
여러 요청을 동시에 처리하고, 모든 요청이 완료될 때까지 기다릴 수 있다.

💻 Kakao Open API 활용 예제 코드 (Axios CDN)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script type="text/javascript">
window.onload = () => {
	document.querySelector("#btnAPI1").onclick = funcBook1;
	document.querySelector("#btnAPI2").onclick = funcBook2;
}

let xhr;

function funcJs() {
	xhr = new XMLHttpRequest();
	xhr.open('get', "js38.json", true);

	// 통신상태 확인 - 문제가 없으면 process()
	xhr.onreadystatechange = function(){
		if (xhr.readyState  === 4) {
		    if (xhr.status === 200) {
				processFunc();
			} else {
				alert("요청 실패 : " + xhr.status);
			}
		}
	}
	xhr.send(null);
}

function funcBook1() {
	//alert("7");
	const REST_API_KEY = "cc5cf68ea1e32d33a7edbcfa51e16974";
	const bookName = document.querySelector("#bookSearch").value;
	const query = `?query=${bookName}`;
	//alert(query);
	
	fetch(`https://dapi.kakao.com/v3/search/book${query}`,{
		method: 'get',
		headers:{
			Authorization : `KakaoAK ${REST_API_KEY}`,
		},
	}).then((response) => {
		return response.json();
	}).then((data) => {
		//alert(data.document.length)
		//alert(data.documents[1].title)
		
		let str = "";
		for(let i = 0; i <data.documents.length; i++) {
			str += data.documents[i].authors + ", " +
			data.documents[i].title + ", " +
			data.documents[i].price + ", " +
			data.documents[i].publisher + "<br>";
		}
		document.querySelector("#showBook1").innerHTML = str;
		
	}).catch(err => {
		console.error(err);
	});
}


function funcBook2() {
	//alert("8");
	const REST_API_KEY = "cc5cf68ea1e32d33a7edbcfa51e16974";
	const bookName = document.querySelector("#bookSearch").value;
	
	const options = {
		headers:{
			Authorization : `KakaoAK ${REST_API_KEY}`,
		},
		params:{
			query:bookName,
		},
	}
	
	axios.get(`https://dapi.kakao.com/v3/search/book`, options)
	.then((response) => {
		return response.data;
	}).then((data) => {
		let str = "";
		for(let i = 0; i <data.documents.length; i++) {
			str += data.documents[i].authors + ", " +
			data.documents[i].title + ", " +
			data.documents[i].price + ", " +
			data.documents[i].publisher + "<br>";
		}
		document.querySelector("#showBook2").innerHTML = str;
	});
}

</script>

</head>
<body>
<h2>* JS에서 AJAX 처리 방법 *</h2>
카카오 도서검색 API 사용하기<br>
<input type="text" id="bookSearch" value="자바">
<button id="btnAPI1">도서 검색(Fetch)</button>
<button id="btnAPI2">도서 검색(Axios)</button>
<hr>

<div id="showBook1"></div>
<br>
<div id="showBook2"></div>
</body>
</html>

Axios 사용법 | 코드잇

| Axios를 간단히 소개하자면 `fetch()` 함수처럼 리퀘스트를 보내고 리스폰스를 받을 수 있는 라이브러리입니다. `fetch()` 함수랑 사용법은 비슷한데요. 조금 더 편리하게 쓸 수 있는 라이브러리라고

www.codeit.kr

- 출처 : www.codeit.kr

3. jQuery

jQuery는 HTML 문서의 탐색 및 조작을 간편하게 해주는 빠르고 간결한 JavaScript 라이브러리이다.
DOM 요소의 선택, 이벤트 처리, 애니메이션 및 Ajax와 같은 복잡한 작업을 간단한 API로 수행할 수 있게 도와준다.

1️⃣ jQuery

DOM 탐색이나 이벤트, 애니메이션, AJAX 등을 활용할 때 유용하게 사용한다.
JS에서 수행하는 것과 동일한 작업을 수행하는 데 사용할 수 있는데
jQuery를 사용하면 대부분 JS보다 적은 양의 코드로 수행할 수 있다.
CSS의 선택자처럼 선택자를 사용하여 DOM 요소의 검색, 선택 및 조작을 단순화한다.
크로스 브라우저를 지원한다.
브라우저별로 처리 방법이 다른 이벤트 처리나 함수들의 문장을 하나의 표현으로 사용 가능하다.

2️⃣ Vanila JS와 jQuery

VanilaJS와 jQuery는 동적인 웹 페이지를 만드는 데 널리 사용되는 웹 기술이다.
Vanila JS는 높은 수준의 프로그래밍 언어이고 jQuery는 JS를 사용하여 수행되는 작업을
단순화하도록 설계된 오픈 소스 기반의 JS의 라이브러리이다.

🚀 window.onload $(document). ready() 차이

1️⃣ window.onload 호출 시점
페이지의 모든 요소들이 로드된 이후에 호출

💡 window.onload 특징

페이지의 모든 요소들이 로드되어야 호출된다.
한 페이지에서 하나의 window.onload() 함수만 적용된다.
가장 나중에 호출된 함수만 적용

2️⃣ $(document).ready() : 호출 시점
DOM이 로드된 시점. 텍스트만 다 넘어오면 자동수행

💡 $(document).ready() 특징

외부 리소스 및 이미지 로딩과 상관없이 DOM만 로드되면 바로 실행된다.
중복 사용해도 순서대로 모두 실행된다.

VanilaJS, jQuery, React, Vue 특징

❗ Vanila JS ✨ Vanila JS란? 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 의미한다. Vanila : 스페인어로 콩을 뜻함 => "핵심, 근본이 되는"이라는 의미를 담고 있음. Vanila JS:

velog.io

- 출처 : eunnbi

window.onload 와 $(document).ready()의 차이

1. window.onload 1) 호출 시점 - 페이지의 모든 요소들이 로드된 이후에 호출 2) 특징 - 페이지의 모든 요소들이 로드되어야 호출된다. - 한 페이지에서 하나의 window.onload()함수만 적용된다. - 가장 나

soyeondev.tistory.com

- 출처 : soyeondev

[JavaScript] Factory Functions

하우즛 고잉 가이즈? 동기 여러분! 오늘은 Factory Functions, 공장 함수에 대해 알아보겠습니다. 오늘 내용은 쉽고 간단하니까 빠르게 알아보도록 하죠! Factory Functions 리그 오브 레전드의 챔피언들의

dongi-coding.tistory.com

- 출처 : dongi-coding

4. EVENT

jQuery는 웹 페이지의 요소에 대한 이벤트 처리를 매우 간단하게 만들어준다.
이벤트는 사용자의 상호작용에 반응하여 코드가 실행되도록 하는 메커니즘이다.
jQuery에서는 다양한 이벤트를 처리할 수 있으며, 이를 통해 동적인 웹 페이지를 만들 수 있다.

💡주요 이벤트 유형

1️⃣ 마우스 이벤트

click
요소가 클릭될 때 발생한다.
dblclick
요소가 더블 클릭될 때 발생한다.
mouseenter
마우스가 요소에 진입할 때 발생한다.
mouseleave
마우스가 요소를 벗어날 때 발생한다.
mousemove
마우스가 요소 내에서 움직일 때 발생한다.

2️⃣ 키보드 이벤트

keydown
키가 눌렸을 때 발생한다.
keyup
키가 눌렸다가 올라올 때 발생한다.
keypress
키가 눌리고 있는 동안 발생한다.

3️⃣ 폼 이벤트

submit
폼이 제출될 때 발생한다.
change
입력, 선택 또는 텍스트 영역 요소의 값이 변경될 때 발생한다.
focus
요소가 포커스를 받을 때 발생한다.
blur
요소의 포커스가 사라질 때 발생한다.

4️⃣ 문서/윈도우 이벤트

load
문서나 이미지가 로드될 때 발생한다.
resize
창의 크기가 조정될 때 발생한다.
scroll
사용자가 요소를 스크롤할 때 발생한다.

💡 이벤트 메소드

1️⃣ on()

jQuery의 이벤트 핸들러를 연결하는 가장 일반적인 방법이다.
여러 이벤트와 선택자를 지원하며, 동적으로 생성된 요소에도 이벤트를 바인딩할 수 있다.

$(document).ready(function() {
    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });
});

2️⃣ bind()

jQuery 1.7 이전 버전에서 이벤트를 연결하는 방법이다.
on() 메소드로 대체되었으며, 더 이상 권장되지 않는다.

$('#myButton').bind('click', function() {
    alert('Button clicked!');
});

3️⃣ unbind()

요소에서 이벤트 핸들러를 제거하는 메소드이다.
특정 이벤트 핸들러 또는 모든 이벤트 핸들러를 제거할 수 있다.

$('#myButton').unbind('click');

4️⃣ off()

unbind() 메서드와 유사하지만, on() 메서드의 반대 동작으로 더 강력한 기능을 제공한다.
특정 이벤트, 특정 핸들러, 또는 네임스페이스를 사용하여 이벤트를 제거할 수 있다.

$('#myButton').off('click');

🚀 on()과 bind()의 차이점

1️⃣ 버전

on()은 jQuery 1.7 이상에서 도입된 메소드이다.
bind()는 jQuery 1.7 이전 버전에서 사용되던 메소드이다.

2️⃣ 기능

on()은 델리게이션(delegate)을 지원한다. 즉, 이벤트 핸들러를 현재 존재하지 않는 요소에도 연결할 수 있다.
예를 들어, 동적으로 생성된 요소에도 이벤트를 바인딩할 수 있다.
bind()는 델리게이션을 지원하지 않는다. 따라서, 동적으로 생성된 요소에는 이벤트를 바인딩할 수 없다.

3️⃣유연성

on()은 여러 이벤트 타입과 네임스페이스를 지원하여 더 유연하다.
bind()는 단일 이벤트 타입만 지원한다.

💻 이벤트 예제

1️⃣ on() 사용 예제

$(document).ready(function() {
    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });

    // 동적 요소에 이벤트 델리게이션
    $('ul').on('click', 'li', function() {
        alert('List item clicked!');
    });
});

2️⃣ bind() 사용 예제

$(document).ready(function() {
    $('#myButton').bind('click', function() {
        alert('Button clicked!');
    });
});

3️⃣ unbind() 사용 예제

$(document).ready(function() {
    $('#myButton').bind('click', function() {
        alert('Button clicked!');
    });

    // 이벤트 핸들러 제거
    $('#myButton').unbind('click');
});

4️⃣ off() 사용 예제

$(document).ready(function() {
    $('#myButton').on('click', function() {
        alert('Button clicked!');
    });

    // 이벤트 핸들러 제거
    $('#myButton').off('click');
});

📚 제이쿼리 이벤트 종류 & 설정 총정리

jQuery 이벤트 문법 웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다.

inpa.tistory.com

- 출처 : inpa

jQuery : focus(), blur() 이벤트

focus() : 마우스 포인터가 해당 요소에 위치할 때(포커스가 되었을 때) 발생 blur() : 포커스를 잃었을 때 발생 1. input 태그에 focus(), blur() 이벤트 등록 ID : PW : input 태그에 포커스가 발생했을 때 입력

bamdal.tistory.com

- 출처 : bamdal

[jQuery] bind(), unbind(), on(), off() 이벤트 등록 및 해제

bind, unbind bind는 jquery의 이벤트 설정 메서드이고, unbind는 jquery의 이벤트 해제 메서드이다. jquery 1.7부터 bind/unbind가 개선되어 나온 것이 on/off 메서드이다. click! 아래와 같이 unbind와 bind를 한 번에

ggmouse.tistory.com

- 출처 : ggmouse

저작자표시 비영리 변경금지 (새창열림)