2021.07.26(Mon.) <동기 비동기의 간단한 설명>

같이 알바하는 동기가 일을 동기적으로 하면...? 더이상 동기사랑은 어렵게 된다.

1. 사건의 발단.

 나는 다양한 알바와 일들을 했었다. 카페부터 고깃집, 건축, 상하차, 대학 사무실 등 다양한 일들을 하며 많은 동기들을 만났다. 그럴 때마다 함께 일하는 친구들을 분석하곤 했다. 정말 다양한 사람들이 있었다. 어떤 사람은 일을 똑바로 가르쳐 주지 않아도 주어진 시간에 안에 완벽히 수행해 내고, 어떤 사람들은 정해진 시간도 모자라서 몇 명의 인원이 도움을 줘야 겨우 일을 마치는 그런 친구들도 있었다. 그런 친구들의 주된 특징은 '비효율'적인 행동에 있다.

 

2. 동기

• 코드가 적혀있는 순서대로 실행된다.
• 그래서 하나의 코드가 끝나기 전에 다음 코드는 실행되지 않는다.
• 위의 비효율적인 일을 하는 친구들이 하는 행동과 같다.
• 예를 들어, 오븐에 빵을 넣고 구워지는 동안 설거지라도 할 수 있지만, 그렇지 않고 오븐 앞에서 빵을 지키고 있다가, 다 되면 서빙을 하고 난 후에 돌아와 다른 일을 한다.

3. 비동기

• 꼭 코드가 적혀있는 순서대로는 실행되지 않는다.
• 그래서 코드가 실행되는 도중 먼저 필요한 코드를 실행하고 중간에 다른 코드를 실행하며 알맞은 일을 할 수 있다.
• 효율적으로 일을 하는 친구들에 해당된다.
• 예를 들어, 오븐에 빵을 넣어놓고 온도와 타이머를 정확히 맞춰 놓고 빵이 타이머가 울리기 전에, 설거지도 하고, 시간이 남아 바닥도 한번 쓸고, 손도 씻고 난 후에 타이머가 완료된 빵을 가지고 서빙을 하는 것이다.
• 여러 가지 스레드가 돌아간다고 생각할 수 있다. 너무 느린 속도를 가진 일을 다른 스레드에서 실행하게 해 두고 그 보다 빠른 일을 막히지 않게 끝내는 것이다.

4. 자바스크립트의 비동기

• 자바스크립트는 싱글 스레드를 가진다. 그렇다면 어떻게 비동기적으로 코드를 실행시킬 수 있을까?
• '콜백 함수'를 사용한다.
  • 함수는 스택 형태로 사용되지만, 큐 형태로 사용해야 맞다. 하지만 웹 API가 시간을 처리하는 요소들을 담당하기 때문에 가능하다.
  • 그렇게 비동기 요소는 따로 처리되어 태스크 큐에 저장되고, 콜백 함수들을 받아 실행시킨다.
• 결국은 콜백 지옥이 되고 말 것이다.

5. Promise

• 콜백 지옥을 막기 위해서 ES6 이상부터 사용 가능한 함수
• 첫 번째 인자로 수행할 비동기 작업, 두 번째 인자로 콜백 함수에 전달하는 함수를 넣는다.
• 이를 체이닝 방식으로 비동기 작업을 순서대로 적어 보기 쉽게 작성 가능하다.

6. Async & Await

• promise보다 더 직관적으로 함수를 실행할 수 있게 한다.
• 비동기 함수 앞에 async를 적으면 동기 작업처럼 비동기 함수를 작성할 수 있다.
• 이후 비동기 함수로 조회된 데이터를 변수에 할당할 때도 await을 적어서 멈추게 할 수 있다. 마지막 변수에만 await을 안 적으면 그것부터 위로 실행되게 될 것이다.