JS
[JS] 비동기처리와 콜백함수
디지몬진화
2024. 7. 23. 00:17
01. 비동기처리
- 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 특성
01-1 ajax
- 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시할때 사용
- $.get() : ajax 통신을 하는 부분
function getData() {
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData()); // undefined
↑위 코드는 $.get으로 데이터를 요청하고 받아올 때까지 기다려주지 않고 다음 코드인 retrun tableData;를 실행했으므로 undefined가 출력됨
01-2 setTimeout()
- 지정한 시간만큼 기다렸다가 로직을 실행
// #1
console.log('Hello');
// #2
setTimeout(function() {
console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');
02. 콜백 함수
- 다른 함수의 파라미터로써 전달되는 함수
- 태스크가 끝나기 전에 함수가 실행되지 않도록 함
02-1 콜백 함수로 비동기 처리방식 문제 해결하기
- 콜백 함수를 사용하여 특정 로직이 끝났을 때 원하는 동작을 실행
function getData(callbackFunc) {
$.get('https://domain.com/products/1', function(response) {
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
02-2 콜백 헬
- 콜백 안에 콜백을 계속 무는 형식
- 웹 서비스 개발 등 많은 데이터를 처리해야 하는 작업의 모든 과정을 비동기로 처리할 때 발생 가능
- 가독성이 떨어지고, 로직 변경이 힘듦
※ Promise나 Async를 사용하여 해결 가능
$.get('url', function(response) {
parseValue(response, function(id) {
auth(id, function(result) {
display(result, fuction(text) {
console.log(text);
});
});
});
});