[JavaScript] 자바스크립트 동기와 비동기 / 동기와 비동기 이해하기

※ 본 포스팅은 패스트 캠퍼스 강의를 정리한 내용입니다.

 

---

 

목차

1. 동기 비동기 개념 이해

동기와 비동기란?

동기와 비동기 차이

언제 쓰이는가?

비동기를 사용하는 이유

2. 동기 비동기 원리

 

---

 

---

동기, 비동기의 개념 정확히 이해해야 프로그램 개발 시 적절히 활용할 수 있다.

자바스크립트로 프로그램 개발 시 한 번쯤은 들어봤거나 사용해 본 경험이 있을 것이다.

동기 : 답변을 기다린다.
비동기 : 답변을 기다리지 않는다. 동시에 실행된다.

동기는 답변을 기다리는 것이고 비동기는 동시에 실행한다거나 답변을 기다리지 않는다고 알고 있을 것이다.
하지만 그렇지 않다.

 

택배 기사님이 물건을 배송한다.
기사님이 배송해야 할 물품은 3개이다.
3개의 집에 택배를 배송해야 한다.
이때 동식과 비동기식의 방식이 나타난다.

 

[ 동기식 ]

택배를 1호에 가져다주기 위해 1호에서 벨을 누르고 사람이 나올 때까지 기다린다.
물건을 받을 때까지 기사님은 아무 일도 하지 않는다.

 

받는 사람이 물건을 받았다고 답변하면 2호에 가서 벨을 누르고 기다리고 있다.

이것이 동기식 업무이다.

 

 

[ 비동기식 ]

택배와 함께 1호로 간다. 받는 사람의 벨을 누르고 받는 사람의 답변을 듣지 않고 다음 호수로 간다.

이것이 비동기식 업무이다.

 

---

[ 동기와 비동기의 차이 ]

동기식으로 배달하는 것과 비동기 식으로 일하는 것을 보면 비동기식으로 일을 하는 것이 효율적인 것을 알 수 있다.
‘나’라는 자원을 효율적으로 쓴다. 하지만 비동기처럼 일하면 물건을 받았는지 안 받았는지 확인을 할 수 없다.
배송을 했는데 받는 사람이 택배를 받지 못했다고 하면 문제가 된다.
이런 문제를 해결하기 위해 비동기식으로 일을 하되 확인할 수 있도록 배송 도착 사진을 받는 사람에게 전송한다.

비동기로 일하면 효율적이지만 업무 프로세스가 복잡해진다.

 

	동기( Synchronous )	비동기(Asynchronous)
장점	업무가 단순하다.	업무 효율이 좋다.
단점	업무 효율이 비효율적이다.	업무가 복잡하다.

---

[ 언제 쓰이는가 ]

• Blocking : 동기식에서 답변이 올 때까지 기다리는 상태
• Non-Blocking : 비동기식에서 답변이 올 때까지 기다리지 않는 것

동기, 비동기는 어떤 상황이냐에 따라 선택한다.

동기 : 어떤 일을 수행한 결과로 다음 일을 수행할 때

심부름을 하고 간식을 사 먹으려면 심부름을 하고 남은 돈이 있어야지 간식을 사 먹을 수 있다.

 

프로그램 개발 시 함수를 호출한다.

함수 A()는 다음과 같다.

const money = 10000
function A(){
	const result = money - 6000
	return result
}

const a = A() 로 A()를 호출한다면 함수 A() 리턴 값은 a에 값이 저장된다.(=응답을 줄 수 있다.)

이렇게 일을 수행한 후 return을 받아 이 함수를 실행하는 결괏값까지 나오기를 기다리는 것을 동기식이라고 한다.

 

A 계좌에서 만 원 인출 프로그램을 실행시킨 뒤 바로 B 계좌에 바로 송금하면 안 된다.

인출과정에서 잔액부족, 올바르지, 않은 계좌, 은행점검, 시간과 같은 오류가 발생했을 수 있기 때문이다.

결과적으로 성공적이 여야지만 기술함수를 호출된다.

const money = 10000
function B(){
	console.log("b")
}
const a = setTimeout(function A(){
    const result = money - 10000
    console.log("a")
    return result
},0);
const b = B()

함수 A()를 호출한다.

A()로 가기만 한다. 실행은 하지 않고 다음함수인 B() 함수로 간다.

다음함수로 가게 되면 A()함수에 대한 결괏값과 A() 함수가 끝났다는 것을 어떻게 알고 A() 함수에서 B() 함수로 넘어갈 때B()에서 A() 함수를 다시 사용해야 하는 경우가 있다.

A()에 대한 결과를 받아주는 callback 함수로 값이 들어온다.

함수 A()호출만 하고 다음으로 넘어가 진행하면서 남아있는 함수들 중에callback 함수가 있고 callback 함수로 호출되어 마무리된다.

---

[비동기를 사용하는 이유]

쿠팡의 과일 구매 목록이다.

만약 이 화면이 동기적으로 실행된다면 과일 목록들을 불러오기 전까지 아무런 웹의 기능을 사용할 수 없다.

과일 목록들을 불러오고 있는데 그때 메뉴를 누를 수 있는 이유는 비동기로 실행되기 때문이다.

리스트가 로딩중이어도 동기적으로 실행되면 과일 목록들을 불러오는 로딩중일 때 아무런 행동을 할 수 없다.

그렇기 때문에 비동기식으로 과일 목록을 불러와야 한다.

 

 

 

https://devyihyun.tistory.com/160

[JavaScript] 자바스크립트 동기와 비동기 / 동기와 비동기 원리

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

 

https://youtu.be/U42qWURR6Gw?si=huP_sejMjPm3qVyJ

 

'이미지: flaticon.com'. 이 커버는 Flaticon.com의 자료를 사용해 디자인되었습니다