동기 비동기 개념 정리 part.1

"어떤 삶을 살아오셨는지 제가 다 알지 못하기 때문에 드릴 수 있는 조언은 많지 않지만, 우선 비전공자 시라면 동기, 비동기 개념에 대해 잘 공부하시고, 쿼리문에 익숙해 지는 것을 추천드립니다."

☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎☠︎

그래서, 동기 비동기 개념에 대해 있는 힘껏 정리해 볼 것이다.

1. 동기적 작동과 비동기적 작동

1. 동기적 작동: 순차적인 실행. 열거되어 있는 순서대로 실행되는 것을 생각하면 됨.

function syncFunction() {
  console.log("Step 1");
  console.log("Step 2");
  console.log("Step 3");
}

console.log("Start"); //첫번째로 등장해 1번으로 실행되는 코드
syncFunction(); //이곳에서 호출되어 2번으로 실행되는 함수
console.log("End"); //세번째로 등장해 3번으로 실행되는 코드

// 결과값
Start // 1
Step 1 // 2
Step 2 // 2
Step 3 // 2
End // 3

• 동기적인 흐름: 함수를 호출하면 함수의 실행이 완료될 때 까지 코드의 실행이 일시 중지되며, 함수의 실행이 끝난 뒤에 다음코드가 실행.
• 순차적인 실행을 보장하고, 코드의 실행이 완료될 때 까지 기다린다.
• 다음 코드 실행을 위해서는 이전 코드의 실행이 완료되어야 한다.

말이 좀 어렵지만, 기본적으로 first come, first served 인 것이다.

2. 비동기적 작동: 순차적이지 않은 실행. 열거되어 있는 순서를 무시하고 별도의 기준대로 실행되는 것을 생각하면 됨.

console.log("Start"); // 첫번째로 등장해 1번으로 실행되는 코드

setTimeout(function() {
  console.log("Delayed execution");
}, 2000); // 두번째로 등장했으나, 시간조건이 달린 비동기함수여서 시간조건에 따라 3번으로 실행되는 코드

console.log("End"); // 세번째로 등장했으나, 2번으로 실행되는 코드

// 결과값
Start // 1
End // 2
Delayed execution // 3 

• 비동기적인 흐름: 함수를 호출하면 코드의 실행이 지정된 조건이나 이벤트가 발생할 때 콜백함수를 실행되게 됨.
• 따라서 시간이 오래 걸리는 작업이나 외부 요청과 같은 작업을 처리하는 동안 다른 코드를 실행할 수 있음.

마패 꺼낸 암행어사를 생각하면 비슷할지도?

2. 이게 Javascript에서 중요한 이유

뭘 잘 알고 쓰는건 아니지만, 일단 듣기로는 아래와 같은 이유로 Javascript에서 중요한 개념으로 취급받는다고 한다.

1. 자바스크립트는 단일스레드 환경에서 실행되는 언어임.
2. 그래서 기본적으로 동기적인 작동을 전제로 함. 코드는 순차적으로 실행되며, 한 작업이 끝나야 다음 작업이 실행됨(blocking방식).
3. 그러나 동기적인 실행방식은 긴 작업이나 시간이 오래 걸리는 작업을 처리하는 데 제약이 있음.
4. 이런 점들을 극복하기 위해 다양한 비동기 패턴과 API를 제공함.
   a. 콜백함수
   b. 프로미스(Promise)
   c. async/await 등등등

To be continued