stopwatch

0

Question

위와 같이 작동하는 스톱워치를 구현하시오

 

주요 Solution_stopwatch 시간 구현

미리초_ms마다(0~99미리초는 100분의 1초 => 100) setInterval() 함수 내에서 콜백 함수를 실행한다.

해당 콜백 함수를 실행할 때마다 currentTime(현재 시간) 값을 가져오고 가져온 currentTime 값에서 startTime(현재 시간)을

감산해주면 스톱워치의 Start 버튼을 누르고(시작 시간) 그 뒤로부터 ms 당 얼마나 시간이 흘렀는지 알 수 있다.

 

스톱워치에 표시되는 시간(ms 당) = currentTime - startTime

 

하지만 현재 스톱워치 표시되는 모든 시간을 다음 연산을 사용하여 구하게 되면 다음과 같은 문제가 발생한다.

초기 Start 버튼을 클릭하였을 때는 문제가 없지만 Stop 버튼을 눌러서 스톱워치 시간을 멈췄다가 다시 Start 버튼을 클릭하였을 경우에는

다음 그림과 같이 공백 시간이 발생하여 제대로 된 시간이 표시되지 않는 문제가 생긴다.

 

예를 들어 12초에 시간을 멈췄다가 다시 시작한다고 한다면 정확한 시간은 12초부터 다시 스톱워치가 돌아가야 하지만 위와 같은 경우는

멈춘 시간(m)만큼의 시간이 앞당겨져 (12+m)초부터 스톱워치가 돌게 된다.

 

이는 화면 상에 랜더링되는 시간과 실제 시간 간에 공백시간이 나타나기에 발생하는 문제이다.

이를 해결하기 위해 startTime 값에 공백 시간을 가산해주어 시간을 앞당겨주며 해당 연산식을 처음 콜백 함수 내에서 endTime(스톱워치를 멈췄을 때의 해당 시간)의 값이 존재할 경우에 수행되도록 분기 처리해준다.

 

공백시간(초록색 영역) = currentTime_reStart - endTime

스톱워치에 표시되는 시간(ms 당)_reStart = currentTime - (startTime + 공백시간)

 

if(!stTime) {
            stTime = Date.now();
          } else {
            stTime += (Date.now() - edTime)
          }

 

다음과 같이 분(0~), 초(0~59), 미리초(0~99) 각 시간의 범위를 통해서도 구할 수 있다.

ms += 1;
          if (ms >= 100) {
            ss += 1;
            ms = 0;
          }
          if (ss >= 60) {
            mm += 1;
            ss = 0;
          }

 

연산을 통해 얻은 시간을 문제에서 요구하는 바와 같이 화면 상에 문자열 형태로 '00:00:00' 랜더링하기 위해서 별도의 헬퍼 함수 내에서 다음과 같은 연산을 수행하도록 하였다.

return (num) => {
        return (num < 10  ? `0${num}` : `${num}`);
      }
 // 해당 헬퍼 함수는 즉시 실행 함수가 반환하는 함수 객체를 할당 받고 있다.
 // 매개변수 num는 클로저에 의해 상위 스코프 내에 캡슐화되어 적재되어 있으며 이 값은 현재 시간이다.

 

전체 코드

https://github.com/choi2601/FastCampus-FrontEnd-Issue/tree/main/case5_stopwatch1

choi2601/FastCampus-FrontEnd-Issue