비동기 처리?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미
특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것
1. ajax (jquery)
서버에 데이터를 요청했을 때 응답의 때를 무작정 기다릴 수 없다.
2. setTimeout()
Web API 한 종류로 코드를 바로 실행하지 않고 지정된 시간만큼 기다렸다가 로직을 실행
// #1
console.log('Hello');
// #2
setTimeout(function() {
console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');
비동기 처리 문제 해결 법 !
1. 콜백 함수
=> 식당 예약과 유사하다. 데이터가 준비된 시점에서만 원하는 동작(데이터 값 출력) 을 수행
cf) 콜백 지옥
비동기 처리 로직을 위해 콜백 함수를 연속적으로 사용했을 때 발생하는 문제입니다.
ex) 서버에서 데이터를 받아 화면에 표시하기까지 인코딩, 사용자 인증 등을 처리하는 경우,
콜백안에 콜백 ==> 가독성이 떨어지고, 로직을 변경하기 어려움
$.get('url', function(response) {
parseValue(response, function(id) {
auth(id, function(result) {
display(result, function(text) {
console.log(text);
});
});
});
});
해결 법 =>
1. Promise 사용
2. Async 사용
3. 코드를 분리