동기 VS 비동기

rami·2023년 7월 5일
0

Today I Learned

목록 보기
13/34

📌 비교

동기비동기
실행순차적동시적
이전 작업이 완료될 때까지 다음 작업이 실행되지 않음작업의 완료 여부를 기다리지 않고 다음 작업이 실행됨
코드의 흐름직렬적병렬적
장점간단하고 직관적성능 향상
단점시스템의 성능과 응답성 저하코드의 복잡성과 디버깅의 어려움이 증가
적용작업 간의 의존성과 순서가 중요한 경우I/O 작업이나 네트워크 요청과 같이 시간이 오래 걸리는 작업
종류콜백(Callback) 함수, 프로미스(Promise), 비동기 함수(Async/Await)

📌 비동기방식 종류

1. Callback 함수

함수의 인자로 다른 함수를 전달하고, 비동기 작업이 완료되면 해당 콜백 함수가 호출됩니다.

콜백 함수는 결과 처리를 위해 작성되며, 보통 첫 번째 매개 변수로 에러 정보를 받고, 두 번째 매개 변수부터는 성공적인 결과 데이터를 받습니다.

콜백 함수는 작업을 순차적으로 처리하는 방식으로 코드가 복잡해지고 콜백 지옥(Callback Hell)이 발생할 수 있습니다.

2. Promise

프로미스는 ES6부터 도입된 객체입니다.

프로미스는 대기(pending), 이행(fulfilled), 거부(rejected) 세 가지 상태를 가집니다.

비동기 작업이 완료되면 프로미스는 이행 또는 거부 상태가 되고, 해당 상태에 따라 처리할 수 있는 메서드(then(), catch(), finally())를 제공합니다.

resolve가 호출되면 then이 실행
reject가 호출되면 catch가 실행
콜백 작업을 마치고 무조건 실행되는 finally(생략가능)

프로미스는 콜백 함수를 연속적으로 체인으로 연결하는 콜백 지옥을 피할 수 있도록 하며, 비동기 코드를 보다 구조화하고 가독성 있게 만들어줍니다.

3. 비동기 함수(Async/Await)

ES8부터 도입된 문법입니다.

프로미스(Promise)를 기반으로 한 비동기 코드를 동기적으로 작성할 수 있게 해줍니다.

Async 함수는 비동기 함수를 선언하기 위한 키워드로, 함수 앞에 사용됩니다. Async 함수는 암묵적으로 프로미스를 반환합니다.

Await 키워드는 Async 함수 내에서만 사용될 수 있습니다. 프로미스의 완료를 기다리는 동안 함수의 실행을 일시 중지하고, 프로미스의 결과를 반환합니다.

profile
앞으로 나아가는 사람

0개의 댓글