자바스크립트
자바스크립트는 동기식 언어입니다.
동기란, 한 작업이 실행할 때 다른 작업은 멈춘 상태를 유지한 상태로 기다리는 것을 말합니다.
이를 싱글 스레드, 동기 라고 부릅니다.
이 방식은 순서대로 일을 처리하다가 멈추거나 문제가 생기게 되면 다음 일은 아무것도 할 수 없는 상태가 발생합니다.
비동기
비동기는 요청을 한 순간 그 답변을 받을 때까지 기다리는 것이 아니라 바로 다음 동작이 실행되는 방식입니다.
웹페이지를 로딩하거나 요청 또는 동작이 시간이 오래 걸리게 된다면, 웹에서는 화면이 멈추거나, 다음 동작을 수행하는데 지장을 줍니다.
비동기의 동작
-
비동기 함수가 호출되면 call stack에서 Web API로 이동 후 call stack에서 사라진다.
-
Web API에서 비동기 함수의 처리가 완료되면 해당 함수의 콜백 함수들을 처리가 완료된 순서대로 태스크 큐에 올라간다.
-
event loop라는 것이 call stack이 비어있는지 확인 후 테스크 큐에 들어있는 콜백함수들을 순차대로 다시 call stack에 올린다.
call stack : 함수의 호출을 기록하는 자료구조
Web API : 브라우저에서 제공되는 API로 AJAX나 setTimeout등이 있다.
비동기 예시
-
AJAX
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능(비동기식 자바스크립트와 xml의 약자) -
setTimeout
Web API의 한 종류로, 코드를 바로 실행하는 것이 아니라 지정한 시간만큼 기다렸다가 실행하는 함수
function abc(){
console.log("2");
}
setTimeout(abc,3000);
console.log("1");setTimeout이 3초가 지났을때 abc라는 콜백함수를 수행한다.
위 코드의 결과를 보면 콘솔에 1,2 순서로 출력이 된다.
코드 순서는 setTimeout이 위에 있지만 1이 먼저 출력이 된것을 보아 비동기 방식을 볼 수 있다.
콜백 함수
비동기방식에 특정 로직이 끝났을 때 실행되는 함수를 콜백함수라 한다.
식당에서 앉을 공간이 없어서 대기자 명단에 이름을 써놓고 다른일을 하러 다닌다. 그 후 식당에서 자리가 생겼다고 연락이 오는 시점을 콜백함수가 호출되는 시점이라고 생각하면 좋다.
콜백 지옥
서버에서 데이터를 받아와 화면에 표시하기, 인코딩, 사용자 인증 등을 처리하는 것을 모두 비동기로 처리한다면, 콜백안에 콜백안에 콜백 형식으로 코딩을 하게 되는데 이러한 코드는 가독성도 떨어지고 디버깅도 힘들다. 이와 같은 코드를 콜백 지옥이라 한다.
$.get('url', function(data) {
login(data, function(data2) {
// 할일
getAlarm(data2, function(data3) {
// 할일
setPage(data3, function(data4) {
// 할일
});
});
});
});Promise
콜백 지옥을 대비하기 위해 ES6부터 도입한 방식이다.
pending,fulfilled,rejected의 3가지 상태를 가진다.
- pending(대기) : 이행하지도, 거부하지도 않은 초기 상태
- fulfilled(이행) : 연산 완료
- rejected(거부) : 연산 실패
then, catch를 통해 처리를 한다.
AJAX 방식에 Promise 사용방식을 보면
$.get('url')
.then(login)
.then(getAlarm)
.then(setPage);코드가 보기 쉽게 깔끔해진것을 알 수 있다.
Fetch API
AJAX의 XMLHttpRequest를 대체하며 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API이다.
- fetch(url,옵션)
- Promise 기반으로 동작하며 fetch의 기본 응답 결과는 response 객체이다.
- response 객체를 얻으면 json으로 바꾸거나 text로 바꾸는 등의 처리가 필요하다.
fetch(url, options)
.then((response) => console.log("response:", response))
.catch((error) => console.log("error:", error));위 코드는 fetch 사용 방법으로, API 호출이 성공했을 경우 response 객체를 반환하고, 실패했을 경우 error 객체를 반환한다.
