[자바스크립트/JavaScript #3] 비동기 처리 (Part 1), 비동기 처리란

'7월까지 자바스크립트를 끝내야겠다' 생각하고서 벌써 7월 31이다.
오늘부로 문법은 다 끝냈다.
(유튜브 드림코딩에서 제공된 자료 공부를 했다.)
https://www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2
(물론 새로운 문법이나 새로운 API가 나오면 공부해야한다.)

나름대로 복습하면서 머릿속으로 정리를 잘 끝냈지만
마지막 파트였던 비동기 처리는 꽤 어렵게 다가왔다.
3파트로 나누어 블로그에 정리를 해두어야 될 거 같다고 생각이 들었다.

---

비동기 처리란? (Asynchronous)

자바스크립트는 동기적으로 코드를 처리하는 언어다.
그 말은

// 코드블럭 (1) 
console.log(`1`); 
console.log(`2`); 
console.log(`3`); 

/** 
console 출력 
1 
2 
3 
*/

다음과 같은 코드는 위에서부터 순서대로
'1 2 3' 을 출력하는 것은 누구나 알 수 있다.
[동기 처리]
자바스크립트는 hoisting이 되고나서
코드를 작성한 것에 따라 즉각적으로 하나하나씩
처리가 된다.

// 코드블럭 (2) 
console.log(`1`); 
setTimeout(() => console.log(`2`), 1000); 
console.log(`3`); 
/** 
console 출력
1 
3 
2 (1초 후) */

다음 코드는 어떻게 해석할 수 있을까
setTimeout은 Web API로 두 번째로 받는 인자가 ms로 받아들여
ms만큼 지난 후, 첫 번째 인자의 함수를 실행시키겠다는 의미이다.

즉, 브라우저에게 10초 뒤에 함수를 실행시켜달라는 의미이다.
이것을 이해하기 위해서는 다음과 같이 생각한다.
코드블럭 (1)은 코드를 순차적으로 한 사람이 코드를 읽는 것 같다.
코드블럭 (2)는 setTimeout함수 부분을 다른 사람에게 부탁하여
1초 뒤에 읽어 달라는 것 같다.
한 사람과 두 사람의 차이라고 보면 이해가 될 수 있다.

[비동기 처리]
비동기 처리는 자바스크립트에게 역할을 분담하여
수행하는 코드파트를 나눠준다고 해석 할 수 있었다.

---

비동기 처리는 왜 쓰는 것인가

굳이 코드를 즉각적으로 처리해주는 동기 처리를 놔두고
왜 비동기 처리를 쓰는 것일까
여러 이유가 있다.

웹에서는 작은 데이터들이 들어오고 나갈 수 있지만
대부분은 큰 데이터들이 요청(Request)에 의해 들어오고 나간다.

웹에서는 요청한 데이터 말고도 즉각적으로 처리하여
사용자에게 웹을 보여줄 수 있어야 한다.
허나, 요청한 데이터가 커서 동기 처리로 인해
웹이 보이지 않는다면 사용자는 이용함에 있어서
불편함을 겪을 것이다.

그래서 네트워크 응답처리, 사용자 이벤트 처리, 파일을 읽고 쓰는 시스템 작업은
대부분 비동기 처리로 작성한다.
(의도적으로 느리게 하는 경우도 있다.)

---

비동기 처리의 개념과 필요한 이유에 대해서는 이해가 간다.
반대로 비동기 처리에 사용되는 문법은 어렵게 다가온다.
다음 포스팅에서

• Call-Back
• Promise
• async, await

에 대해 알아보자.