쏙쏙 들어오는 함수형 코딩 35일차

35일차 <타임라인 격리하기>

이번 파트는 아래와 같이 메서드의 실행을 타임라인으로 그리는 법과 비동기 문제에 대해서 설명한다.

 

저자가 드는 예시로 쇼핑몰 사이트에서 상품 구매버튼을 빠르게 두번 클릭하면, 표시되는 금액이 제 멋대로라는 것이다. 4달러 짜리 두개를 사면 배송비(2달러) 포함 10달러가 되어야하지만 12달러, 8달러 등 잘못된 금액이 도출 된다는 것이다.

아래 그림은 사용자가 구매버튼을 두번 클릭했을 때를 타임라인으로 옮겼을 때이다.

 

이번 파트에서는 위에서 언급한 문제를 해결하는 방법에 대해서는 설명하고 있지 않다. 아마 내일 아니면 모레 파트에서나 설명할 것으로 보인다. 오늘 파트는 타임라인을 그리는 법에 대해서만 설명한다.  그래서 타임라인 그리는 대략적인 방법을 리뷰해보겠다.

 

# 타임라인 작성요령

1. 우선 액션은 네모 상자에 담긴다. '사용자 클릭', 'cart읽기', '쓰기',  DOM 업데이트... 등등 이 담길수 있다.
2. 그리고 T자 모양의 세로선은 타임라인을 의미하는데, 액션의 실행 순서를 그린다. 실행 순서를 알 수 없거나 동시에 실행 된다면 옆에 다른 타임라인을 그린다. 
3. 비동기 호출은(위 그림에서는 _ajax가 붙은 액션) 새로운 타임라인으로 그린다. 그리고 콜백이 특정 순서 뒤에 실행됨을 표시 하기위해 점선으로 그린다.
4. 그리고 순서가 섞일 수 있는 액션은 상자를 나눠서 그리지만(ex: [사용자 클릭] => [cart읽기, 쓰기, 읽기 cost_ajax] => ...) 실행 순서가 섞이지 않는 액션은 한 상자에 모두 넣는다.(ex: [cart읽기, 쓰기, 읽기 cost_ajax])
5. 마지막으로, 동시에 실행되는 코드는 타임라인에 나란히 작성하며, 실행 순서를 알 수 가 없다.

---

이렇게 타임라인 작성요령에 대해서 간략히 알아봤다. 전에 동시성에 대해서 공부하면서 저런 타임라인들으 몇번 봐본적이 있다. 때문에 오늘 파트를 이해하는데 처음 배웠던 것에 비해 수월하게 배울수 있었다.

 

비동기는 액션을 기다릴 필요를 없애주지만 실행 시점을 알 수 없다는 단점을 갖는다. 이렇게 타임라인을 그리는 것을 통해서 비동기 동작을 좀더 예측할 수 있게 해주는것 같다. 쇼핑몰, 예매 사이트 등 타임라인을 격리 시키는 것은 매우 중요하기 때문에 더 집중해서 읽어야 겠다.