3월 기술면접대비 - Async/Await 와 Promise ( feat. 동기와 비동기 )

 

 

 

동기와 비동기

 

동기는 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것입니다.

비동기는 반대로 어떠한 요청을 보내면 응답에 관계없이 바로 다음 동작이 실행되는 방식입니다.

 

그렇다면 비동기 작업은 왜 필요할까?

만약에 어떤 페이지가 로딩되는 데 시간이 오래 걸리게 된다면 사용자가 이탈하게 되므로 비동기적으로 동작할 수 있게 하는 게 좋습니다.

 

 

JS는 동기식 언어이다.

JS는 한 번에 하나의 작업을 수행합니다. 이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 릅니다.

JS는 콜스택( Call Stack )과 메모리힙( Memory Heap )이라는 메모리 구조를 통해 데이터 및 코드 실행을 관합니다.

 

JS 엔진의 주요 구성 요소
1) Memory Heap : 메모리 할당이 일어나는 곳
2) Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

 

자바스크립트에서 함수를 호출하면 Call Stack이라는 곳에 호출 순서대로 차곡차곡 쌓인다
Stack은 맨 마지막에 호출된 함수가 맨 먼저 반환

List in Frist Out, 먼저 들어온 것이 먼저 나간다라는 의미로, LIFO 구조라고 부른다.

 

Async/Await 와  Promise

 

Async/Await와 Promise의 주요 차이점 중 하나는 문법적인 차이입니다. 
Promise는 .then(), .catch()와 같은 메서드를 사용하여 비동기 작업을 처리하고, 콜백 함수를 전달하는 방식으로 동작합니다. 
반면에 Async/Await는 async 함수 내에서 await 키워드를 사용하여 동기적인 코드와 유사한 방식으로 비동기 작업을 처리합니다. 이로 인해 코드가 더 읽기 쉽고 직관적으로 보입니다.
또 다른 중요한 차이점은 에러 처리 방법입니다. Promise의 에러 처리는 .catch()를 사용하여 처리하며, 여러 Promise 체인에서 오류를 추적하기 어려울 수 있습니다. 
반면에 Async/Await는 `try-catch` 블록을 사용하여 에러 처리를 보다 직관적으로 수행할 수 있어 오류 추적과 디버깅이 용이합니다.
또한 Async/Await는 코드의 가독성과 유지보수성을 향상시킬 수 있는데, 동기적인 코드와 유사한 구조를 사용하므로 코드를 이해하고 유지보수하는 것이 더 쉽습니다. 이러한 이유로 Async/Await는 보다 간결하고 읽기 쉬운 코드를 작성하는 데 도움이 됩니다.

 

 

 

 

 

 

 

 

 

 

 

자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?

https://ljtaek2.tistory.com/142

JavaScript engine & 작동 원리

https://velog.io/@kirin/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84JavaScript-engine