비동기 & 동기
앞선 블로그에 기술했듯이 자바스크립트는 동기적으로 작동된다. 이 말은 하나의 작업이 수행이 끝나고 나서야 그다음 작업을 수행하게 된다는 것을 의미한다. 하지만 대부분의 웹을 살펴보면 여러개의 작업이 동시에 진행되는듯한 느낌을 받을 수 있다.
비동기작업은 A작업을 수행하는 와중에도 B작업을 시작할수있다. 이러한 방식으로 D까지의 작업을 모두 마치는데 동기적인 방식보다 훨씬 짧은 시간이 소요된다.
Callback
이러한 비동기처리는 다소 문제를 야기할 수 있다. 아래 예제코드는 비동기의 흔한 사례인 ajax요청이다.
function getData(){
let tableData
$get('http:...url...', fuction(response){
tableData = response
})
return tableData
}
console.log(getDate()) // undefined마치 tableData에 요청한 데이터가 담겼을것처럼 보이지만 실제로는 tableData가 선언되고 리턴될때까지 ajax요청은 실행중일수도 있다. 이는 비동기요청의 특징으로 tableData선언 => ajax요청 => tableData반환 의 순서대로 작동하지 않음으로써 발생한다.
이렇게 비동기가 포함되어있지만 동기적인 방식이 필요할때 우리는 callBack을 사용할 수 있다.
function getData(callbackFunc) {
$.get('http:...url...', function(response) {
callbackFunc(response); //데이터 response를 콜백함수 callbackFucn()에 넘겨주었다.
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});이를테면 콜백은 비동기수행이 끝났을때 수행되는 함수로 생각할 수 있다.
Callback hell
이런 콜백함수도 기능이 많아지고 복잡해질수록 가시성이 급하게 안좋아지는 경우가 있는데 이를 콜백헬(Callback hell)이라고 부른다.
Promise
이러한 콜백헬을 해결하기 위해 사용할 수 있는 방법 중 하나는 바로 promise이다. promise는 말 그대로 약속이다. 이 약속의 상태는 4가지로 나눌 수 있는데 다음과 같다,
- pending : 아직 약속을 수행중인 상태(fulfilled 혹은 reject가 되기 전)
- fulfilled : 약속을 이행한 상태
- rejected : 어떤 이유에서건 약속을 못 지킨 상태
- settled : 약속을 지키건 안지키건 결론이 나버린 상태
이제 프로미스의 실행을 간단히 살펴보자
_promise(true)
.then(function (text){
// 성공시
console.log(text)
}, function(error){
// 실패시
console.log(error)
})_promise()를 호출시 promise객체가 리턴된다. promise객체가 정상적으로 비동기작업이 완료되었을때 호출하는 then이라는 API가 존재한다. then API는 첫번째 파라미터로 성공시 호출할 함수를 받고, 두번째 파라미터로 실패시 호출할 함수를 받는다.
catch
만약 체이닝 형태로 연결된 상태에서 에러가 발생한다면 어떻게 될까. 그때를 위해 catch가 존재한다.
_promise(true)
.then(JSON.parse)
.catch(function(){
window.alert('에러가 발생함')
})
.then(fuction(text){
console.log(text)
})catch는 then을 메서드 형태로 바꿔준 것과 같다. catch부분에서 에러가 발생한다면 다음 then으로 넘어가지 않고 catch에서 받게된다.
