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

37일차 <add_item_to_cart 타임라인 그리기>

이제 다이어그램을 그리기 위한 세 단계를 모두 살펴봤다. 다시 원점으로 돌아와 add_item_to_cart 메서드의 타임라인 다이어그램을 만들어보자.

 

# add_item_to_cart

add_item_to_cart은 위 그림에서 볼 수 있듯, 총 13개의 액션으로 이루어져있다. 다이어그램을 그리기 위한 세 단계를 다시 상기해보면 아래와 같다.

 

1. 액션을 확인한다.
2. 각 액션을 그린다.
3. 단순화 한다.

이제 세 단계에 따라 다이어그램을 그려보자.

1. 액션을 확인한다.

이미 우리는 위 그림에서는 총 13개의 액션이 확인했다. 다음 단계로 넘어가자.

2. 각 액션을 그린다.

위에서 액션을 확인했다. 그리고 ajax는 타임라인을 빼내서 다이어그램을 그리므로 아래와 같이 총 세계의 타임라인, 13개의 액션을 그리면 된다.

 

3. 단순화 한다.

여기서 단순화 할 때는 코드가 실행되는 플랫폼 정보를 사용해야 하는데, 브라우저에서 동작하는 자바스크립트는 두 단계로 단순화 할 수 있다.

1. 액션을 통합한다.
2. 타임라인을 통합한다.

액션을 통합할 때 순서가 섞이지 않는 액션은 하나의 덩어리로 뭉쳐주면된다. 따라서 아래와 같이 ajax 콜백을 기준으로 뭉쳐서 그리면 된다.

 

마지막으로 타임라인이 끝나는 곳에서 새로운 타임라인이 하나 생긴다면 통합하는데, 각 타임라인의 끝인 cost_ajax, shipping_ajax 호출 직후 타임라인이 생김으로 아래 그림과 같이 통합해 주면 된다.

 

자바스크립트는 단일 스레드를 지원하기에, 특성상 13개의 액션을 하나로 만들고 세 개의 타임라인을 하나의 타임라인으로 단순화 할 수 있다.

---

이렇게 add_item_to_cart 메서드를 타임라인 다이어그램으로 그려보았다. 이제 다이어그램도 그려보았겠다, 제일 처음 제기 됐던 '빠르게 두번 구매버튼 누르기' 에서 발생했던 문제로 돌아가보자.

 

두번 구매버튼을 누르면 다이어그램이 두개 생기게 된다. (다이어그램은 클릭을 나타낸다) 그러나 무조건 두번 째 클릭은 첫 번째 클릭으로 부터의 첫 번째 액션 박스보다는 후에 일어난다.(빛의 속도로 눌린다 하더라도 두 번째 클릭은 첫 번째 뒤에 일어난다는것은 어쩔수 없다!) 따라서 그림을 그려보면 다음과 같다.

 

이 때 알수 있는 점은 점선 아래에 있는 두 타임라인의 이벤트는 실행 순서를 예상할 수 없다.

 

천천히 클릭한다면 정상적으로 첫 번째 클릭의 이벤트가 끝나고 나서 두 번째 클릭 이벤트가 실행 될 것이다. 하지만 빠르게 클릭한다면 다음과 같은 문제가 발생 할 것이다.

 

첫 번째 클릭에서 shipping이 포함된 total을 업데이트 시키고 두 번째 클릭에서 total(4)을 읽고(이때의 total은 첫 번째 클릭이 업데이트한 total을 읽음으로 14이다) 배송비 2달러를 추가함으로써 잘못된 16달러가 도출 된다.

---

이렇게 자원을 공유하는 타임라인이 일으키는 문제를 살펴봤는데, 우리가 살펴본 타임라인 다이어그램의 실행 가능한 순서는 위에서 살펴본것 이외에도 9가지나 더 있다. 

 

위에서 그린 실행순서를 이해하느라 몇번을 읽었는지 모르겠다.. 이상한 코드에는 그만한 책임이 따른다.... 실제에서 저걸 디버깅 하고 있을거라 생각하니 벌써 머리가 아프다..

 

다음 파트에서는 이에 대한 해결책을 제시하는듯 하니 어서 빨리 읽어보고 싶다.