[쏙쏙] 15장 - 2

[Seulwoo]

15장 - 2

add-to-cart 타임라인 그리기: 단계2

• 타임라인 그리기 두 번째 단계 : 모든 액션을 다이어그램에 그리는 단계
• 액션을 확인하는 단계까지는 이미 마침
• 순서대로 실행되거나 동시에 실행되는 액션을 그림
  • ajax 콜백 두 개는 새로운 타임라인으로

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

• 코드는 두 가지 형태로 실행될 수 있음
  • 일반적으로 순서대로 실행되는 두 액션 사이에 다른 타임라인에 있는 액션이 끼어들 수 있음
  • 하지만 어떤 환경에서는 그렇지 않음 => 자바스크립트 스레드 모델에서 동기화된 액션 사이에는 다른 액션이 끼어들 수 없음
• 타임라인 실행 순서가 서로 섞이지 않도록 하는 방법
• 순서가 섞일 수 있는 코드
  • 두 액션 사이에 시간은 얼마나 걸릴지 알 수 없음
  • 액션은 박스로 표시하고 액션 사이에 걸리는 시간은 선으로 표시
  • 액션과 액션 사이에 걸리는 시간에 따라 선을 길고/짧게 그릴 수 있음
  • 그렇다고 해도 액션 사이에 시간이 얼마나 걸리지 알 수 없음
  • 각자의 박스에 그림
• 순서가 섞이지 않는 코드
  • 두 액션이 차례로 실행되는데 그 사이에 다른 작업이 끼어들지 못하는 경우
  • 액션을 같은 상자에 그림

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

• 타임라인 다이어그램은 순차적으로 실행되는 코드뿐만 아니라 동시에 실행되는 코드를 표현할 수 있음
• 타임라인에서 나란히 표현된 액션은 세 가지 실행 순서를 가질 수 있음
  • 동시에 실행 => 박스가 나란히 있음
  • 왼쪽 먼저 => 왼쪽 박스가 위에
  • 오른쪽 먼저 => 오른쪽 박스가 위에
• 타임라인 다이어그램을 볼 때 선의 길이나 액션이 정렬된 위치와 상관없이 위와 같은 순서가 가능하다고 생각해야 함
• 실행 가능한 순서는 문제가 될 수 있기 때문에 예상할 수 있어야 함
• 박스가 하나 있는 두 개의 타임라인은 세 가지 실행 순서로 실행될 수 있음 => 더 길어지거나 더 많아지면 수가 빠르게 늘어남

좋은 타임라인의 원칙

• 좋은 타임라인의 원칙을 알면 코드를 개선하거나 더 이해하기 쉬운 코드를 만드는 데 도움이 된다
  • 1 ) 타임라인은 적을수록 이해하기 쉽습니다
    • 타임라인이 하나인 시스템이 가장 이해하기 쉬움
    • 하지만 멀티스레드/비동기 콜백/클라이언트-서버 간 통신 등을 사용하려면 여러 타임라인이 필요
  • 2 ) 타임라인은 짧을수록 이해하기 쉽습니다
    • 타임라인을 이해하기 쉽게 만드는 방법 => 타임라인의 단계를 줄이는 것
    • 단계를 줄이면 실행 가능한 순서의 수를 줄일 수 있음
  • 3 ) 공유하는 자원이 적을수록 이해하기 쉽습니다
    • 서로 다른 타임라인에 있는 두 액션이 서로 자원을 공유하지 않는다면 실행 순서에 신경 쓸 필요가 없음
    • 타임라인이 두 개 있다면 자원을 공유하는 액션을 주의 깊게 봐야 함
  • 4 ) 자원을 공유한다면 서로 조율해야 합니다
    • 없앨 수 없는 공유 자원이 있음
    • 타임라인은 공유 자원을 안전하게 공유할 수 있어야 함 => 순서대로 올바른 자원을 쓰고 돌려줌
    • 타임라인 간 조율 = 올바른 결과를 주지 않는 실행 순서를 없애는 것
  • 5 ) 시간을 일급으로 다룹니다
    • 타임라인을 다루는 재사용 가능한 객체를 만들면 타이밍 문제를 쉽게 만들 수 있음

자바스크립트의 단일 스레드

• 자바스크립트의 스레드 모델은 타임라인이 자원을 공유하면서 생기는 문제를 줄여줌
• 자바스크립트는 하나의 메인 스레드만 있어서 대부분의 액션을 하나의 박스로 표현할 수 있음
• 예시 코드
  • int x = 0;
  • public void addToX(int y) { x += y; }
• 자바에서 두 스레드가 변수를 공유할 때 += 연산자는 실제로 세 단계로 실행됨
  • 1 ) 현재 값을 읽음
  • 2 ) 그 값에 숫자를 더함
  • 3 ) 새 값을 다시 저장
• • 는 계산이기 때문에 타임라인에 표시하지 않음
• 두 스레드가 addToX 를 사용한다면 실행 순서가 섞여 여러 결과가 나올 수 있음
• 하지만 자바스크립트는 스레드가 하나만 있어서 문제가 되지 않음
• 자바스크립트에서 스레드를 사용한다면 같은 스레드를 계속 사용함. 두 액션이 동시에 실행되지 않음
• 하지만 비동기 콜백을 함께 사용한다면 문제가 생길 수 있음 => 미래에 알 수 없는 시점에 런타임에 의해 실행되기 때문. 박스의 선이 길어질 수도, 짧아질 수도 있음

자바스크립트의 비동기 큐

• 브라우저에서 동작하는 자바스크립트 엔진은 "작업 큐" 라고 하는 큐를 가지고 있음
• 작업 큐는 "이벤트 루프"에 의해 처리됨
• 이벤트 루프는 큐에서 작업 하나를 꺼내 실행하고 완료되면 다음 작업을 꺼내 실행하는 것을 무한히 반복함
• 이벤트 루프는 하나의 스레드에서 처리하기 때문에 두 개의 작업이 동시에 실행될 수 없음
• 작업이란?
  • 작업 큐에 있는 작업은 이벤트 데이터와 이벤트를 처리할 콜백으로 구성되어 있음
  • 이벤트 루프는 이벤트 데이터를 인자로 콜백을 부름
  • 콜백은 이벤트 루프가 실행할 함수임
  • 이벤트 루프는 단순히 첫 번째 인자에 이벤트 데이터를 넣어 콜백 함수를 실행
• 작업은 큐에 어떻게 들어가나요?
  • 이벤트가 발생하면 큐에 작업이 추가됨
  • 이벤트 : 마우스 클릭 / 키보드 입력 / ajax 이벤트 등
  • 콜백 함수가 있는 버튼에 이벤트가 발생하면 콜백 함수와 이벤트 데이터가 큐에 추가됨
  • 이벤트는 예측 불가능한 시점에 작업 큐에 들어감
• 작업이 없을 때 엔진은 무엇을 하나요?
  • 이벤트 루프는 대기 상태로 들어가고 전원을 아낌
  • 또는 가비지 컬렉션 같은 관리 작업 등

AJAX 와 이벤트 큐

• ajax : 브라우저에 기반을 둔 웹 요청
  • asynchronous javascript and xml
  • 실제로 xml 을 사용하지 않지만 용어는 그대로 남아 쓰고 있음
  • 일반적으로 브라우저에서 서버와 통신할 때 ajax 를 사용 함
• 자바스크립트에서 ajax 요청을 만들면 네트워크 엔진이 ajax 요청을 처리하기 위해 요청 큐에 넣음
• 요청 큐에 작업이 추가되어도 코드는 계속 실행됨. 요청이 완료될 때까지 기다릴 필요가 없음 => 비동기 방식
• ajax 콜백도 요청 순서와 상관없이 작업 큐에 들어감
• 요청에 대한 응답을 기다리지 않으면 응답을 어떻게 받나요?
  • 요청에 관련된 다양한 이벤트 콜백 => load, error 등
  • load : 응답이 모두 다운로드 되었을 때
  • error : 뭔가 잘못된 경우에 발생

완전한 비동기 예제

• 장바구니에 제품을 넣기 위해 구매 버튼을 누르면 거치는 과정
  • html 페이지가 로드되면 페이지에서 구매 버튼을 찾기 위해 쿼리 실행
  • 구매 버튼을 클릭했을 때 실행할 콜백 함수 추가
• 구매 버튼 클릭하면 작업 큐에 추가됨
• 이벤트 루프는 할 일을 하다가 클릭 이벤트를 작업 큐에서 꺼내면 클릭 이벤트에 등록된 콜백 실행
• 클릭 이벤트 콜백이 실행되면 요청 큐에 ajax 요청을 추가
• 언젠가 네트워크 엔진이 요청 큐에 있는 요청을 꺼내서 처리
• 구매 버튼 글씨를 바꿈
• ajax 요청이 완료되면 네트워크 엔진은 등록했던 ajax 요청에 대한 콜백을 작업 큐에 추가
• ajax 요청 콜백은 작업 큐에 있는 다른 작업이 모두 처리되고 처리할 때가 되면 실행됨
• 응답 콜백은 장바구니를 업데이트, 장바구니 아이템 표시, 구매 버튼 글씨를 원래대로 다시 설정 등 작업을 함

타임라인 단순화하기

• 세 번째 단계 : 단순화
• 플랫폼의 스레드 모델에 따라 다이어그램을 단순하게 만드는 일
• 자바스크립트에서 단순화하는 두 단계
  • 1 ) 하나의 타임라인에 있는 모든 액션을 하나로 통합
    • 다이어그램에 점선이 있다면 타임라인 끝으로 옮김
  • 2 ) 타임라인이 끝나는 곳에서 새로운 타임라인이 생긴다면 통합

완성된 타임라인 읽기