🤔비동기식 처리란?
비동기식 처리는 특정 코드의 연산이 끝나기 전에 다른 코드를 실행시키는 작동시키는 자바스크립트의 특성을 말합니다.
🙉 비유
비동기식 처리는 아래와 같은 상황에 빗댈 수 있습니다.
오늘 내가 해야할 일이 1. 이메일 보내기 2. 이메일 받기 3. 약속 준비하기 라고 합시다.
만약 이것을 동기식 처리(비동기식 처리의 반대)로 진행한다면, 아래와 같이 진행됩니다.
- 이메일을 보낸다
- 이메일 답장이 올 때까지 기다린다.
- 이메일 답장이 오면 그제서야 약속 준비를 시작한다.
굉장히 비효율적이죠? 이메일 답장을 기다리는 것과 약속 준비하는 일은 꼭 그 순서를 지키지 않아도 되기 때문입니다. 만약 이메일 답장이 이틀 지나서 오게 된다면, 더 이상 약속을 준비하는게 의미가 없어지게 됩니다.
그럼 비동기식 처리로 진행한다면 어떻게 할 수 있는 걸까요?
- 이메일을 보낸다.
- 이메일이 올 때까지 기다리면서, 약속 준비를 한다.
- 약속 준비를 하다가 이메일이 오면 이메일을 받는다.
- 약속 준비를 마저 한다.
비동기식 처리를 이용하면, 이메일 답장을 기다리는 시간을 낭비하지 않을 수 있습니다. 같은 일을 처리하더라도 훨씬 빠르게 처리할 수 있습니다.
👩💻 비동기식 처리와 서버 API 통신
비동기식 처리는 이러한 장점을 가지고 있기 때문에, 서버와 API통신을 할 때 비동기식 처리가 사용됩니다.
클라이언트는 서버에 필요한 정보가 있을 때 요청을 보내게 됩니다. 그럼 서버는 그 요청에 대한 내용들을 찾고, 찾은 정보를 다시 클라이언트로 보내게 됩니다. 그리고 클라이언트는, 서버에 필요한 정보를 보내고 받는 것 이외에도 페이지를 렌더링하는 등의 일을 해야합니다.
만약 이를 동기식 처리로 진행하게 된다면,
- 서버로 요청을 보내고
- 서버에서 정보를 보내줄 때까지 기다린다.
- 서버에서 정보를 보내주면, 그제서야 렌더링을 시작한다.
의 과정을 거치게 됩니다.
이러면 사용자는 빈 페이지를 바라보며 하염없이 기다리게 되겠죠...
그래서 우리는 API통신 시 비동기식 처리를 하게 됩니다.
- 서버로 요청을 보낸 뒤
- 서버로부터의 답변을 기다리는 동안 화면을 렌더링한다.
- 서버로부터 답변이 오면 답변을 받는다.
서버로 부터 정보를 받는데 까지 걸리는 대기시간을 훨씬 효율적으로 사용하게 됩니다. 따라서, 비동기식 처리로 인해 사용자는 렌더링된 페이지를 좀더 빨리 볼 수 있습니다! 사용자가 지루하게 빈화면을 보는 시간을 줄일 수 있는 것이죠😀
어떠신가요, 비동기식 처리의 장점이 잘 느껴지나요?
📌 요약 및 마무리
지금까지 비동기식 처리에 대해 알아보았습니다!
비동기식 처리는 코드 실행을 하는 도중에 다른 코드를 실행할 수 있도록 하는 것을 의미하며, 서버와 API통신에 비동기식 처리를 적용하게 되면, 서버에게 정보 요청을 하는 코드를 실행하는 동안, 렌더링 등의 코드를 실행할 수 있습니다.
제가 말하고자 하는 바가 잘 전달되었길 바라면서 글을 마치겠습니다.
감사합니다!
참고 자료
