[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.64,0:00:03.88,Default,,0000,0000,0000,,여기 어떤 그림이 있는 웹페이지가 있습니다
Dialogue: 0,0:00:03.88,0:00:07.86,Default,,0000,0000,0000,,"안돼, 곧 세상이 끝날거야"라는 이상한 글과 함께요
Dialogue: 0,0:00:07.86,0:00:10.47,Default,,0000,0000,0000,,"정확히, 500초 후에"
Dialogue: 0,0:00:10.47,0:00:13.36,Default,,0000,0000,0000,,저는 이 웹페이지를 좀더 효과적으로 만들어 보려고 합니다
Dialogue: 0,0:00:13.36,0:00:16.93,Default,,0000,0000,0000,,실제 카운트 다운하는 것처럼 바꿔보고 싶어요
Dialogue: 0,0:00:16.93,0:00:20.78,Default,,0000,0000,0000,,그러면, 방문자들이 정확히 얼마만큼의 \N시간이 남아 있는지 알 수 있겠죠
Dialogue: 0,0:00:20.78,0:00:23.93,Default,,0000,0000,0000,,자, 우리가 웹페이지의 일부분을 애니매이션으로 만들기 위해서
Dialogue: 0,0:00:23.93,0:00:26.71,Default,,0000,0000,0000,,전략은 그 안에 있는 몇 가지 요소를 찾는 것입니다
Dialogue: 0,0:00:26.71,0:00:29.30,Default,,0000,0000,0000,,그러면, 그 요소에 관한 무엇인가가 바뀌게 됩니다
Dialogue: 0,0:00:29.30,0:00:32.78,Default,,0000,0000,0000,,그리고, 특별히 초 단위 시간을 설정하는거죠
Dialogue: 0,0:00:32.78,0:00:37.69,Default,,0000,0000,0000,,그러기 위해서, \N첫 번째, ID 로 카운트다운을 찾을 겁니다
Dialogue: 0,0:00:37.69,0:00:39.49,Default,,0000,0000,0000,,간단하죠
Dialogue: 0,0:00:39.49,0:00:44.42,Default,,0000,0000,0000,,[타이핑]
Dialogue: 0,0:00:47.54,0:00:51.61,Default,,0000,0000,0000,,두 번째는, \Ncount down 함수를 만들겁니다
Dialogue: 0,0:00:51.61,0:00:54.59,Default,,0000,0000,0000,,[타이핑]
Dialogue: 0,0:00:54.59,0:00:56.86,Default,,0000,0000,0000,,그런 다음 우리가 할 것은
Dialogue: 0,0:00:56.86,0:01:01.22,Default,,0000,0000,0000,,'textCoutent' 를 설정하는 것입니다
Dialogue: 0,0:01:01.22,0:01:03.76,Default,,0000,0000,0000,,이것을 '이전 숫자 - 1 과 같다'고 설정할게요
Dialogue: 0,0:01:03.76,0:01:06.80,Default,,0000,0000,0000,,여기서, 'textContent' 는 실제로는 문자열이 됩니다
Dialogue: 0,0:01:06.80,0:01:09.95,Default,,0000,0000,0000,,우리는 이 문자열을 숫자로 바꾸고 싶어요
Dialogue: 0,0:01:09.95,0:01:12.85,Default,,0000,0000,0000,,'parsefloat()' 함수를 이용할 수 있습니다
Dialogue: 0,0:01:12.85,0:01:15.75,Default,,0000,0000,0000,,그러면, 이전 숫자에서 1을 뺄 수 있게 됩니다
Dialogue: 0,0:01:15.75,0:01:21.54,Default,,0000,0000,0000,,마지막으로, \N이 함수를 일정간격으로 호출하게 만들고 싶어요
Dialogue: 0,0:01:21.54,0:01:25.33,Default,,0000,0000,0000,,다시 말하면,\N1초당 몇 번을 의미하는 겁니다
Dialogue: 0,0:01:25.33,0:01:26.33,Default,,0000,0000,0000,,그리고, 우리는
Dialogue: 0,0:01:27.42,0:01:30.42,Default,,0000,0000,0000,,'window.setInterval()' 함수를 이용할 수 있습니다
Dialogue: 0,0:01:30.42,0:01:33.69,Default,,0000,0000,0000,,그런데, 이 함수는 2가지 해석이 가능합니다
Dialogue: 0,0:01:33.69,0:01:38.10,Default,,0000,0000,0000,,'callback(;호출) 함수와 '밀리초 시간 대기'
Dialogue: 0,0:01:38.10,0:01:40.88,Default,,0000,0000,0000,,함수가 다시 호출되기 전
Dialogue: 0,0:01:40.88,0:01:43.37,Default,,0000,0000,0000,,우리는 callback 함수를 정의할 수 있습니다
Dialogue: 0,0:01:43.37,0:01:46.81,Default,,0000,0000,0000,,단지 'event listener' 에 대해서\N이름을 정의함로써 말입니다
Dialogue: 0,0:01:46.81,0:01:49.35,Default,,0000,0000,0000,,자, 그러면..\N보시는 것처럼 정말 빨리 진행되죠.
Dialogue: 0,0:01:49.35,0:01:51.83,Default,,0000,0000,0000,,왜냐하면, \N두 번째 의미를 아직 정의하지 않았기 때문이죠
Dialogue: 0,0:01:51.83,0:01:55.25,Default,,0000,0000,0000,,우리는 그 값을 몇 밀리초가 되게 하고 싶어요
Dialogue: 0,0:01:55.25,0:01:58.52,Default,,0000,0000,0000,,그리고, 1 초에 단지 한 번되기를 원합니다\N그래서 1000 이라고 할 겁니다
Dialogue: 0,0:01:58.52,0:02:01.56,Default,,0000,0000,0000,,왜냐하면, 1초는 천 밀리초이니까요
Dialogue: 0,0:02:01.56,0:02:05.22,Default,,0000,0000,0000,,해보죠, \N지금 이것은 1초에 한 번씩 카운트다운하게 됩니다
Dialogue: 0,0:02:05.22,0:02:10.24,Default,,0000,0000,0000,,여러분은 490초 후에\N가능한 더 많은 것을 배우는게 되면 좋겠습니다.
Dialogue: 0,0:02:10.24,0:02:15.04,Default,,0000,0000,0000,,여기에 'setInterval' 대신 사용하는 \Nwindow 함수가 하나 더 있습니다
Dialogue: 0,0:02:15.04,0:02:17.23,Default,,0000,0000,0000,,그건 'setTimeout' 입니다
Dialogue: 0,0:02:17.23,0:02:21.78,Default,,0000,0000,0000,,이걸로 바꿔보죠\N여러분, 그 차이를 아시겠어요?
Dialogue: 0,0:02:21.78,0:02:23.68,Default,,0000,0000,0000,,잠시만요
Dialogue: 0,0:02:23.68,0:02:28.30,Default,,0000,0000,0000,,OK, 여러분은 아마 지금이\N'setTimeout'을 쓸 때라는 걸 알겁니다
Dialogue: 0,0:02:28.30,0:02:33.88,Default,,0000,0000,0000,,이 브라우저는 함수를 단 한번만 호출합니다\N반복해서가 아니라요
Dialogue: 0,0:02:33.88,0:02:38.70,Default,,0000,0000,0000,,이것은 애니메이션을 만들 때는 \N그리 유용하지 않습니다
Dialogue: 0,0:02:38.70,0:02:41.73,Default,,0000,0000,0000,,그렇지만, 어떤 경우에는 \N매우 유용할 수도 있습니다
Dialogue: 0,0:02:41.73,0:02:45.87,Default,,0000,0000,0000,,만약, 사용자에게 경고 배너 같은 걸 \N보여 줄 경우라면 말이죠
Dialogue: 0,0:02:45.87,0:02:48.09,Default,,0000,0000,0000,,그리고, 10초 후에 배너를 숨기고 싶다면 말입니다
Dialogue: 0,0:02:48.09,0:02:52.89,Default,,0000,0000,0000,,그럼, 이걸 'setInterval' 로 다시 바꿔볼까요
Dialogue: 0,0:02:52.89,0:02:56.51,Default,,0000,0000,0000,,지금처럼 애니메이션을 테스트할 때,
Dialogue: 0,0:02:56.51,0:03:00.41,Default,,0000,0000,0000,,우리는 애니메이션에서 매 순간\N어떻게 나타나는지를 알고 있어야 합니다
Dialogue: 0,0:03:00.41,0:03:02.46,Default,,0000,0000,0000,,0 이 될 때까지,\N어떤 일이 일어나는가 처럼 말이죠
Dialogue: 0,0:03:02.46,0:03:05.26,Default,,0000,0000,0000,,글쎄요. \N거기까지 도달하기까지 꽤 긴 시간이 걸릴 겁니다
Dialogue: 0,0:03:05.26,0:03:07.21,Default,,0000,0000,0000,,여러분도 아마 진짜 지루해지실거예요
Dialogue: 0,0:03:07.21,0:03:10.58,Default,,0000,0000,0000,,그래서 시작 시간을 그냥 5로 바꿔봅시다
Dialogue: 0,0:03:10.58,0:03:12.54,Default,,0000,0000,0000,,어떻게 되나 보죠
Dialogue: 0,0:03:12.54,0:03:16.73,Default,,0000,0000,0000,,4, 3, 2, 1, 0...
Dialogue: 0,0:03:16.73,0:03:19.29,Default,,0000,0000,0000,,-1, -2
Dialogue: 0,0:03:19.29,0:03:21.88,Default,,0000,0000,0000,,됐습니다. \N그런데 아주 이상하게 되고 있네요
Dialogue: 0,0:03:21.88,0:03:26.29,Default,,0000,0000,0000,,세상이 끝날 때는 그냥 "콰쾅"하고 말죠\N그리곤 카운팅은 그냥 멈추겠죠
Dialogue: 0,0:03:26.29,0:03:30.11,Default,,0000,0000,0000,,이 순간, 우리가 사실 하고 싶은 것은 \N이 애니메이션 동작을 멈추는 것입니다
Dialogue: 0,0:03:30.11,0:03:32.73,Default,,0000,0000,0000,,일단, 한번 0에 도달하면 말이죠
Dialogue: 0,0:03:32.73,0:03:36.32,Default,,0000,0000,0000,,그래서 우리는 이 함수 안에 \N'if' 조건문을 이용할 수 있습니다
Dialogue: 0,0:03:36.32,0:03:42.23,Default,,0000,0000,0000,,그럼, 변수에 현재 시간을 \N저장하는 것부터 시작해 볼까요
Dialogue: 0,0:03:42.23,0:03:44.52,Default,,0000,0000,0000,,여러 번 이 수를 이용하게 될거니까,
Dialogue: 0,0:03:44.52,0:03:47.51,Default,,0000,0000,0000,,저는 그냥 이걸 여기에 넣어두겠습니다
Dialogue: 0,0:03:47.51,0:03:51.27,Default,,0000,0000,0000,,그리고 'currentTime' 함수로 치환합니다
Dialogue: 0,0:03:51.27,0:03:55.56,Default,,0000,0000,0000,,제가 할 수 있는 거은 'if' 조건을 넣는겁니다
Dialogue: 0,0:03:55.56,0:04:01.10,Default,,0000,0000,0000,,즉, '만약, 'currentTime' 이 0 보다 클 때만 \N텍스트를 업데이트 한다'
Dialogue: 0,0:04:01.10,0:04:04.94,Default,,0000,0000,0000,,그러면, 실제 숫자 1 씩 빼는 시간이 됩니다
Dialogue: 0,0:04:04.94,0:04:10.50,Default,,0000,0000,0000,,자, 이 함수를 여기 안에 옮겨야 합니다
Dialogue: 0,0:04:10.50,0:04:15.01,Default,,0000,0000,0000,,제대로 작동은 합니다만, \N이러한 접근 방식은 어떤 단점이 있습니다.
Dialogue: 0,0:04:15.01,0:04:19.44,Default,,0000,0000,0000,,브라우저가 1초에 한 번씩 \N매번 'countDown' 함수를 호출한다는 거죠
Dialogue: 0,0:04:19.44,0:04:21.56,Default,,0000,0000,0000,,이 웹페이지가 열릴 때마다 말이죠
Dialogue: 0,0:04:21.56,0:04:24.84,Default,,0000,0000,0000,,여러분은 브라우저가 이유없이\N어떤 함수를 호출하게 해서는 안됩니다
Dialogue: 0,0:04:24.84,0:04:27.58,Default,,0000,0000,0000,,해야 할 다른 중요한 작업들도 많으니까요
Dialogue: 0,0:04:27.58,0:04:30.94,Default,,0000,0000,0000,,우리가 진짜 원하는 작업은\N브라이저가 단 한 번만 0 이 되도록 진행하게 만드는 겁니다
Dialogue: 0,0:04:30.94,0:04:35.58,Default,,0000,0000,0000,,그 이상 이 함수를 호출할 이유가 전혀 없죠
Dialogue: 0,0:04:35.58,0:04:40.38,Default,,0000,0000,0000,,우리는 'window.clearInterval()' 이라는 \N새로운 함수를 사용해 봅시다
Dialogue: 0,0:04:40.38,0:04:47.35,Default,,0000,0000,0000,,여기에 'else' 를 넣고,\N'window.clearInterval()'
Dialogue: 0,0:04:47.35,0:04:52.19,Default,,0000,0000,0000,,실행을 취소하기 위한 간격을 알게 하기 위해서\N인자를 전달할 필요는 없습니다
Dialogue: 0,0:04:52.19,0:04:55.80,Default,,0000,0000,0000,,왜냐하면, 우리는 실제로 한 페이지에 \N여러 개의 간격을 가질지도 모르기 때문이죠
Dialogue: 0,0:04:55.80,0:04:58.90,Default,,0000,0000,0000,,우리가 취소할 간격을 아는 방식은
Dialogue: 0,0:04:58.90,0:05:02.98,Default,,0000,0000,0000,,변수에 'setInverval' 함수의 결과를 \N저장하는 것입니다
Dialogue: 0,0:05:02.98,0:05:07.82,Default,,0000,0000,0000,,그러면 타이머 변수로 그 값을 얻게 됩니다\N복사해서 거기 안에 붙여넣습니다
Dialogue: 0,0:05:07.82,0:05:11.12,Default,,0000,0000,0000,,그러면, 우리는 취소할 게 무엇인지, \N언제 0 에 도달하는지를 알게 됩니다
Dialogue: 0,0:05:11.12,0:05:15.57,Default,,0000,0000,0000,,업데이트를 멈추게 하고,\N함수 호출도 중지하게 해야 합니다
Dialogue: 0,0:05:15.57,0:05:19.33,Default,,0000,0000,0000,,여러분이 만드는 모든 애니메이션에서 \N이 부분을 신중하게 고려해야 합니다
Dialogue: 0,0:05:19.33,0:05:21.70,Default,,0000,0000,0000,,작업을 중지하기 위해서는\N어떤 조건이 필요한지에 대해서 말이죠
Dialogue: 0,0:05:21.70,0:05:26.13,Default,,0000,0000,0000,,네, 맞아요. 여러분은 아마도 여러 번 반복해서 진행되는 \N애니메이션도 만들게 될 겁니다
Dialogue: 0,0:05:26.13,0:05:29.02,Default,,0000,0000,0000,,그런 것들이 실제로는 \N더 멋진 애니메이션이 될겁니다
Dialogue: 0,0:05:29.02,0:05:33.60,Default,,0000,0000,0000,,여러분의 브라우저가 'callback' 함수를 부를 때마다 \N작업을 진행해야 하기 때문입니다
Dialogue: 0,0:05:33.60,0:05:37.72,Default,,0000,0000,0000,,이제 프로그램을 동작시켜서\N실제 세상이 '쿵쾅!' 하게 만들어 볼까요?