I'm 동시성과 병렬성 그리고 비동기와 동기 master 🔨

최근에 여러 회사를 지원하면서 면접 준비를 하고 있습니다. 많은 사람들이 프론트엔드는 백엔드에 비해서

"CS나 네트워크 지식이 없어도 되는 거 아닌가?" 라고 생각하는 사람들이 되게 많더라고요. 하지만 프론트도

정말 CS나 네트워크등 컴퓨터 사이언스에 대해서 정말 중요합니다. 그중에서 가장 중요하고 반드시 개발자나 

전공자는 반드시 알아야 하는 동시성과 병렬성 그리고 비동기와 동기라는 개념에 대해서 알아보려고 합니다.

(최대한 처음 들어보는 사람들의 기준으로 예시와 함께 설명하겠습니다.)

 

 

동시성과 병렬성

먼저 동시성과 병렬성에 대해서 알아보겠습니다.

 

동시성은 Task들 즉 작업들이 빠르게 수행, 동작을 하면서 동시에 하는 것처럼 보이는 현상입니다.

병렬성은 물리적인 시간 동안 Task들 즉 작업이 동시에 실행하는 현상입니다.

 

대충 어떤 차이인지 아시겠나요? 동시성은 보이는 척!! 병렬성은 실제로 동시에 동작. 이라고 보시면 편하겠네요.

 

그러면 정확히 이해를 하기 위해서 예시를 들어서 설명을 해보겠습니다.

 

 

각각 위에서부터 1 2 3 4 맥북이라고 가정을 해보겠습니다. 동시성을 먼저 설명을 해보자면 친구가 작업을 하다가 모르겠다고 도와달라고 요청을 합니다. 그러면 저는 1번 맥북에서 작업을 하고 있다가 하고 있던 작업을 잠시 멈추고 2번을 도와주고 다시 1번에서 와서 작업을 합니다. 또 그러다 3, 4번 맥북 친구들이 도와달라고 하면 도와줄 수 있습니다. 이런 식으로 동시에 하는 것처럼 보이는 현상을 동시성. 실제로는 동시에 하고 있지는 않지만 context switching을 통해서 동시성이 실행됩니다. 만약 동시성이 없으면 2, 3, 4번 맥북 친구들에게 "야 나 작업 안 끝났어 기다려."라는 것과 같습니다.

 

 

context switching이 뭘까?

현재 진행하고 있는 Task(Process, Thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽어 적용하는 과정

 

그러면 저 위와 같은 상황에서 병렬성은 무엇일까?

단순하게 생각하면 쉽다. 저런 현상에서 물리적으로 동시에 실행이 되는 것이다. 
저런 동시성은 CPU가 1개의 가정을 들었다.

동시성이라면 1(맥북) ➡️ 2(맥북) ➡️ 4(맥북) ➡️ 1(맥북) ➡️ 3(맥북) 이런 식으로 context switching이 일어난다.

하지만 병렬은 다르다. 

 

CPU가 2개면서 동시성이면서 병렬성이 적용이 된다면 어떨까?

 

위와 같은 동시성과 같은 상황이라면 맥북 2번 친구가 도움을 요청하였다. 그럼 동시성이라면 내가 하던  작업을

멈추고 2번 맥북 친구를 도와주었지만 병렬성은 1(맥북)을 하면서 2(맥북)를 동시에 작업을 하는 것이다.

만약에 CPU가 3개면 어떨까? 그러면 3, 4번 맥북 친구 중 한 명을 더 도와줄 수 있게 되는 것이다. (입, 발 등 ..)

⭐️ 따로 멀티 태스킹과 멀티 스레드에 대한 개념도 이해하고 있으면 좋다. 다음 블로그에서 다뤄보겠다.

 

비동기와 동기는 무엇일까?

비동기와 동기라는 말은 자주 들어봤을 것이다. (JavaScript는 비동기 처리가 가능하다. 이런 말들??)

그러면 여기서 말하는 비동기와 동기는 어떤 특징과 차이점을 가지고 있는지 한번 알아보겠다.

 

이 그림 비동기와 동기를 설명할 때는 너무너무 많이 봐서 이제는 질릴 정도죠? 이 이미지가 정말 설명을 쉽게 

할 수 있는 이미지인 것 같습니다. 자주 가는 스타벅스가 생각이 나는데 이 이미지를 가지고 설명해 보겠습니다.

 

먼저 동기는 서버에서 요청을 보냈을 때 응답이 와야 다음 동작을 실행을 할 수 있습니다. 하지만 반대로 비동기는

동기와 다르게 응답이 오지 않아도 다음 동작을 실행 할 수 있습니다. 그럼 예시로 설명하겠습니다.

 

제가 A 스타벅스에 방문하였습니다.

제가 자주 가던 저희 집 앞에 있는 A 스타벅스는 카운터가  1개입니다. 그리하여서 카페를 주문할 때 사람들이 한 줄로 쭉 서서 주문을 할 수 있습니다. 여기서 알 수 있는 것은 제가 주문을 하고 있을 때 또는 다른 사람이 주문을 하고 있을 때 저는 주문을 할 수 없습니다. 이러한 개념을 동기라고  표현할 수 있는 것이죠. 

 

이번에는 제가 B 스타벅스로 방문하였습니다.

B 스타벅스는 카운터가 2개이기 때문에 내가 카운터에서 주문을 하거나, 다른 사람이 주문을 하고 있을 때 어떤 누군가 옆 카운터에서 또 다른 주문을 할 수 있는 것입니다. 이러한 개념을 비동기라고 표현할 수 있는 것이죠

 

코드적으로는 어떻게 실행이 되는 걸까?

동기 코드

 

실행 결과가 어떻게 될까?

1
2
3

예. 당연한 결과입니다.

비동기 코드

 

여기에 있는 비동기 실행 코드는 어떤 결과 나올까? setTimeout을 0초로 설정하였습니다.

1
3
2

생각보다 뜻밖의 답이 나왔다고 생각하실 분이 있습니다.

여기서 알 수 있는 사실

 

저는 여기서 좀 의아했는데 .. "0초로 설정하면 기다림이 없으니까 당연히 1 2 3이 찍혀야 하는 것이 아닌가?

하지만 console이 찍히는 것을 보고 알게 되었습니다. "아 비동기적인 코드는 동기 코드가 다 실행이 돼야지

비동기 코드가 실행이 되는구나"라는 사실을요.

 

자바스크립트의 동작 원리가 궁금하면 이전 블로그 방문하기 🔻

JS 동작 원리

 

다음 블로그에서는 오늘 블로그와 연계에서 자바스크립트는 싱글 스레드이자 비동기 처리인 언어?

라는 주제를 가지고 블로그를 써보겠습니다.

 

느낀점

이제 개발 1년차에 컴퓨터 사이언스 지식이 너무 많이 부족하다고 생각을 해서 앞으로 많이 작성을 하려고 한다.

오늘 배운 비동기 동기 처리에 대해서 다시 한 번 정리하고 다음 주제는 싱글 스레드, 멀티 스레드, 멀티 프로세스

등등 프로세스와 스레드에 관한 내용으로 써볼까 한다.