이번 Mission #3 에서는...
https://edu.nextstep.camp/s/M4ILAt8c/lt/FXBmba3y
본격적인 E2E 테스트가 시작되는 듯하다.
앞서 e2e 테스트가 무엇인지에 대해 공부했었다. (1차 회고에서 정리한 테스트의 종류 복습하기)
그외 테스트에 관해 개념을 좀 더 다질 수 있는 질문들이 있었다.
TEST 더 파기
비용 대비 효과가 충분한가?
라는 새로운 질문이 등장했다.
- 테스트를 작성하는 비용에 비해 얻을 수 있는 효과가 더 큰가가 중요
- 로직이 거의 없는(trivial) 코드는 따로 테스트하지 않아도 됨
- 동어 반복적인 테스트를 피하자
- 테스트 범위에 대한 조절이 필요 (단위 테스트 vs 통합 테스트 vs E2E 테스트)
- 모든 모듈에 대해 단위 테스트를 작성하는 것은 비효율적- 모든 테스트 케이스를 E2E 테스트로만 검증하는 것도
커버리지
라는 개념이 등장했다.
- 커버리지 100%를 목표로 하는 것은 비효율적
- 라이브러리 등은 100% 커버리지 가능
- 복잡한 어플리케이션의 경우 적절한 선을 잘 찾는 것이 중요
TDD
🟩 학습 목표: 클린코드로 나아가기 위한 리팩터링 기준점을 스스로 만들어 나갈 수 있다.
3대 원칙 - 로버트 C. 마틴 (밥 아저씨, 클린 코더)
- 실패할 테스트를 작성하기 전에는 아무런 프로덕션 코드도 작성하지 않는다.
- 실패할 테스트 말고는 작성하지 않는다.
- 현재 실패한 테스트를 만족시키는 코드 외에는 작성하지 않는다.
좋은 테스트의 조건
- 실행 속도가 빨라야 함.
- 내부 구현(테스트하지 않는 부분)을 변경했다고 해서 테스트가 실패하면 안된다. 인터페이스(입출력 위주)를 중심으로 작성.
- 버그를 찾을 수 있어야 한다. 만들었다고 끝이 아님 테스트 시나리오를 잘 설정해야 함.
- 테스트 결과에 일관성이 있어야 한다. 코드가 변하지 않았다면 테스트 결과는 항상 동일 해야 한다.
- 의도가 명확히 드러나야 한다.
BDD
https://edu.nextstep.camp/s/M4ILAt8c/ls/wWvplDXz
글을 읽고 느낀 점
=> 지금 내가 작성하는 테스트는 BDD에 가깝지 않나.
=> 진짜 그냥 TDD 는 어떤 형태일지 궁금.
여기서부터는 자동차 게임경주를 위한 자스 기본 개념들이다.
자바스크립트 더 파기
Closure
🟩❌ 학습 목표:
클로저에 대해 설명할 수 있다.
이라는 새로운 개념이 등장했다.
이 글을 읽고 나서
- what is Closure?
- 클로저는 어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상
- what is Lexical Scope?
- 자바스크립트는 함수를 어디서 호출했는 지가 아니라 어디서 정의했는지에 따라 스코프를 결정한다. 이를 정적 스코프(Lexical Scope) 라고 한다. (그럼 반대로 어디서 호출했는지로 정의되는 건 동적 스코프 라고 하겠네? 확인해보자.)
- when closure is needed/used? Can you explain with an example?
에 대답할 수 있게 되었다.
- 궁금점:
const increase = (function () {
let counter = 0
return function () {
return ++counter
}
})()
console.log(increase()) // 1
console.log(increase()) // 2
console.log(increase()) // 3
=> 왜 즉시 실행함수...? increase 를 함수가 아니라 함수를 할당받는 변수로 만듬. 즉시실행함수 개념에 대한 이해가 부족한 듯하다. 잠깐 복습하고 오자 (👉)
Event Loop 🔄
🟩 학습 목표:
자바스크립트 엔진에서 이벤트가 어떤 순서로 동작하는지 알 수 있다.
-
싱글 스레드란?
: 한 번에 하나의 업무(task)만 처리하는 것 -
이벤트 루프가 존재하는 이유 = 동시성:
자바스크립트는 싱글 스레드로 작동한다. 이런 자바스크립트가 동시에 여러 태스크를 처리할 수 있도록 동시성을 부여해주는 역할. -
비동기 처리:
자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있습니다.
비동기처리는 동시에 작업을 시작하여 먼저 완료되는 작업부터 노출.- javascript 가 비동기 함수를 실행하는 과정
=> 스크린샷 3~4개 찍어둔 거 - setTimeOut(cb, 0): 0초를 찍어두고 기다리는 이유는 '스택이 비기를 기다리기 위해서' 이다.
- javascript 가 비동기 함수를 실행하는 과정
대부분의 자바스크립트 엔진은 크게 2가지 영역으로 구분할 수 있다.
1) Memroy Heap
2) Call Stack
- what is Memory Heap?
객체가 저장되는 메모리 공간(memory allocation). - what is Call Stack?
실행 컨텍스트가 저장되는 공간. 선입 선출. 하나에 하나씩 처리.
시간을 다루는 방법 - setTimeout, setInterval, Request Animation Frame ⏰
데모 영상을 보면
값을 입력 후 자동차가 뜨기까지 시간이 좀 걸린다. 그 후 설정한 양의 자동차들이 설정한 수 만큼의 경기를 진행하는 결과창을 보여준다. 그 후 "축하합니다" 라는 알럿이 뜬다.
핵심은 이 결과를 보여주는 함수를 '시간이 좀 걸리게' 만드는 것이다.
1) 1경기를 할 때 2경기가 싱크되고 있어야 하고,
2) 2경기를 할 때 3경기가 싱크되고 있어야 한다.
3) 알럿은 모든 경기가 끝난 후 약 2초후에 뜨도록 해야한다.
모두 시간을 다루는 비동기 함수와 관련이 있다.
🟩 학습 목표 :
- 자바스크립트 특정 코드를 일정 시간 이후에 실행할 수 있다.
- 자바스크립트에서 특정 코드를 일정 시간 마다 반복적으로 실행할 수 있다.
- 시간은 다루는 api를 테스트할 수 있다.
일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다. 호출 스케줄링을 구현하는 방법은 세 가지가 있습니다.
setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
requestAnimationFrame을 이용해 브라우저에 최적화된 방법으로 함수를 실행하는 방법
✅ setTimeout
✅ setInterval
❌ Request Animation Frame
Reference
JavaScript 동기, 비동기처리와 콜백 함수 | kkhcode
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
이벤트 루프란 (a.k.a. 자바사크립트가 비동기 함수를 실행시키는 방법) 00:00~21:00
V8 엔진은 어떻게 내 코드를 실행하는 걸까? | Evan Moon
TODO
What the heck is the event loop anyway? | Philip Roberts | JSConf EU
21분부터 공부하기 (feat. repaint 공부)
