비동기 처리

Front

비동기 처리_개념

onivv 2024. 1. 15. 21:35

▶ 데이터 처리 모델

데이터 처리 모델이란? 데이터를 받는 방식
데이터를 받는 방식은 동기식 처리와 비동기식 처리 모델이 있음

1) 동기 (synchronous: 동시에 일어나는)

한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기

2) 비동기 (Asynchronous: 동시에 일어나지 않는)

요청한 결과는 동기와 다르게 동시에 일어나지 않음
서버에게 데이터를 요청한 후 요청에 따른 응답을 기다리지 않아도 됨
다른 프로그램들을 동작시켜도되고, 다른 요청사항을 보내도됨

▶ 프레임워크

정해진 메뉴얼 제공, 개발 시 필수적인 코드와 알고리즘 같은 기능을 제공함
클래스와 라이브러리가 합쳐진 구조
ex) Node, Vue, React, ...

▶ 라이브러리

특정 기능을 구현하기위해 미리 만들어진 함수들의 집합
ex) jQuery, React, ...

▶ 비동기 처리

데이터를 다룰 수 있는 기능
데이터를 다루다보니 표준(프레임워크)이 필요함
데이터는 DB에 존재 → M 파트 → C 파트에 접근할 수 있는 기능
C 파트 → 서버 요청이 가능한 기능

[ jQuery ] - 비동기 처리 사용할 준비_서버 경로 import

jQuery 라이브러리를 import해야만 JS에서 비동기 처리 가능
"jQuery CDN" 검색 > minified > script경로 copy (uncompressed 압축안돼서 무거움)

[ ajax ] - Asynchronous Javascript and XML

자바스크립트를 이용해 비동기식으로 서버와 통신 (프로그램 언어 xx)
$.ajax({}) 메서드
- 모든 jQuery Ajax 메서드의 핵심이 되는 통합 메서드
- HTTP 요청을 만드는 직관적인 방법 제공
- $.ajax() : jquery의 ajax() 함수 사용
- 인자로 중괄호{ } 안에 key-value 형식으로 속성을 보내줌

$.ajax({
	type	: 서버 요청 전송 방식 ("GET" / "POST")
	url	: 요청할 서버/데이터 (어디서 데이터 가져올지, controller경로)
	data	: 서버로 보낼 데이터
	dataType: 전송 받아올 데이터 타입
	success	: 해당 메서드 기능을 성공했을 때 할 행동
	error	: 해당 메서드 기능을 실패했을 때 할 행동
});