동기? 비동기?

김하영·2022년 10월 30일
0

Javascipt

목록 보기
2/11
post-thumbnail

동기(Synchronous)와 비동기(Asynchronous)

  • 동기 방식은 서버에서 요청을 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있다. 즉 A 작업이 모두 진행 될 때까지 B 작업은 대기해야 한다.

  • 비동기 방식은 반대로 요청을 보냈을 때 응답 상태와 상관없이 다음 동작을 수행할 수 있다. 즉 A 작업이 시작하면 동시에 B 작업이 실행된다. A 작업은 결과값이 나오는대로 출력된다.

동기적 처리 (Synchronous)

console.log('1st');
console.log('2nd');
console.log('3rd');

위 코드의 결과는

'1st'
'2nd'
'3rd'

1st, 2nd, 3rd가 차례대로 찍히는 것을 볼 수 있다.
이처럼 코드가 위에서부터 아래로 차례대로 실행되는 방식을 동기적 처리라고 한다.

비동기적 처리 (Asynchronous)

console.log('1st')
setTimeout(() => {
	console.log('2nd')
}, 0)
console.log('3rd')
setTimeout()

메소드를 사용했다.

이 코드의 결과는

1st
3rd
2nd

장단점

동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,

비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

profile
호기심 많은 프론트엔드 주니어 💡

0개의 댓글