비동기
수업을 들었지만 이해 못한 부분이 많아서 TIL 내용이 많이 틀릴 수 있습니다.
callback
비동기를 배우기 이전 먼저 콜백에 대한 리뷰를 하겠다.
다른 함수의 전달인자(argument)로 넘어가는 함수
const func2 = (value) => {
console.log(value);
}
const func1 = (callback) => {
callback();
}
func1(func2); //func1 의 전달인자는 func2 callback in action
- 반복실행하는 함수
let arr = ['a','b','c']
arr.map(function(element, index) {
return element + element;
});
console.log(arr);// ['aa','bb','cc']- 이벤트 함수
document.queryselector('#button').addEvnetListener('click', function(e) {
console.log('Click!')
});이벤트에 함수 실행을 연결하는 것이 아님(연결하면 function(e)의 값을 연결해주는 것과 같음 결과적으로 function(e)는 리턴값이 없어서 undefined 이기 때문에 undefined를 연결해준것)
이벤트에 함수 그 자체를 연결해줘야함
blocking vs non-blocking
전화와 문자로 동기와 비동기를 비교해볼 수 있다.
전화를 받을 때 다른 하던일을 멈추고 전화를 받는다.
전화가 오는 것이 요청이고 전화를 받는 것이 요청에 대한 결과인데 요청과 결과가 동시에 일어난다.
문자가 오는 것은 하던일을 마저 다 하고 문자를 볼 수 있다.
문자가 오는 것은 요청이지만 답장은 바로 하지 않아도 된다. 요청과 결과가 동시에 일어나지 않는다.
유튜브 역시 예로 들 수 있는데 유튜브에서 원하는 영상을 클릭하면 영상이 재생되면서 오른쪽에 관련 영상 밑에는 댓글들이 나타난다. 영상이 아직 버퍼링에 걸려 재생이 되고 있지 않더라도 관련영상이나 댓글을 볼 수 있는데, 만약 유튜브가 동기라면 영상이 나오기 전까지 관련영상과 댓글은 로딩이 되지 않고 유튜브 영상이 끝나게 되면 그재서야 관련영상이 나오고 관련 영상 로딩이 끝나야 댓글이 나올 것이다.
Promise & Async/Await
콜백함수는 비동기를 나타내는 일반적인 방법 중 하나이다.
const printNumber = (number, callback) => {
setTimeout(
() => {
console.log(number)
callback()
},
Math.ceil(Math.random() * 100 ) + 1)
}
const print = () => {
printNumber(1, () => {
printNumber(2, () => {
printNumber(3, () => {})
})
})
}
print();이렇게 콜백함수안의 콜백함수 안의 콜백함수가 계속 이어지게 되는 경우 가독성이 상당히 떨어지게 되고 로직을 변경하기도 어렵다. 그로 인한 구조가 콜백지옥(callback hell) 구조이다.
이러한 콜백지옥을 벗어나기 위한 방법이 Promise와 Async/Await이다.
Promise
Promis는 new Promise() 를 통해 만들 수 있고 resolve()와reject() 명령어를 통해 다음액션으로 넘어가거나 에러를 핸들링할 수 있다.
const printNumber = (number) => {
return new Promise((resolve, reject) => {
setTimeout(
() => {
console.log(number)
resolve()
},
Math.ceil(Math.random() * 100 ) + 1)
})
}
const print = () => {
printNumber(1)
.then(() => {
return printNumber(2)
})
.then (() => {
return printNumber(3)
})
}
print();콜백을 인자로 받지 않고 promise를 리턴받는다.
만약 에러가 발생하게 된다면 reject()을 실행하면 된다.
.then앞의 액션이 끝나면 뒤의 함수를 실행하라는 코드이고 만약 reject()를 실행해야할 경우
.catch를 사용하면 된다.
promise의 경우 에러 핸들링이 날 상황이 벌어지면 마지막에 .catch를 이용해서 한번에 에러상황에 대한 처리를 할 수 있다. (에러가 어떠한 상황에 일어나도 마지막에 잡아 줄 수 있다.)
Async/Await
const printNumber = (number) => {
return new Promise((resolve, reject) => {
setTimeout(
() => {
console.log(number)
resolve()
},
Math.ceil(Math.random() * 100 ) + 1)
})
}
const print = async () => {
const one = await printNumber(1);
const two = await printNumber(2);
const three = await printNumber(3);
};
print(); promise 를 조금 더 가독성 높게 만들어진 문법 동기처럼 보이지만 비동기이다.
작동법은 async function() async 가 함수 앞에 붙게 되고 그 함수 안에서 변수 선언 후 await callbackfunction 콜백하고자하는 함수 앞에 await를 넣어주면 된다.
마지막으로...
솔직히 쓰면서도 틀린거같고 뭐라 설명을 못하겠는 것을 보니까 아직 공부가 덜된 것 같다. 일단 비동기 promise / Async&Await 공부를 좀 더 해보고 다시 블로깅 하는게 맞을 것 같다.
