Sync는 한줄씩 내려가면서 실행한다. Async 역시 한줄씩 내려가면서 실행하지만 async코드를 만나면 분기하여 비동기로 작업한다. JS에서 async로 인해 분기된 경우 한 코드 안에서 여러 쓰레드가 돌아가게 된다.
이는 오래 걸리는 작업을 효율적으로 처리하기 위해서이다. 하지만 비동기 코드의 실행순서는 복잡해질 수 있기 때문에 혼란을 야기한다.
비동기 코드를 만났다면 해당 코드가 처리되기를 기다릴 필요 없이 분기하여 다음 코드를 바로 실행시키면 된다.
fetch와 같은 작업 역시 시간이 얼마나 걸릴지 모르기 때문에 비동기로 작업을 해준다.
let a = 1
setTimeout(function() {
console.log('timeout: ' + a)
}, 100)
a = 10
위 코드의 경우 콘솔에 10이 입력된다. 왜냐하면 해당 콜백함수가 실행되는 시점에서 a값은 10으로 변경이 되었기 때문이다. 위 같은 상황 떄문에 많은 에러가 발생한다.
Block vs Non-Block
제어권 반환
제어할 수 없는 대상의 처리 방법
Block의 경우에는
내부 함수를 실행할 때 제어권 자체가 해당 함수로 넘어가 함수가 종료되고 반환값과 제어권이 함께 호출자 함수로 돌아온다.
Non-Block의 경우에는
호출자에서 내부 함수를 실행한뒤 반환까지 기다리지 않고 다시 호출자로 제어권이 돌아와 다음 문장을 실행한다. 따라서 쓰레드 형식으로 동시에 코드가 진행된다. 내부 함수의 실행이 끝나고 반환값이 생성이 되어도 제어권이 없기 때문에 그 순간에 반환되지 못한다.
Synchronouse vs Asynchronous
시간
대상들의 시간이 일치하는가?(결과값 반환과 제어권 반환의 시간이 일치하는가?)
Sync Async는 추상적 개념이다. 따라서 관점에 따라서 Block == Sync , Non-Block == Async라고 볼 수 있다.
관점에 따라 한 상황에서도 동기, 비동기로 나눌 수 있다. 따라서 크게 단어에 집착하지 말자
JS는 싱글스레드 언어이지만 비동기 작업이 가능하다. 비동기 처리를 Web API나 Node.js에서 맡아서 처리한다.
완료된 비동기 작업들은 태스크 큐에 인큐되어 다시 JS엔진으로 넘어간다.
아래와 같은 JS코드는 비동기로 작업된다.
async function() {
await func1();
await func2();
await func3();
}
'Frontend > JavaScript' 카테고리의 다른 글
고양이 사진 검색 사이트2 :: 동적 컴포넌트와 이벤트리스너 바인딩 (0) | 2022.04.10 |
---|---|
고양이 사진 검색 사이트1 :: 개요, Responsive web (0) | 2022.04.10 |
JEST (0) | 2021.08.31 |
history, location, match (0) | 2021.07.07 |
프론트 비동기 작업 이해하기(feat. React) (0) | 2021.07.03 |