동기, 비동기란?

---

동기(Synchronous)

동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다.

 

순서대로 하나씩 작업을 처리할 수 있는 방식을 말하는 것이다.

 

 

🤔 : 동기는 동시에 일어나는 이라는 의미를 갖고있어.

 

 

 

비동기 (Asynchronous)

비동기방식은 반대로 요청을 다른 작업을 하는 와중에 다음 동작을 수행할 수 있다. 

 

첫번째 작업이 수행되고 응답을 기다리는동안 뒤의 동작을 먼저 실행하여 동시에 작업을 처리할 수 있는 방식이다. 

 

 

🤔 : 비동기는 동시에 일어나지 않는 이라는 의미를 갖고있어.

 

 

 

🙋‍♂️ 여기서 잠깐.

동기는 동시적으로 일어나는 뜻, 비동기는 동시에 일어나지 않다는 뜻.

이상하게 들릴 수 있지만

여기서 말하는 동시는 작업의 요청과 결과가 동시에 나오느냐 마느냐 에 초점을 두고 있다.

 

왼쪽은 동기방식, 오른쪽은 비동기 방식이다.

 

한눈에 봐도 두 방식의 차이점이 쉽게 파악된다. 

 

하지만 모든 프로그래밍 기술에는 장단점과 쓰이는 점이 다르기 때문에 존재한다. 

 

차이점을 파악해보자.

 

 

---

동기, 비동기 차이점

 

동기 방식의 장단점

• 장점 : 설계가 간단하고, 직관적이다.
• 단점 : 요청에 대한 결과가 반환되기 전까지 대기해야해 런타임이 길어진다.

 

비동기 방식의 장단점

• 장점 : 요청에 대한 결과가 반환되기 전에 다른 작업을 수행할 수 있어서 자원을 효율적으로 사용할 수 있다.
• 단점 : 동기 방식보다 설계가 복잡하고, 논증적이다. 

 

 

비동기 예시

비동기적 처리는 통신을 할 때 주로 사용되는데, 요청을 보내고 응답이 오기까지 기다리지 않고 다른 작업을 먼저 수행할 때 사용된다. 

 

그외에도 주로 사용되는 개념이지만 코드를 짤 때 제대로 살펴보고 간단한 예시먼저 들어보자.

 

 

setTimeout(() => {console.log("1번")}, 5000);
setTimeout(() => {console.log("2번")}, 3000);
setTimeout(() => {console.log("3번")}, 1000);
console.log("4번")

 

이렇게 사용한다면 동기적으로 처리한다면 9초가 걸려 4개가 출력되지만, setTimeout은 비동기 함수이므로, 해당 코드는 비동기적으로 실행되게 된다. 

 

 

지금 바로 F12키를 눌러 개발자 창의 콘솔탭에서 코드를 복붙 해보자. 

 

다음과같이 4번이 먼저 출력되고, 역순으로 출력되는 모습을 볼 수 있다. 

 

비동기함수인 setTimeout으로 동시 작업을 통한 출력을 해주었기 때문이다. 

 

 

 

 

---

🔗 참고

 

https://velog.io/@daybreak/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC

동기, 비동기 처리

https://velog.io/@songyi7091/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0

Javascript : 동기 비동기 개념과 예시