우리가 자바스크립트로 프로그래밍을 하다보면 동기, 비동기란 단어를 자주 접하게 된다. 자바스크립트에서 프로그래밍을 하기 위해서는 필수적인 개념이기 내용을 정리해보려 한다.
1. 대체 어디서 동기 비동기가 나온건데?🤪
가장 먼저 이 단어의 번역인 동기와 비동기를 접했을 때, 이해가 되거나 한번에 와닿지 않았다.
그래서 이 단어의 어원을 찾아 보았다.
먼저 sync는 synchronous의 줄임말로 단어의 사전적 의미는 아래와 같다.
사전적 의미는 저렇다만, 우리는 저런 의미가 아닌 다른 의미로 접근해보자.
synchronous를 두 단어로 나누면 syn과 chrono가 되는데, 둘다 그리스어에서 기원했으며 "syn"는 "together"을 의미하고 "chrono"는 "time"을 의미한다.
즉, 둘을 합치면 "together time" 으로, "시간을 같이하다." 라는 의미가 될 수 있다.
그렇다면 시간을 같게 한다는 건 알겠는데, 도대체 어떤 시간을 맞춘다는 것일까.
2. sync, 바톤터치 : 함수의 시작과 끝을 맞추다
앞서 말했던것 처럼, sync는 시간을 함께하다 즉, 시간을 맞추다라는 의미를 갖는다. 여기서의 시간은 "함수간의 시작과 끝"을 의미한다.
위 사진을 보면 Synchronous는 1번 함수의 끝나는 시점이 2번 함수의 시작 지점과 같다. 또 2번 함수의 끝나는 시점이 3번 함수의 시작 지점과 같다. 반면 Async는
여기서 sync와 async의 차이점이 나오는 것이다.
Sync라는 것은 이전 함수가 끝나는 시점과 다음 함수가 시작하는 시점을 맞춘다는 것이고, 그렇기 때문에
- 차례대로 진행될 수 밖에 없고,
- 하나의 함수가 진행되는 동안에는 다른 함수는 진행될 수 없는 것이다.
왜? 한 함수의 끝나는 시점과 다른 함수의 시작 시점이 맞아야 하기 때문에.
이제서야 우리가 처음에 살펴본 Synchronous의 "동시에 발생하는"이란 뜻의 의미를 알 것 같다.
즉, Sync는 이전 함수의 끝과 다음 함수의 시작이 "동시에 발생하는" 코드를 의미한다.
그래서 Sync는 마치 계주 달리기와 같다. 한명의 주자가 한바퀴를 돌고 와서 그 다음 주자에게 바톤을 줘야 달릴 수 가 있다. 바톤을 건네주는 시점, 그 시점이 바로 이전 주자의 경기가 끝나고 다음 주자의 경기가 시작되는 시점이라고 말할 수 있고, 그것이 동시에 일어나는 코드가 Sync하다고 말하는 것이다.
3. async, a만 붙었는데 뭐가 다른거지
먼저 async의 사전적 의미는 아래와 같은데,
이는 sync에 접두사 a만 붙게 된 것이다. 접두사 a의 기능은 아래와 같다.
즉, async는 접두사 a가 붙은 탓에 sync의 반대의미인 시간을 맞추지 않는 것을 의미한다.
앞서 말했던 것 처럼, 시간을 맞춘다는 건 함수들간의 시작과 끝을 맞춘다는 의미이다. 그런 의미에서 위 그림을 다시 보면, Asynchronous에서는 함수들간의 시작과 끝이 맞지 않다. 즉 1번이 시작되고 끝나기전에 2번이 실행되었으며, 2번이 끝나기도 전에 3번이 실행 될 수 있는 것이다.
즉, async라는 것은 이전 함수가 끝나는 시점과 다음 함수가 시작하는 시점을 맞추지 않는 것이고, 그렇기 때문에
- 함수가 차례대로 진행되지 않을 수 있고
- 하나의 함수가 진행되는 동안에는 다른 함수 또한 진행 할 수 있게 되는 것이다.
4. 마무리
- sync
- 동기적
- 시간을 맞춘다
- 함수간의 시작과 끝을 맞춘다
- 차례대로 진행한다
- 한 함수가 끝나야 다음 함수가 진행 할 수 있는 구조
- sync
- 비동기적
- 시간을 맞추지 않는다.
- 함수간의 시작과 끝을 맞추지 않는다.
- 차례대로 진행하지 않는다.
- 한 함수가 끝나지 않아도 다른 함수를 실행 할 수 있다.
-끝-
[출처]
https://velog.io/@codemcd/Sync-VS-Async-Blocking-VS-Non-Blocking-sak6d01fhx (Sync VS Async, Blocking VS Non-Blocking)
