0:00:00.639,0:00:03.875
여기 어떤 그림이 있는 웹페이지가 있습니다

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

0:00:07.862,0:00:10.473
"정확히, 500초 후에"

0:00:10.473,0:00:13.356
저는 이 웹페이지를 좀더 효과적으로 만들어 보려고 합니다

0:00:13.356,0:00:16.934
실제 카운트 다운하는 것처럼 바꿔보고 싶어요

0:00:16.934,0:00:20.781
그러면, 방문자들이 정확히 얼마만큼의 [br]시간이 남아 있는지 알 수 있겠죠

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

0:00:23.934,0:00:26.708
전략은 그 안에 있는 몇 가지 요소를 찾는 것입니다

0:00:26.708,0:00:29.303
그러면, 그 요소에 관한 무엇인가가 바뀌게 됩니다

0:00:29.303,0:00:32.779
그리고, 특별히 초 단위 시간을 설정하는거죠

0:00:32.779,0:00:37.693
그러기 위해서, [br]첫 번째, ID 로 카운트다운을 찾을 겁니다

0:00:37.693,0:00:39.490
간단하죠

0:00:39.490,0:00:44.417
[타이핑]

0:00:47.536,0:00:51.612
두 번째는, [br]count down 함수를 만들겁니다

0:00:51.612,0:00:54.588
[타이핑]

0:00:54.588,0:00:56.856
그런 다음 우리가 할 것은

0:00:56.856,0:01:01.217
'textCoutent' 를 설정하는 것입니다

0:01:01.217,0:01:03.755
이것을 '이전 숫자 - 1 과 같다'고 설정할게요

0:01:03.755,0:01:06.798
여기서, 'textContent' 는 실제로는 문자열이 됩니다

0:01:06.798,0:01:09.947
우리는 이 문자열을 숫자로 바꾸고 싶어요

0:01:09.947,0:01:12.853
'parsefloat()' 함수를 이용할 수 있습니다

0:01:12.853,0:01:15.753
그러면, 이전 숫자에서 1을 뺄 수 있게 됩니다

0:01:15.753,0:01:21.541
마지막으로, [br]이 함수를 일정간격으로 호출하게 만들고 싶어요

0:01:21.541,0:01:25.328
다시 말하면,[br]1초당 몇 번을 의미하는 겁니다

0:01:25.328,0:01:26.328
그리고, 우리는

0:01:27.415,0:01:30.415
'window.setInterval()' 함수를 이용할 수 있습니다

0:01:30.415,0:01:33.691
그런데, 이 함수는 2가지 해석이 가능합니다

0:01:33.691,0:01:38.096
'callback(;호출) 함수와 '밀리초 시간 대기'

0:01:38.096,0:01:40.885
함수가 다시 호출되기 전

0:01:40.885,0:01:43.369
우리는 callback 함수를 정의할 수 있습니다

0:01:43.369,0:01:46.809
단지 'event listener' 에 대해서[br]이름을 정의함로써 말입니다

0:01:46.809,0:01:49.350
자, 그러면..[br]보시는 것처럼 정말 빨리 진행되죠.

0:01:49.350,0:01:51.827
왜냐하면, [br]두 번째 의미를 아직 정의하지 않았기 때문이죠

0:01:51.827,0:01:55.250
우리는 그 값을 몇 밀리초가 되게 하고 싶어요

0:01:55.250,0:01:58.520
그리고, 1 초에 단지 한 번되기를 원합니다[br]그래서 1000 이라고 할 겁니다

0:01:58.520,0:02:01.558
왜냐하면, 1초는 천 밀리초이니까요

0:02:01.558,0:02:05.218
해보죠, [br]지금 이것은 1초에 한 번씩 카운트다운하게 됩니다

0:02:05.218,0:02:10.245
여러분은 490초 후에[br]가능한 더 많은 것을 배우는게 되면 좋겠습니다.

0:02:10.245,0:02:15.036
여기에 'setInterval' 대신 사용하는 [br]window 함수가 하나 더 있습니다

0:02:15.036,0:02:17.227
그건 'setTimeout' 입니다

0:02:17.227,0:02:21.782
이걸로 바꿔보죠[br]여러분, 그 차이를 아시겠어요?

0:02:21.782,0:02:23.681
잠시만요

0:02:23.681,0:02:28.297
OK, 여러분은 아마 지금이[br]'setTimeout'을 쓸 때라는 걸 알겁니다

0:02:28.297,0:02:33.881
이 브라우저는 함수를 단 한번만 호출합니다[br]반복해서가 아니라요

0:02:33.881,0:02:38.705
이것은 애니메이션을 만들 때는 [br]그리 유용하지 않습니다

0:02:38.705,0:02:41.732
그렇지만, 어떤 경우에는 [br]매우 유용할 수도 있습니다

0:02:41.732,0:02:45.866
만약, 사용자에게 경고 배너 같은 걸 [br]보여 줄 경우라면 말이죠

0:02:45.866,0:02:48.090
그리고, 10초 후에 배너를 숨기고 싶다면 말입니다

0:02:48.090,0:02:52.894
그럼, 이걸 'setInterval' 로 다시 바꿔볼까요

0:02:52.894,0:02:56.507
지금처럼 애니메이션을 테스트할 때,

0:02:56.507,0:03:00.410
우리는 애니메이션에서 매 순간[br]어떻게 나타나는지를 알고 있어야 합니다

0:03:00.410,0:03:02.460
0 이 될 때까지,[br]어떤 일이 일어나는가 처럼 말이죠

0:03:02.460,0:03:05.258
글쎄요. [br]거기까지 도달하기까지 꽤 긴 시간이 걸릴 겁니다

0:03:05.258,0:03:07.206
여러분도 아마 진짜 지루해지실거예요

0:03:07.206,0:03:10.581
그래서 시작 시간을 그냥 5로 바꿔봅시다

0:03:10.581,0:03:12.538
어떻게 되나 보죠

0:03:12.538,0:03:16.732
4, 3, 2, 1, 0...

0:03:16.732,0:03:19.289
-1, -2

0:03:19.289,0:03:21.878
됐습니다. [br]그런데 아주 이상하게 되고 있네요

0:03:21.878,0:03:26.292
세상이 끝날 때는 그냥 "콰쾅"하고 말죠[br]그리곤 카운팅은 그냥 멈추겠죠

0:03:26.292,0:03:30.111
이 순간, 우리가 사실 하고 싶은 것은 [br]이 애니메이션 동작을 멈추는 것입니다

0:03:30.111,0:03:32.734
일단, 한번 0에 도달하면 말이죠

0:03:32.734,0:03:36.319
그래서 우리는 이 함수 안에 [br]'if' 조건문을 이용할 수 있습니다

0:03:36.319,0:03:42.227
그럼, 변수에 현재 시간을 [br]저장하는 것부터 시작해 볼까요

0:03:42.227,0:03:44.517
여러 번 이 수를 이용하게 될거니까,

0:03:44.517,0:03:47.513
저는 그냥 이걸 여기에 넣어두겠습니다

0:03:47.513,0:03:51.273
그리고 'currentTime' 함수로 치환합니다

0:03:51.273,0:03:55.564
제가 할 수 있는 거은 'if' 조건을 넣는겁니다

0:03:55.564,0:04:01.097
즉, '만약, 'currentTime' 이 0 보다 클 때만 [br]텍스트를 업데이트 한다'

0:04:01.097,0:04:04.938
그러면, 실제 숫자 1 씩 빼는 시간이 됩니다

0:04:04.938,0:04:10.497
자, 이 함수를 여기 안에 옮겨야 합니다

0:04:10.497,0:04:15.012
제대로 작동은 합니다만, [br]이러한 접근 방식은 어떤 단점이 있습니다.

0:04:15.012,0:04:19.444
브라우저가 1초에 한 번씩 [br]매번 'countDown' 함수를 호출한다는 거죠

0:04:19.444,0:04:21.559
이 웹페이지가 열릴 때마다 말이죠

0:04:21.559,0:04:24.842
여러분은 브라우저가 이유없이[br]어떤 함수를 호출하게 해서는 안됩니다

0:04:24.842,0:04:27.581
해야 할 다른 중요한 작업들도 많으니까요

0:04:27.581,0:04:30.935
우리가 진짜 원하는 작업은[br]브라이저가 단 한 번만 0 이 되도록 진행하게 만드는 겁니다

0:04:30.935,0:04:35.585
그 이상 이 함수를 호출할 이유가 전혀 없죠

0:04:35.585,0:04:40.384
우리는 'window.clearInterval()' 이라는 [br]새로운 함수를 사용해 봅시다

0:04:40.384,0:04:47.354
여기에 'else' 를 넣고,[br]'window.clearInterval()'

0:04:47.354,0:04:52.189
실행을 취소하기 위한 간격을 알게 하기 위해서[br]인자를 전달할 필요는 없습니다

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

0:04:55.799,0:04:58.902
우리가 취소할 간격을 아는 방식은

0:04:58.902,0:05:02.983
변수에 'setInverval' 함수의 결과를 [br]저장하는 것입니다

0:05:02.983,0:05:07.816
그러면 타이머 변수로 그 값을 얻게 됩니다[br]복사해서 거기 안에 붙여넣습니다

0:05:07.816,0:05:11.122
그러면, 우리는 취소할 게 무엇인지, [br]언제 0 에 도달하는지를 알게 됩니다

0:05:11.122,0:05:15.571
업데이트를 멈추게 하고,[br]함수 호출도 중지하게 해야 합니다

0:05:15.571,0:05:19.332
여러분이 만드는 모든 애니메이션에서 [br]이 부분을 신중하게 고려해야 합니다

0:05:19.332,0:05:21.695
작업을 중지하기 위해서는[br]어떤 조건이 필요한지에 대해서 말이죠

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

0:05:26.132,0:05:29.023
그런 것들이 실제로는 [br]더 멋진 애니메이션이 될겁니다

0:05:29.023,0:05:33.600
여러분의 브라우저가 'callback' 함수를 부를 때마다 [br]작업을 진행해야 하기 때문입니다

0:05:33.600,0:05:37.721
이제 프로그램을 동작시켜서[br]실제 세상이 '쿵쾅!' 하게 만들어 볼까요?