[TIL] Day-30 비동기
비동기
수업을 들었지만 이해 못한 부분이 많아서 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 공부를 좀 더 해보고 다시 블로깅 하는게 맞을 것 같다.
Author And Source
이 문제에 관하여([TIL] Day-30 비동기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@source39/TIL-Day-30-비동기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)