728x90
< 목차 >
0. TL;DR
1. 타임라인 다이어그램 | 기본 규칙
2. 타임라인 다이어그램 | 좋은 타임라인의 원칙
3. 타임라인 다이어그램 | 타임라인 단순화
4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결
0. TL;DR
- 타임라인 다이어그램: 코드가 순서대로 실행되는지 or 동시에 실행되는지 알림
- 자원을 공유하는 부분: 버그 발생 확률이 높음
- 자원을 공유하지 않는 부분: 독립적으로 이해하고 실행 가능
- 타임라인 다이어그램의 기본 규칙
- 두 액션이 순서대로 나타나면 같은 타임라인에 넣음
- 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음
- 좋은 타임라인의 원칙
- 타임라인이 ‘적을수록’ 이해하기 쉬움
- 타임라인이 ‘짧을수록’ 이해하기 쉬움
- 공유하는 자원(e.g. 변수)이 적을수록 이해하기 쉬움
- 자원을 공유한다면 서로 조율해야 함
- 시간을 일급으로 다룸
1. 타임라인 다이어그램 | 기본 규칙
타임라인: 동시에 실행될 수 있는 순차적 액션
서로 다른 타임라인에 있는 액션은 끼어들 수 있어서 여러 개의 실행 가능한 순서가 생긴다.
- 두 액션이 순서대로 나타나면 같은 타임라인에 넣음
- 동시에 실행되거나 순서를 예상할 수 없다면, 분리된 타임라인에 넣음
콜백 안에 있는 코드만 새로운 타임라인으로 빼고 타임라인을 그리면 된다. 들여쓰기로 이해하면 좀 더 쉽다.
이러한 타임라인 다이어그램의 순차적으로 실행되는 코드에도 2가지 종류가 있다.
- 순서가 섞일 수 있는 코드: 여러 스레드에서 동시에 수행되는 경우에 발생하며, 두 액션 사이에 시간은 얼마나 걸릴지 알 수 없음 ⇒ 순서 예측 불가
- 순서가 섞이지 않는 코드: 런타임이 해주거나 프로그래밍을 잘해서 만들 수 있음 (다른 작업이 끼어들 수 없음)
2. 타임라인 다이어그램 | 좋은 타임라인의 원칙
실행해야 하는 순서가 많다면, 시스템을 이해하기 어렵다는 것을 잊지 말자.
- 타임라인이 ‘적을수록’ 이해하기 쉬움
⇒ 타임라인이 하나인 시스템이 가장 이해하기 쉬움 - 타임라인이 ‘짧을수록’ 이해하기 쉬움
⇒ 타임라인의 단계를 줄이자 - 공유하는 자원(e.g. 변수)이 적을수록 이해하기 쉬움
⇒ 서로 자원을 공유하는 액션을 주의깊게 봐야 함 - 자원을 공유한다면 서로 조율해야 함
⇒ 타임라인은 공유 자원을 안전하게 공유할 수 있어야 함. ‘안전하게 공유한다’는 말은 올바른 순서대로 자원을 사용하고 돌려준다는 것이고, ‘조율’은 올바른 결과를 주지 않는 실행 순서를 없애는 것 - 시간을 일급으로 다룸
⇒ 타임라인을 다루는 재사용 가능한 객체를 만들면 타이밍 문제를 쉽게 만들 수 있음
3. 타임라인 다이어그램 | 타임라인 단순화
타임라인이 통합되는 경우는 다음과 같다.
4. 챕터 속 예제 에러 & 해결책 | 공유하는 자원 없애 해결
이 챕터의 초반에 등장하는 예제에서 나온 버그는 ‘고객이 상품 구매 버튼을 빠르게 여러 번 클릭했을 때, 장바구니 가격이 잘못 계산되는 것’이었다.
이 문제를 타임라인 다이어그램을 통해 살펴 보니 다음과 같았다.
- ‘공유하는 자원(= 전역 변수)’ 때문임을 알게 됨
- 전역 변수를 지역 변수로 바꿔서 해결
728x90
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 113일차] Map과 Set 딥 다이브 (4) | 2024.10.07 |
---|---|
[개발 공부 107일차] 함수형 코딩 | 타임라인 조율하기 (12) | 2024.09.28 |
[개발 공부 94일차] 함수형 코딩 | 함수형 도구 체이닝 (10) | 2024.09.04 |
[개발 공부 89일차] 함수형 코딩 | 일급 함수 II (3) | 2024.08.28 |
[개발 공부 88일차] 함수형 코딩 | 계층형 설계 II (0) | 2024.08.26 |