동기와 비동기
동기는 직렬적으로 진행됨을 의미하고,
비동기는 병렬적으로 진행됨을 의미한다.
동네에 카페가 두 군데 있다고 가정해 보자.
바쁜 점심 시간의 동기 Cafe...
동기 카페에서는 사장님이 혼자서 모든 일을 도맡아 하신다.
가게 오픈 후 네 명의 손님이 왔다.
첫 손님 a
두번째 손님 b
세번째 손님 c
네번째 손님 d
사장님은 일을 시작했다...
동기 카페는 아마 조만간 파리만 날리게 될 것 같다.
동기 카페 사장님은 동기적으로 일을 하고 있다.
a의 주문과 음료받기가 끝나고 나서야 비로소 b가 주문을 할 수 있다.
동기(synchronous)는 현재 작업의 응답 시기와 다음 작업의 요청 시기가 같다는 뜻이 된다. 즉, 현재 작업이 끝남과 동시에 다음 작업이 시작된다는 뜻이다.
이렇게 일이 동기적으로 진행되면,
하나의 일이 끝나고 나서 비로소 다른일이 시작되기 때문에,
모든 일을 처리하는데 시간이 오래 걸린다.
그래서 가장 나중에 온 d 손님은 a,b,c 손님을 기다리다가 화나서 떠나버렸다...
이것은 웹에서도 똑같이 적용이 된다.
만약 어떤 앱을 사용하는데, 서버에서 데이터를 가져오는 작업이 동기적으로 처리된다면 어떻게 될까?
앱 내에서 어떤 영상의 재생 버튼을 클릭하면, 클릭한 영상의 로딩이 완료될 때까지 아무 동작도 할 수 없다.
다른 영상을 클릭하거나 검색을 하려면 로딩이 끝날때까지 기다려야 한다....
이런 상황이 발생한다면 사용자 경험에 별로 좋지 않은 영향을 끼칠 것이고, 사용자는 그 앱을 다시 사용하고 싶지 않을 것이다.
그렇다면 효율적으로 카페를 운영하고, 효율적인 앱을 만드는 방법은 무엇일까?
처음에 언급한 동기 카페의 길 건너 맞은편에는 비동기 카페가 있다.
바쁜 점심시간의 비동기 Cafe...
비동기 카페에는 직원이 여러명이다.
한 명은 주문을 받고, 여러명이 그룹을 나눠서 음료제조와 음료전달을 한다.
손님 a,b,c,d 네 명이 비동기 카페에 왔다.
직원들은 각자 맡은 일을 시작했다.
비동기 카페는 비동기적으로 일이 진행된다.
a의 주문을 받고 음료를 제조하고 전달하는 동안, 다른 사람들의 주문을 받을 수 있다. d의 대기 시간을 보면, 동기카페에서에 비해 1/3 수준으로 감소했다는 것을 볼 수 있다.
비동기적인 처리 방법이 훨씬 효율적이라는 것을 알 수 있다.
이번엔 d가 화나지 않고 음료를 잘 받아간 것 같다.
웹에서도 이렇게 비동기적으로 처리되어야 하는 일들이 있다.
- 백그라운드 실행, 로딩 창 등의 작업
- 인터넷에서 서버로 요청을 보내고, 응답을 기다리는 작업
- 큰 용량의 파일을 로딩하는 작업
위 작업들은 보통 헤비하다. 이런 헤비한 작업들이 처리되는 데에는 시간이 걸리는데, 사용자는 그 시간을 모두 기다려줄 수 없다.
위 작업이 처리되는 동안 사용자는 버튼을 누르고 싶고, 검색도 하고 싶고, 여러 다른 동작들을 하길 원한다.
그렇기 때문에 위 작업들이 비동기적으로 처리되어야 하는 것이다.
보통 위와 같은 일을 처리하는 코드는 javascript에서 자동으로 비동기적으로 실행된다. 그런데, 비동기적으로 처리되어야 하는 일들 내에서 동기적으로 처리되어야 하는 일들이 생기기도 한다.
예를 들면, 사용자의 아이디와 비밀 번호를 받는 경우가 있다. 사용자의 비밀번호와 아이디를 받아서, 저장되어 있는 정보를 가져와서 사용자에게서 받은 정보와 일치하는지 확인하고, 일치하면 일치 확인 메세지를 띄우고, 불일치하면 에러 메세지를 띄우는 일이 있을 수 있다. 이러한 일은 순서대로 수행되어야 하는 일이다.
이럴때는 필요한 곳에 callback / promise / async & await 를 사용하여 비동기적인 코드를 동기적으로 진행되도록 해주면 된다.
자료출처:
