< 목차 >
0. TL;DR
1. 타임라인 다이어그램 그리는 단계
2. 더 빠르게 동작하는 타임라인
3. 모든 병렬 콜백을 기다리는 Cut(컷)
4. 멱등성*을 적용해, 여러 번 호출하더라도 한 번만 실행되도록
5. 명시적 시간 모델
6. 기타 | 어떠한 응답이 다른 응답보다 가끔 늦어지는 이유?
드디어 쏙쏙 들어오는 함수형 코딩 스터디 마지막이다!
유익한 내용도 꽤 있었지만 설명이 좋지 않아서 이해하는 데 시간이 꽤 걸리기도 하였다. 다음에 읽을 땐 하이라이트 처리한 부분 위주로 읽어야겠다.
스터디 내용은 블로그와 개인 노션에 핵심 정리하며 읽었는데 확실히 큰 도움이 되었다.
이해가 안 되는 부분이나 이해는 되었으나 필자가 제대로 설명하지 못해 헷갈리는 부분은 내 표현대로 다시 개념과 내용을 정립했다. 기억에 오래 남을 것 같고 나중에 필요할 때 떠오를 것 같다.
0. TL;DR
- 타임라인 다이어그램 그리는 단계
- 모든 액션 확인
- 모든 액션 그리기
- 타임라인 단순화
- Cut(컷): 해당 타임라인의 모든 작업이 끝날 때까지 기다렸다가 새로운 타임라인을 시작할 수 있도록 함
- 더 빠르게 동작하는 타임라인
- 응답을 기다리지 않고 요청 먼저 ‘한꺼번에 순서대로’ 함
- 응답 순서가 무작위라서 예상치 못한 에러 발생할 수 있어 Cut을 만들어 해결
- 멱등성*을 적용해, 여러 번 호출하더라도 한 번만 실행되도록 할 수 있음
- 함수가 실행됐는지 boolean 값을 이용해 저장했다가
- 실행한 적이 있으면 return 하도록 코드를 작성하면 된다.
1. 타임라인 다이어그램 그리는 단계
[버그 발생] 장바구니에 제품을 하나만 추가해도 가끔 잘못된 가격의 합계가 표시됨
⇒ 웹 요청에 대한 시간 차이 때문에 발생하는 것! 이 문제의 해결을 위해 타임라인 다이어그램을 그려보자.
(1) 모든 액션 확인
(2) 모든 액션 그리기
(3) 타임라인 단순화
1) 하나의 타임라인 내에서 동기적으로 실행되는 액션은 하나로 ‘통합’한다. 하나의 큐에 추가한다고 이해해도 된다.
2) 타임라인이 끝나는 곳에서 새로운 타임라인이 하나만 생기면 통합한다. 2개 이상 생긴다면 합칠 수 없다. 순서가 보장되지 않기 때문이다.
2. 더 빠르게 동작하는 타임라인
- 장점: 응답을 기다리지 않고 요청 먼저 ‘한꺼번에 순서대로’ 함. 다음 응답을 기다릴 필요가 없어 빠르게 동작
- 단점: 응답 순서가 무작위라서 예상치 못한 에러 발생
⇒ 타임라인을 조율할 수 있는 다른 ‘동시성 기본형’을 만들어, 빠르고 항상 올바른 순서로 동작하게 하여 해결해 보자
3. 모든 병렬 콜백을 기다리는 Cut(컷)
Cut(컷): 같은 시점에서 실행되는 여러 코드가 모두 끝날 때까지 기다림
즉, 해당 타임라인의 모든 작업이 끝날 때까지 기다렸다가 새로운 타임라인을 시작할 수 있도록 함을 의미한다.
비동기적인 코드를 동기적으로 만들어, 순서를 보장해 주는 역할을 한다.
e.g. 현장체험학습 갔을 때, 선생님이 학생들 모두 도착했는지 체크하는 것과 같음
Cut(컷)의 장점
- 컷 앞에 있는 타임라인과 뒷 순서에 있는 타임라인은 서로 섞이지 않기 때문에 따로 분석 가능
- 컷이 실행 가능한 순서를 줄이기 때문에 애플리케이션의 복잡성을 줄임
- 타임라인이 실행되는 순서를 신경쓰지 않아도 되고, 타임라인이 모두 끝나는 것도 쉽게 처리 가능
⇒ 어떤 동작이 먼저 끝나는 타임라인에 의존하는 현상을 방지할 수 있음
Cut() 적용 예시
[중요] Cut(컷)은 항상 ‘타임라인의 끝’에서 불러야 함!
⇒ 모든 코드가 실행된 다음, 컷을 실행해야 순서가 보장되기 때문
컷 실행에 걸리는 시간은,
컷에 해당된 응답들이 실행되는 시간의 ‘최댓값’
4. 멱등성*을 적용해, 여러 번 호출하더라도 한 번만 실행되도록
🍯 멱등성
: 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질
<함수를 여러 번 호출하더라도 한 번만 실행되도록 만들 수 있는 방법>은 무엇이 있을까?
함수가 실행됐는지 boolean 값을 이용해 저장했다가
실행한 적이 있으면 return 하도록 코드를 작성하면 된다.
5. 명시적 시간 모델
함수형 개발자는 필요한 실행 방식에 맞게 새로운 시간 모델을 만들어야 한다.
e.g.
- 비동기 콜백 사용 시, 새로운 타임라인을 만들지 않도록 ‘큐’ 생성
- 여러 번 호출해도 한 번만 실행되도록 ‘boolean과 조건문’ 이용
6. 기타 | 어떠한 응답이 다른 응답보다 가끔 늦어지는 이유?
여러 원인이 있지만 주요한 원인 3가지만 보도록 하자.
- 응답의 크기가 커서 다운로드하는 데 시간이 오래 걸리는 경우
- 다른 응답을 받는 서버보다 해당 응답을 받는 서버의 일거리가 많은 경우
- 이동 중인 상황인 사용자의 기종으로 요청을 보냈을 경우, 기지국이 바뀌는 동안 지연이 생길 수 있음
컴퓨터와 서버 사이의 네트워크 상황은 혼란스럽다. 그래서 언제든 문제가 생길 수 있다.
'[Front-end] 개발자 공부' 카테고리의 다른 글
배포 시, NextUI 적용이 안 되는 에러 → .npmrc 파일 추가 및 pnpm을 다시 설치해 해결 (9) | 2024.11.09 |
---|---|
[개발 공부 113일차] Map과 Set 딥 다이브 (4) | 2024.10.07 |
[개발 공부 98일차] 함수형 코딩 | 타임라인 다이어그램 (0) | 2024.09.21 |
[개발 공부 94일차] 함수형 코딩 | 함수형 도구 체이닝 (10) | 2024.09.04 |
[개발 공부 89일차] 함수형 코딩 | 일급 함수 II (3) | 2024.08.28 |