동기(Synchronous)

동기는 요청을 보낸 후 응답(결과물)을 받아야지만 다음 동작이 이루어지는 방식을 말한다. 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다.

동기적 처리

코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리라고 한다.

비동기(Asynchronous)

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

비동기적 처리

비동기적 코드의 실행 결과는 동기적 코드가 전부 실행 되고나서 값을 반환한다.

1. 첫번째 줄에서 console.log("1st");를 만나고 콘솔에 1st를 찍는다.
2. 두번째 줄에서 setTimeout() 메소드를 만나서 해당 매소드가 비동기적 메소드이기 때문에 이를 처리하는 다른 프로그램에 맡긴다.
3. 그러고 나서 곧바로 console.log("3rd")를 콘솔에 찍는다.
4. setTimeOut() 메소드를 처리하는 프로그램은 비동기적 API를 제외한 모든 코드가 실행 된 이후 결과를 콘솔에 찍는다.

비동기적 처리는 왜 필요한가?

비동기로 처리하지 않고 동기적으로 구성을 하게 된다면 데이터를 받아오기까지 기다린 다음에 앱이 실행될 것이고 서버에 가져오는 데이터 양이 늘어날수록 앱의 실행속도는 기하급수적으로 느려진다. 또한 데이터를 가져오기까지 앱이 대기하는 상태가 발생하게 된다. 이런 불편을 없애기 위해서 데이터를 수신하는 코드는 페이지를 표시하는 코드와는 별개로 비동기적으로 처리해야 한다.

동기는 디자인이 비동기보다 간단하고 직관적일 수 있지만 결과가 주어질 때까지 아무것도 못하고 대기해야하는 문제가 있다. 비동기는 동기보다 복잡하지만 결과가 주어지는데 시간이 걸려도 그 시간 동안 다른 작업을 할 수 있어서 보다 효율적일 수 있다.