Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김동규] 챕터 15: 타임라인 격리하기 #74

Merged
merged 1 commit into from
Jul 30, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions 챕터_15/김동규.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
# 챕터 15: 타임라인 격리하기

#스터디-쏙쏙들어오는함수형코딩

## 이번 장에서 살펴볼 내용

- 코드를 타임라인 다이어그램으로 그리는 방법을 배우기
- 버그를 찾기 위해 타임라인 다이어그램 보는 법을 이해
- 타임라인끼리 공유하는 자원을 줄여 코드 설계를 개선하는 방법을 알아보기

## 두 가지 타임라인 다이어그램 기본 규칙

- 두 액션이 순서대로 나타나면 같은 타임라인에 넣습니다.
- 두 액션이 동시에 실행되거나 순서를 예상할 수 없다면 분리된 타임라인에 넣습니다.
이 규칙을 적용해서 다이어그램을 그리면 시간이 지남에 따라 코드가 어떻게 실행 되는지 이해할 수 있습니다.

## 자세히 보면 놓칠 수 있는 액션 순서에 관한 두 가지 사실

- ++ 와 +=는 사실 세 단계 입니다.
- 인자는 함수를 부르기 전에 실행합니다.

## 타임라인 다이어그램으로 순서대로 실행되는 코드에도 두 가지 종류가 있다는 것을 알 수 있습니다

- 순서가 섞일 수 있는 코드
- 두 액션 사이에 시간은 얼마나 걸릴지 알 수 없다.
- 순서가 섞이지 않는 코드
- 두 액션사이에 다른 작업이 끼어들지 못한다.

## 타임라인 다이어그램으로 동시에 실행되는 코드는 순서를 예측할 수 없다는 것을 알 수 있다.

여러개의 타임라인은 시간에 따라 다양한 방식으로 실행 될 수 있다. 타임라인이 실행 가능한 방법을 “가능한 순서”라고 한다.

## 좋은 타임라인 원칙

- 타임라인은 적을수록 이해하기 쉽다
- 타임라인을 짧을수록 이해하기 쉽다
- 공유하는 자원이 적을수록 이해하기 쉽다
- 자원을 공유한다면 서로 조율해야한다.
- 시간을 일급으로 다룬다.

## AJAX와 이벤트 큐

자바스크립트에서 AJAX를 사용하는 부분은 비동기이다. 네트워트 환경은 예측할 수 없기 때문에 응답은 요청 순서대로 오지 않는다.
콜백을 통해 요청에 대한 응답과 에러 처리를 진행한다.

## 타임라인 단순화 하기

플랫폼의 스레드 모델에 따라 다이어그램을 단순하게 만드는 것 이다. 자바스크립트의 단순화하는 단계는 두 단계로 정리할 수 있다.

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

## 자원을 공유하는 타임라인은 문제가 생길 수 있습니다

공유하는 자원을 업애 문제를 해결할 수 있다.

## 전역변수를 지역변수로 바꾸기

전역변수중에 지역변수로 바꿀 수 있는 것을 찾아 바꾸기.

## 전역변수를 인자로 바꾸기

암묵적 인자를 확인하고 바꾸기

## 재사용하기 더 좋은 코드로 만들기

함수 본문을 콜백으로 바꾸기 리팩토링을 이용하 변경해본다!
Loading