[Level 1] 미션 1: 자동차 경주 게임 2단계

 

호출 스케줄링(scheduling a call)

---

이번 미션에서 가장 중점으로 둔 내용이었다. requestAnimationFrame을 처음으로 접해보았고, 다시한번 자바스크립트 런타임이 어떻게 진행되는지를 다시 정리할 수 있었다.

 

setTimeout

const timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);

setTimeout 함수는 두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성한다. 타이머가 종료되면 첫번째 인수로 전달받은 콜백 함수가 호출된다. 

function

• 타이머가 만료된 뒤 실행할 함수

delay Optional

• 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간
• 생략하거나 0을 지정할 경우 "즉시", 더 정확히는 다음 이벤트 사이클에 실행한다는 뜻
• 그러나 실제 딜레이는 의도했던 것보다 더 길 수 있다

arg1, ..., argN (Optional)

• 함수에 전달할 추가 매개변수

 

setTimeout은 생성한 타이머를 식별할 수 있는 양의 정수 timeoutID를 리턴한다. 이 값을 clearTimeout()에 전달하면 타이머를 취소할 수 있다.

setTimeout에 메서드를 지정할 경우, 내부의 this값이 예상과 다를 수도 있다. bind로 바인딩하지도 않은 경우 기본 값인 window(또는 global) 객체를 가리키게 된다. bind또는 화살표 함수로 이를 해결할 수 있다.

 

setInterval

const timerId = setInterval(function[, delay, param1, param2])

setInterval 함수는 두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 반복 동작하는 타이머를 생성한다.타이머가 만료될 때마다 첫 번째 인수로 전달받은 콜백 함수가 반복 호출된다.

setInterval은 생성한 타이머를 식별할 수 있는 양의 정수 intervalID를 리턴한다. 이 값을 clearTimeout()에 전달하면 타이머를 취소할 수 있다.

 

requestAnimationFrame

window.requestAnimationFrame(callback);

브라우저에서 다음 repaint가 일어날 때 콜백이 호출된다. 1프레임당 호출이 보장된다. 프레임은 1초당 화면을 그려주는 단위를 말한다. 즉 현재 디스플레이 사양에 맞는 적절한 빈도록 실행을 하게 된다.

• 백그라운드 동작 및 비활성화시 중지(성능 최적화). 유저에게 보이는 애니메이션만 작동시켜 CPU나 베터리가 낭비되지 않도록 한다.
• 최대 1ms(1/1000s)로 제한되며 1초에 약 60번 동작
• 다수의 애니메이션에도 각각 타이머 값을 생성 및 참조하지 않고 내부의 동일한 타이머 참조

 

requestAnimationFrame VS setInterval

자바스크립트는 기본적으로 싱글 스레드로 작동된다. 콜스택 외의 요청이 있다면 queue에 이를 저장해놓고 콜스택이 빈다면 queue에서 빼면서 연산을 진행한다. 이 queue에는 task queue, microtask queue, animation frame 이 있다. requestAnimationFrame의 task는 이 중 animation frame으로 들어가게 된다. 이 animation frame의 우선순위는 microtask queue보다는 낮고, task queue 보다는 높다. 이 queue는 높은 우선순위를 가지게 되어 setInterval보다 정확한 작동이 가능하다.

이전까지 task queue는 하나로만 이루어졌는줄 알았는데 이렇게나 나뉘어져있다니😮  더 정확한 내용은 따로 글을 써야할 것 같다.

 

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

https://developer.mozilla.org/en-US/docs/Web/API/setInterval

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

https://dev.opera.com/articles/better-performance-with-requestanimationframe/

https://jbee.io/web/optimize-scroll-event/

 

 

웹 접근성

---

오류를 찾아내려고 최대한 내가 이걸 처음 사용하는 사람이라면...?이라는 마음으로 다양한 예외 사항들을 만들어 보았다. 이름을 입력하고 또 입력하게 된다면? 이름보다 레이싱 횟수를 더 먼저 입력하게 된다면? 등의 예외사항들을 찾아낼 수 있었는데 이것들을 모두 오류로 처리하는 것보다는 아애 불가능하게 하는 것이 좋을 것 같다는 생각이 들었다. 

pointer-events

하다보니 그렇다면 버튼을 hover할때도 변화가 있었으면 좋겠다 싶어서 이를 추가했다. 이렇게 하다보니 disable된 버튼에도 hover가 적용되어 hover를 없애는 방법을 찾아보았다.

pointer-events: none

• none : HTML 요소에 정의된 클릭, 상태(hover,active등), 커서 옵션들이 비활성화한다.
• auto : 비활성화된 이벤트를 다시 기본 기능을 하도록 되돌린다.
• inherit : 부모 요소로부터 pointer-events 값을 상속받는다.

https://developer.mozilla.org/ko/docs/Web/CSS/pointer-events

 

 

테스트 코드

---

cypress command

https://docs.cypress.io/api/cypress-api/custom-commands

Custom Commands | Cypress Documentation

반복되는 코드들을 입력하며 이거 맞아...?를 반복하고 있었는데 다른 분들 PR을 보니 cypress command를 사용하라는 리뷰들이 있었다. 반복되는 명령어들은 커스텀해서 사용할 수 있었다. 확실히 가독성이 훨 좋아졌다!

 

데모 페이지

---

https://prefer2.github.io/javascript-racingcar/