[JavaScript] 동기, 비동기 처리

1. 동기(Synchronous)

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

2. 비동기(Asynchronous)

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

3. 비동기처리의 필요성

• 웹 페이지의 반응성 향상 : 요청 작업이 완료되기 까지 기다리는 것은 사용자 경험을 저해시키기 때문에, 비동기 처리를 통해 사용자의 요청에 빠르게 반응할 수 있도록 해야한다.
• 네트워크 통신 : 웹 애플리케이션에서는 서버와의 데이터 통신이 필요하다. 동기적 처리를 하면 응답을 기다리는 동안 다른 작업을 수행할 수 없기 때문에 웹 페이지의 반응성이 떨어진다.
• 병렬 처리 : 비동기 처리를 통해 여러 작업을 동시에 처리할 수 있다.
• 에러 처리 : 비동기적 처리 시 에러가 발생하면 해당 에러를 쉽게 처리할 수 있다. 에러를 처리할 수 있는 콜백 함수를 실행하거나, 에러를 캐치하여 처리할 수 있어 프로그램의 안정성을 높일 수 있다.

4. async 와 await

• async는 함수의 앞에 붙여 비동기 함수임을 나타낸다.
• await는 비동기 함수의 실행 결과를 기다리는 키워드이다.

5. 콜백 지옥

• 비동기 프로그래밍 시 발생하는 문제로, 함수의 매개 변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상을 말한다.
• promise 나 async&await를 사용해서 해결한다.

6. 참조

1)https://trustmitt.tistory.com/85

async / await 개념 정리 (Feat. 동기, 비동기)

2)https://velog.io/@seul06/JavaScript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5