WEBVTT

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

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

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

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

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

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

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

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

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

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

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

00:00:37.693 --> 00:00:39.490
간단하죠

00:00:39.490 --> 00:00:44.417
[타이핑]

00:00:47.536 --> 00:00:51.612
두 번째는, 
count down 함수를 만들겁니다

00:00:51.612 --> 00:00:54.588
[타이핑]

00:00:54.588 --> 00:00:56.856
그런 다음 우리가 할 것은

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

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

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

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

00:01:09.947 --> 00:01:12.853
'parsefloat()' 함수를 이용할 수 있습니다

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

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

00:01:21.541 --> 00:01:25.328
다시 말하면,
1초당 몇 번을 의미하는 겁니다

00:01:25.328 --> 00:01:26.328
그리고, 우리는

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

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

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

00:01:38.096 --> 00:01:40.885
함수가 다시 호출되기 전

00:01:40.885 --> 00:01:43.369
우리는 callback 함수를 정의할 수 있습니다

00:01:43.369 --> 00:01:46.809
단지 'event listener' 에 대해서
이름을 정의함로써 말입니다

00:01:46.809 --> 00:01:49.350
자, 그러면..
보시는 것처럼 정말 빨리 진행되죠.

00:01:49.350 --> 00:01:51.827
왜냐하면, 
두 번째 의미를 아직 정의하지 않았기 때문이죠

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

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

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

00:02:01.558 --> 00:02:05.218
해보죠, 
지금 이것은 1초에 한 번씩 카운트다운하게 됩니다

00:02:05.218 --> 00:02:10.245
여러분은 490초 후에
가능한 더 많은 것을 배우는게 되면 좋겠습니다.

00:02:10.245 --> 00:02:15.036
여기에 'setInterval' 대신 사용하는 
window 함수가 하나 더 있습니다

00:02:15.036 --> 00:02:17.227
그건 'setTimeout' 입니다

00:02:17.227 --> 00:02:21.782
이걸로 바꿔보죠
여러분, 그 차이를 아시겠어요?

00:02:21.782 --> 00:02:23.681
잠시만요

00:02:23.681 --> 00:02:28.297
OK, 여러분은 아마 지금이
'setTimeout'을 쓸 때라는 걸 알겁니다

00:02:28.297 --> 00:02:33.881
이 브라우저는 함수를 단 한번만 호출합니다
반복해서가 아니라요

00:02:33.881 --> 00:02:38.705
이것은 애니메이션을 만들 때는 
그리 유용하지 않습니다

00:02:38.705 --> 00:02:41.732
그렇지만, 어떤 경우에는 
매우 유용할 수도 있습니다

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

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

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

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

00:02:56.507 --> 00:03:00.410
우리는 애니메이션에서 매 순간
어떻게 나타나는지를 알고 있어야 합니다

00:03:00.410 --> 00:03:02.460
0 이 될 때까지,
어떤 일이 일어나는가 처럼 말이죠

00:03:02.460 --> 00:03:05.258
글쎄요. 
거기까지 도달하기까지 꽤 긴 시간이 걸릴 겁니다

00:03:05.258 --> 00:03:07.206
여러분도 아마 진짜 지루해지실거예요

00:03:07.206 --> 00:03:10.581
그래서 시작 시간을 그냥 5로 바꿔봅시다

00:03:10.581 --> 00:03:12.538
어떻게 되나 보죠

00:03:12.538 --> 00:03:16.732
4, 3, 2, 1, 0...

00:03:16.732 --> 00:03:19.289
-1, -2

00:03:19.289 --> 00:03:21.878
됐습니다. 
그런데 아주 이상하게 되고 있네요

00:03:21.878 --> 00:03:26.292
세상이 끝날 때는 그냥 "콰쾅"하고 말죠
그리곤 카운팅은 그냥 멈추겠죠

NOTE Paragraph

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

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

00:03:32.734 --> 00:03:36.319
그래서 우리는 이 함수 안에 
'if' 조건문을 이용할 수 있습니다

00:03:36.319 --> 00:03:42.227
그럼, 변수에 현재 시간을 
저장하는 것부터 시작해 볼까요

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

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

00:03:47.513 --> 00:03:51.273
그리고 'currentTime' 함수로 치환합니다

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

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

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

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

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

00:04:15.012 --> 00:04:19.444
브라우저가 1초에 한 번씩 
매번 'countDown' 함수를 호출한다는 거죠

00:04:19.444 --> 00:04:21.559
이 웹페이지가 열릴 때마다 말이죠

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

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

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

00:04:30.935 --> 00:04:35.585
그 이상 이 함수를 호출할 이유가 전혀 없죠

00:04:35.585 --> 00:04:40.384
우리는 'window.clearInterval()' 이라는 
새로운 함수를 사용해 봅시다

00:04:40.384 --> 00:04:47.354
여기에 'else' 를 넣고,
'window.clearInterval()'

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

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

00:04:55.799 --> 00:04:58.902
우리가 취소할 간격을 아는 방식은

00:04:58.902 --> 00:05:02.983
변수에 'setInverval' 함수의 결과를 
저장하는 것입니다

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

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

00:05:11.122 --> 00:05:15.571
업데이트를 멈추게 하고,
함수 호출도 중지하게 해야 합니다

00:05:15.571 --> 00:05:19.332
여러분이 만드는 모든 애니메이션에서 
이 부분을 신중하게 고려해야 합니다

00:05:19.332 --> 00:05:21.695
작업을 중지하기 위해서는
어떤 조건이 필요한지에 대해서 말이죠

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

00:05:26.132 --> 00:05:29.023
그런 것들이 실제로는 
더 멋진 애니메이션이 될겁니다

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

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