[Front-end] 개발자 공부

[개발 공부 98일차] 함수형 코딩 | 타임라인 다이어그램

MOLLY_ 2024. 9. 21. 02:42
728x90

< 목차 >
0. TL;DR
1. 타임라인 다이어그램 | 기본 규칙
2. 타임라인 다이어그램 | 좋은 타임라인의 원칙
3. 타임라인 다이어그램 | 타임라인 단순화
4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결
 
 

0. TL;DR

  1. 타임라인 다이어그램: 코드가 순서대로 실행되는지 or 동시에 실행되는지 알림
    1. 자원을 공유하는 부분: 버그 발생 확률이 높음
    2. 자원을 공유하지 않는 부분: 독립적으로 이해하고 실행 가능
  2. 타임라인 다이어그램의 기본 규칙
    1. 두 액션이 순서대로 나타나면 같은 타임라인에 넣음
    2. 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음
  3. 좋은 타임라인의 원칙
    1. 타임라인이 ‘적을수록’ 이해하기 쉬움
    2. 타임라인이 ‘짧을수록’ 이해하기 쉬움
    3. 공유하는 자원(e.g. 변수)이 적을수록 이해하기 쉬움
    4. 자원을 공유한다면 서로 조율해야 함
    5. 시간을 일급으로 다룸

 
 

1. 타임라인 다이어그램 | 기본 규칙

타임라인: 동시에 실행될 수 있는 순차적 액션
서로 다른 타임라인에 있는 액션은 끼어들 수 있어서 여러 개의 실행 가능한 순서가 생긴다.
 

  1. 두 액션이 순서대로 나타나면 같은 타임라인에 넣음
  2. 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음

 

 
콜백 안에 있는 코드만 새로운 타임라인으로 빼고 타임라인을 그리면 된다. 들여쓰기로 이해하면 좀 더 쉽다.
 
이러한 타임라인 다이어그램의 순차적으로 실행되는 코드에도 2가지 종류가 있다.

  1. 순서가 섞일 수 있는 코드: 여러 스레드에서 동시에 수행되는 경우에 발생하며, 두 액션 사이에 시간은 얼마나 걸릴지 알 수 없음 ⇒ 순서 예측 불가
  2. 순서가 섞이지 않는 코드: 런타임이 해주거나 프로그래밍을 잘해서 만들 수 있음 (다른 작업이 끼어들 수 없음)

 
 

2. 타임라인 다이어그램 | 좋은 타임라인의 원칙

실행해야 하는 순서가 많다면, 시스템을 이해하기 어렵다는 것을 잊지 말자.
 

  1. 타임라인이 ‘적을수록’ 이해하기 쉬움
    ⇒ 타임라인이 하나인 시스템이 가장 이해하기 쉬움
  2. 타임라인이 ‘짧을수록’ 이해하기 쉬움
    ⇒ 타임라인의 단계를 줄이자
  3. 공유하는 자원(e.g. 변수)이 적을수록 이해하기 쉬움
    ⇒ 서로 자원을 공유하는 액션을 주의깊게 봐야 함
  4. 자원을 공유한다면 서로 조율해야 함
    ⇒ 타임라인은 공유 자원을 안전하게 공유할 수 있어야 함. ‘안전하게 공유한다’는 말은 올바른 순서대로 자원을 사용하고 돌려준다는 것이고, ‘조율’은 올바른 결과를 주지 않는 실행 순서를 없애는 것
  5. 시간을 일급으로 다룸
    ⇒ 타임라인을 다루는 재사용 가능한 객체를 만들면 타이밍 문제를 쉽게 만들 수 있음

 
 

3. 타임라인 다이어그램 | 타임라인 단순화

 
타임라인이 통합되는 경우는 다음과 같다.
 

 
 
 

4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결

이 챕터의 초반에 등장하는 예제에서 나온 버그는 ‘고객이 상품 구매 버튼을 빠르게 여러 번 클릭했을 때, 장바구니 가격이 잘못 계산되는 것’이었다.

이 문제를 타임라인 다이어그램을 통해 살펴 보니 다음과 같았다.

  1. ‘공유하는 자원(= 전역 변수)’ 때문임을 알게 됨
  2. 전역 변수를 지역 변수로 바꿔서 해결


 
 

728x90