Animating DOM with setInterval (Video Version)

여기 어떤 그림이 있는 웹페이지가 있습니다

"안돼, 곧 세상이 끝날거야"라는 이상한 글과 함께요

"정확히, 500초 후에"

저는 이 웹페이지를 좀더 효과적으로 만들어 보려고 합니다

실제 카운트 다운하는 것처럼 바꿔보고 싶어요

그러면, 방문자들이 정확히 얼마만큼의
시간이 남아 있는지 알 수 있겠죠

자, 우리가 웹페이지의 일부분을 애니매이션으로 만들기 위해서

전략은 그 안에 있는 몇 가지 요소를 찾는 것입니다

그러면, 그 요소에 관한 무엇인가가 바뀌게 됩니다

그리고, 특별히 초 단위 시간을 설정하는거죠

그러기 위해서,
첫 번째, ID 로 카운트다운을 찾을 겁니다

간단하죠

[타이핑]

두 번째는,
count down 함수를 만들겁니다

[타이핑]

그런 다음 우리가 할 것은

'textCoutent' 를 설정하는 것입니다

이것을 '이전 숫자 - 1 과 같다'고 설정할게요

여기서, 'textContent' 는 실제로는 문자열이 됩니다

우리는 이 문자열을 숫자로 바꾸고 싶어요

'parsefloat()' 함수를 이용할 수 있습니다

그러면, 이전 숫자에서 1을 뺄 수 있게 됩니다

마지막으로,
이 함수를 일정간격으로 호출하게 만들고 싶어요

다시 말하면,
1초당 몇 번을 의미하는 겁니다

그리고, 우리는

'window.setInterval()' 함수를 이용할 수 있습니다

그런데, 이 함수는 2가지 해석이 가능합니다

'callback(;호출) 함수와 '밀리초 시간 대기'

함수가 다시 호출되기 전

우리는 callback 함수를 정의할 수 있습니다

단지 'event listener' 에 대해서
이름을 정의함로써 말입니다

자, 그러면..
보시는 것처럼 정말 빨리 진행되죠.

왜냐하면,
두 번째 의미를 아직 정의하지 않았기 때문이죠

우리는 그 값을 몇 밀리초가 되게 하고 싶어요

그리고, 1 초에 단지 한 번되기를 원합니다
그래서 1000 이라고 할 겁니다

왜냐하면, 1초는 천 밀리초이니까요

해보죠,
지금 이것은 1초에 한 번씩 카운트다운하게 됩니다

여러분은 490초 후에
가능한 더 많은 것을 배우는게 되면 좋겠습니다.

여기에 'setInterval' 대신 사용하는
window 함수가 하나 더 있습니다

그건 'setTimeout' 입니다

이걸로 바꿔보죠
여러분, 그 차이를 아시겠어요?

잠시만요

OK, 여러분은 아마 지금이
'setTimeout'을 쓸 때라는 걸 알겁니다

이 브라우저는 함수를 단 한번만 호출합니다
반복해서가 아니라요

이것은 애니메이션을 만들 때는
그리 유용하지 않습니다

그렇지만, 어떤 경우에는
매우 유용할 수도 있습니다

만약, 사용자에게 경고 배너 같은 걸
보여 줄 경우라면 말이죠

그리고, 10초 후에 배너를 숨기고 싶다면 말입니다

그럼, 이걸 'setInterval' 로 다시 바꿔볼까요

지금처럼 애니메이션을 테스트할 때,

우리는 애니메이션에서 매 순간
어떻게 나타나는지를 알고 있어야 합니다

0 이 될 때까지,
어떤 일이 일어나는가 처럼 말이죠

글쎄요.
거기까지 도달하기까지 꽤 긴 시간이 걸릴 겁니다

여러분도 아마 진짜 지루해지실거예요

그래서 시작 시간을 그냥 5로 바꿔봅시다

어떻게 되나 보죠

4, 3, 2, 1, 0...

-1, -2

됐습니다.
그런데 아주 이상하게 되고 있네요

세상이 끝날 때는 그냥 "콰쾅"하고 말죠
그리곤 카운팅은 그냥 멈추겠죠

이 순간, 우리가 사실 하고 싶은 것은
이 애니메이션 동작을 멈추는 것입니다

일단, 한번 0에 도달하면 말이죠

그래서 우리는 이 함수 안에
'if' 조건문을 이용할 수 있습니다

그럼, 변수에 현재 시간을
저장하는 것부터 시작해 볼까요

여러 번 이 수를 이용하게 될거니까,

저는 그냥 이걸 여기에 넣어두겠습니다

그리고 'currentTime' 함수로 치환합니다

제가 할 수 있는 거은 'if' 조건을 넣는겁니다

즉, '만약, 'currentTime' 이 0 보다 클 때만
텍스트를 업데이트 한다'

그러면, 실제 숫자 1 씩 빼는 시간이 됩니다

자, 이 함수를 여기 안에 옮겨야 합니다

제대로 작동은 합니다만,
이러한 접근 방식은 어떤 단점이 있습니다.

브라우저가 1초에 한 번씩
매번 'countDown' 함수를 호출한다는 거죠

이 웹페이지가 열릴 때마다 말이죠

여러분은 브라우저가 이유없이
어떤 함수를 호출하게 해서는 안됩니다

해야 할 다른 중요한 작업들도 많으니까요

우리가 진짜 원하는 작업은
브라이저가 단 한 번만 0 이 되도록 진행하게 만드는 겁니다

그 이상 이 함수를 호출할 이유가 전혀 없죠

우리는 'window.clearInterval()' 이라는
새로운 함수를 사용해 봅시다

여기에 'else' 를 넣고,
'window.clearInterval()'

실행을 취소하기 위한 간격을 알게 하기 위해서
인자를 전달할 필요는 없습니다

왜냐하면, 우리는 실제로 한 페이지에
여러 개의 간격을 가질지도 모르기 때문이죠

우리가 취소할 간격을 아는 방식은

변수에 'setInverval' 함수의 결과를
저장하는 것입니다

그러면 타이머 변수로 그 값을 얻게 됩니다
복사해서 거기 안에 붙여넣습니다

그러면, 우리는 취소할 게 무엇인지,
언제 0 에 도달하는지를 알게 됩니다

업데이트를 멈추게 하고,
함수 호출도 중지하게 해야 합니다

여러분이 만드는 모든 애니메이션에서
이 부분을 신중하게 고려해야 합니다

작업을 중지하기 위해서는
어떤 조건이 필요한지에 대해서 말이죠

네, 맞아요. 여러분은 아마도 여러 번 반복해서 진행되는
애니메이션도 만들게 될 겁니다

그런 것들이 실제로는
더 멋진 애니메이션이 될겁니다

여러분의 브라우저가 'callback' 함수를 부를 때마다
작업을 진행해야 하기 때문입니다

이제 프로그램을 동작시켜서
실제 세상이 '쿵쾅!' 하게 만들어 볼까요?