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

36일차 <타임라인 단순화하기>

타임라인 다이어 그램은 총 세단계로 그릴 수 있다.

 

1. 액션을 확인한다.2. 순서대로 실행되거나 동시에 실행되는 액션을 그린다.

3. 플랫폼에 특화된 지식을 사용해 다이어그램을 단순하게 만든다.

 

지금까지 1, 2단계는 확인했다. 오늘은 3단계 다이어그램을 단순하게 만드는 방법을 보자.

 

우선 2단계까지 그린 다이어그램, 코드, 액션을 확인해보자.

 

# 예시 코드

saveUserAjax(user, function() {
  setUserLoadingDOM(false);    
}
setUserLoadingDOM(true);
saveDocumentAjax(document, function() {
  setDocLoadingDOM(false);    
}

 

 

# 액션

1. saveUserAjax()
2. setUserLoadingDOM(false)
3. setUserLoadingDOM(true)
4. saveDocumentAjax()
5. setDocLoadingDOM(false)
6. setDocLoadingDOM(true)

# 타임라인 다이어그램

 

이제 단순화시키는 작업이 남았다. 이에 저자는 플랫폼에 특화된 지식을 통해서 단순화시킨다고 했는데, 우리는 자바스크립트의 비동기 콜백에 특화되도록 단순화 시키면 된다. 자바스크립트의 비동기 콜백의 경우, 다음 그림과 같이 네트워크 엔진이 처리하기위해 AJAX 요청을 요청 큐에 집어넣는다.

 

이때 중요한 점은 AJAX 요청 콜백은 작업 큐에 있는 작업이 처리되고 때가 되면 실행된다는 점이다.

 

이 점을 기억하면 타임라인을 단순화 할수 있다.

 

다시 예제 코드를 들고와서 타임라인 다이어그램을 단순화 시켜보자.

saveUserAjax(user, function() {
  setUserLoadingDOM(false);    
}
setUserLoadingDOM(true);
saveDocumentAjax(document, function() {
  setDocLoadingDOM(false);    
}

 

자바스크립트의 특성을 고려하여 단순화 할 때는 두 단계로 정리할 수 있다.

1. 하나의 타임라인에 있는 모든 액션을 하나로 통합한다.
2. 타임라인 끝나는 곳에서 새로운 타임라인이 하나 생긴다면 통합한다.

첫번째 단계는 자바스크립트가 비동기 콜백은 load 이벤트가 끝나고 나서 동작하므로 우선 작업 큐에있는 작업들이 우선된다. 때문에 비동기 콜백을 제외하고 나머지 액션들이 주루룩 호출 된다는 것이다.

 

그림을 보면 다음과 같이 그릴 수 있다.

 

그리고 두번째 단계 '타임라인이 끝나는 곳에서 새로운 타임라인이 하나만 생긴다면 통합한다' 는, 이 예제가 첫 번째 타임라인이 끝나는 곳에 새로운 타임라인 두 개가 생기기 때문에 해당되지 않는다.

---

타임라인 다이어그램 그리는 방법을 공부하면서 자바스크립트 플랫폼에 대해서도 공부하게 된다. 싱글 스레드, 비동기 콜백, 네트워크 엔진 등, 단순히 방법론만 배우는 것이 아니라 이와 연관된 지식도 같이 배울 수 있어 더욱 좋은 기회라 느꼈다.