async & sync
synchronous, 동기
: 적절한 사전적 의미를 찾지 못했지만 개발에서 동기적으로 실행된다는 의미는 동시에 처리가 일어난다는 의미라는 말을 많이 읽었다. 사실 이 뜻이 헷갈렸는데 javascript의 작동 원리를 생각하면서 정리해보자.
Javascript는 single thread 기반 언어라 parsing 과정에서 callstack에 명령 순서대로 함수를 실행시키면서 output을 쌓아두었다가 parsing이 끝난 후에 명령에 맞게 출력하게 된다.
이 과정에서 javascript는 함수 실행이 시간이 걸리더라도 output을 반환하기 전까지 parsing을 멈춘다. 이는 javascript가 요청과 동시에 결과값을 반환하도록 명령을 처리한다는 말이다.
말이 길었지만 정리하면
- synchronous의 의미는 요청과 동시에 결과값을 반환한다.
이다.
여기서 문제는 실행 시간이 한시간 걸리는 함수가 있다고 가정해보자. 함수 실행이 끝나는 한시간동안 parsing은 멈춰있을거고 사용자는 아무것도 없는 빈 화면만 한시간을 넘게 쳐다보게 될 것이다. 이를 전체적인 작동 흐름을 막는 blocking이라고 한다.
asynchronous, 비동기
: 비동기라는 단어는 사전엔 없지만 동기 의미와 반대로 생각하면 요청과 동시에 결과값을 반환하지 않아도 된다 정도인데 기왕 javascript 작동원리 비유한 거 끝까지 해보자.
javascript는 single thread이지만 Web APIs의 도움을 받을 수 있다.
function testFunc() {
console.log("Hello");
};
function testFunc2() {
console.log("World");
};
setTimeout(testFunc, 1000);
testFunc2();위 code를 보게되면 setTimeout() 함수를 이용해 testFunc()를 실행하고 후에 testFunc2()를 실행하였다. 위 실행 순서대로라면 Hello가 먼저 출력되고 World가 출력될 것이라 예상했지만 
World가 먼저 출력이 된 후 Hello가 출력이 된다.
이는 setTimeout() 함수를 이용해 testFunc() 함수를 비동기적으로 호출했기 때문이다. setTimeout() 함수는 javascript 내장 함수가 아닌 javascript를 비동기적으로 처리하기 위해 web APIs에서 제공하는 함수라는 글을 언제가 본적이 있다. 첫번째 인자로 실행 시킬 함수를 두번째 인자로 시간을 받는데 ms 단위로 받는다.
위 code를 해석하면 testFunc()함수는 지금 호출했지만 결과값은 1초 뒤에 받을 것이다는 의미인데 동기적으로 처리가 되었다면 결과값이 반환되는 1초동안 그 다음 testFunc2() 함수는 실행되지 못했을 것이다.
하지만 javascript는 Web APIs의 도움을 받는다했고 javascript가 setTimeout() 함수를 읽는 순간 setTimeout()으로 요청한 실행을 Web APIs로 넘겨 Web APIs에서 실행이 된다. 실행한 결과 값은 queue에 쌓여 모든 parsing과정이 끝난 후에 event loop에 의해 다시 callstack에 쌓여 반환된다.
이를 비동기적 처리라고 한다.
정리하자면
- 전체적인 작업 흐름을 막는 실행 요청을 비동기적 처리로 흐름을 막지 않게 한다.
이다.
정리
사실 동기, 비동기가 왜 필요한지에 대해 팀 project를 하면서 경험했던 적이 있다. 동기, 비동기 개념에 대해 안이하게 생각하고 있을 당시 다른 component에서 id를 받아 해당 component에서 필요한 data를 받아오는 작업을 진행했는데 id값이 render가 이루어진 후에 들어오고 data가 들어오기 전에 render가 이루어지니 이틀 남짓 type error와 계속 마주쳐야 했다. 물론 동기 비동기 처리 방식이 아닌 다른 문제일 수도 있었고 다른 방법이 존재할 수도 있었겠지만 동기, 비동기 개념을 인지하고 있었으면 문제를 더 빨리 해결할 수 있지 않았을까 생각이 들 때마다 반성을 하게 된다.
Reference
https://siyoon210.tistory.com/147
https://private.tistory.com/24
https://pro-self-studier.tistory.com/89
