44일차 - 비동기

비동기에 대해서 공부했다.

컴퓨터는 충분히 빠르다고 생각해서 비동기의 중요성을 잘 몰랐는데, 예제를 보니 한 번의 중요성이 이해가 됐다.
만약 동영상이 있는 웹페이지를 보려고 할때, 동기적인 페이지라면, 동영상이 로딩될때 까지, 아무 동작도 못하고 기다려야 된다는 것이다.

그래서 비동기를 사용하는데, 위의 예제를 들었을때 큐가 생각 났었다.
큐는 먼저들어온 데이터가 나가지 않으면, 뒤에 들어온 데이터는 먼저들어온 데이터가 나갈때까지 기다리기 때문이다.
비동기는 그러한 동기의 단점을 없애기 위해 사용된다.
유튜브로 치면 동영상의 서비스를 서버의 요청하면서 동시에 옆에 사이드바의 데이터를 서버에 요청해서 동영상이 로딩되기 전에 사이드 바가 로딩 되면서 동영상의 로딩이 되기전에 동작을 제어할 수 있는 것이다.

여기서 나오는 비동기의 단점이 있다. 컨텐츠를 순서대로 나오게 하고 싶어도 만약 A, B, C를 동시에 서버에 요청했을때, A > C > B 순으로 파일이 무겁다고 하면, B -> C -> A 순으로 로딩이 완료될 것이다. 그러면 서비스를 이용하는 사용자 경험이 달라질 수 도 있다.

자바스크립트에서 비동기를 이용할 수 있는 방법은 3가지가 있다.

• Callback을 이용한 방법
• Promise를 이용한 방법
• async/await를 이용한 방법이다.

아래로 갈 수록 상대적으로 간편하고 가독성이 좋다(아래로 갈수록 최근에 나온 방법이기 때문).

캡틴판교 - 비동기
캡틴판교님의 자료가 찾아본 자료 중 가장 잘 정리된 비동기 자료이므로 한 번 읽어보면 도움이 될 것이다.