WEBVTT

00:00:00.350 --> 00:00:03.719
다시 '오 노'
카운트다운으로 돌아왔어요

00:00:03.719 --> 00:00:07.135
만약 '오 노' 친구가
점점 커지게 하려면요?

00:00:07.135 --> 00:00:09.524
카운트다운이
0에 가까워지면서요

00:00:09.524 --> 00:00:12.779
마지막에 더 가까워지는
것처럼 보이게요

00:00:12.779 --> 00:00:13.979
이 효과를 주는
첫번째 방법은

00:00:13.979 --> 00:00:19.368
이 이미지의 CSS스타일을
window.setInterval로 주는 거에요

00:00:20.168 --> 00:00:22.428
첫번째로
이미지를 찾아서

00:00:22.428 --> 00:00:24.902
변수 형태로
저장해둘게요

00:00:24.902 --> 00:00:32.232
'var ohnoes = 
document.getElementById("ohnoes");'

00:00:32.232 --> 00:00:34.361
그리고 시작스타일을
지정할 거에요

00:00:34.361 --> 00:00:36.453
같은 크기에서
시작하게 말이죠

00:00:36.453 --> 00:00:39.415
이렇게 하면 어느 정도부터
커져야 하는지 알 수도 있어요

00:00:39.415 --> 00:00:43.806
이제 makeItBigger함수를
선언할거에요

00:00:43.806 --> 00:00:47.182
그래서 매번
커지게 만들거에요

00:00:48.072 --> 00:00:52.058
이 함수에서는
style.width를 바꿀거에요

00:00:52.940 --> 00:00:57.960
이전 style.width를 가져와서
1을 더해줄 거에요

00:00:59.908 --> 00:01:04.438
마지막으로 이 함수를
setInterval을 통해 호출할거에요

00:01:04.439 --> 00:01:07.659
'window.setInterval(makeItBigger);'

00:01:07.659 --> 00:01:09.697
얼마나 커지게
할 것인지나

00:01:09.697 --> 00:01:11.776
얼마나 자주 커지게
할 것인지를 정할거에요

00:01:11.776 --> 00:01:13.506
우리는 부드러운
효과를 원하니까

00:01:13.506 --> 00:01:14.656
그 말은 보통

00:01:14.656 --> 00:01:18.759
초당 24프레임에서
60프레임 정도를 말해요

00:01:18.759 --> 00:01:21.205
저는 초당
30프레임으로 할게요

00:01:21.205 --> 00:01:23.738
즉
30분의 1000이죠

00:01:25.676 --> 00:01:27.936
그래요
동작하지 않네요

00:01:28.577 --> 00:01:31.190
이유를 알 것 같나요?
약간 복잡해요

00:01:31.190 --> 00:01:33.631
여기로 가서
한번 생각해보죠

00:01:33.637 --> 00:01:40.496
이 줄 다음에 오는
ohnoes.style.width의 값은 뭐죠?

00:01:41.309 --> 00:01:45.759
50픽셀이었으니
51픽셀이라고 생각하지만

00:01:45.759 --> 00:01:49.942
로그를 보고
ohnoes.style.width의 값을 알아보죠

00:01:49.942 --> 00:01:52.270
우리는 infoDiv에서
이 값을 볼 거니까

00:01:52.270 --> 00:01:57.980
'= ohnoes.style.width;'
한번 봐요

00:01:57.980 --> 00:02:00.477
50픽셀이네요
좋아요

00:02:00.480 --> 00:02:05.330
그럼 50픽셀에
1을 더하려고 해요

00:02:05.330 --> 00:02:07.338
50픽셀 더하기
1은 뭐죠?

00:02:07.338 --> 00:02:09.541
여러분은 51픽셀이라고
하겠지만

00:02:09.553 --> 00:02:14.876
자바스크립트는 '50px'를
문자열로 인식해요

00:02:15.856 --> 00:02:20.018
그러니까 '50px1'이
되는거에요

00:02:20.018 --> 00:02:21.686
아무 의미도
없는 말이죠

00:02:22.520 --> 00:02:25.817
그러니까 브라우저는
우리의 시도를 무시하고 있을거에요

00:02:25.817 --> 00:02:28.831
폭 값을 말도 안되는 값으로
설정하려고 하니까요

00:02:29.627 --> 00:02:35.486
우리는 단위가 달린 숫자를
그냥 숫자로 변환하고

00:02:35.486 --> 00:02:40.181
숫자에 1을 더해서
그 뒤에 'px'를 붙여야해요

00:02:41.047 --> 00:02:45.467
이걸 하려면 처음에
parseFloat을 쓰면

00:02:45.467 --> 00:02:47.451
숫자로
바꿀 수 있어요

00:02:47.451 --> 00:02:49.866
이걸 모두
더한 후에

00:02:49.866 --> 00:02:52.798
마지막에 'px'를
붙여주면 돼요

00:02:52.798 --> 00:02:54.458
와!
동작하네요

00:02:54.458 --> 00:02:56.929
얘가 점점
커지고 있어요!

00:02:56.929 --> 00:02:59.485
이제 여러분은
약간 복잡한 부분을 배웠어요

00:02:59.485 --> 00:03:01.133
CSS속성으로
효과를 줄 때 말이죠

00:03:01.133 --> 00:03:03.122
대부분 단위들이
붙어있으니까

00:03:03.122 --> 00:03:04.752
먼저 여러분은
단위를 떼내고


00:03:04.752 --> 00:03:05.892
어머나
얘가 계속 커져요

00:03:05.892 --> 00:03:10.192
다시 단위를
붙여줘야해요

00:03:10.752 --> 00:03:14.270
근데 얘가 점점
무서워지려고 하네요

00:03:14.270 --> 00:03:17.606
사실 더 무서운 것들이
몇 가지 있어요

00:03:17.606 --> 00:03:21.315
이 CSS에 효과를 줄 때
setInterval을 사용하면 말이죠

00:03:21.315 --> 00:03:24.327
첫번째로
브라우저가 보장하지 않아요

00:03:24.327 --> 00:03:28.459
이 속도를 정확히
따라가는 걸 말이죠

00:03:28.459 --> 00:03:31.704
사용자 움직임 같은
다른 것들이 띄워진다면

00:03:31.704 --> 00:03:33.514
문자를 친다거나 할때

00:03:33.514 --> 00:03:36.103
그러면 여러분의 콜백 함수가
늦게 불려져서

00:03:36.103 --> 00:03:38.667
부드러운 효과를
얻지 못할 수도 있어요

00:03:38.667 --> 00:03:41.188
두번째로는 브라우저가
함수를 계속 호출하게 되니까

00:03:41.188 --> 00:03:43.038
만약 이 탭이
가려져 있더라도 말이죠

00:03:43.038 --> 00:03:47.071
컴퓨터의 작업 수행량을
불필요하게 소비한다는거에요

00:03:48.081 --> 00:03:51.797
그래서 최신 브라우저에는
새로운 함수가 있어요

00:03:51.797 --> 00:03:55.283
DOM 효과를 위해
디자인 된 기능이죠

00:03:55.283 --> 00:03:59.133
'window.requestAnimationFrame'
이라고 불러요

00:03:59.147 --> 00:04:03.400
이걸 사용하려면
setInterval부분을 지우고

00:04:03.400 --> 00:04:08.110
'requestAnimationFrame'을
호출할 거에요

00:04:08.110 --> 00:04:11.558
이 함수 안에서
말이죠

00:04:11.558 --> 00:04:14.957
그리고 참조를
해줄 거에요

00:04:14.957 --> 00:04:18.927
makeItBigger함수를
호출하게 말이죠

00:04:18.927 --> 00:04:24.177
그러면 페이지가 로드될 때
makeItBigger함수를 호출하겠죠

00:04:24.177 --> 00:04:26.787
'makeItBigger();'

00:04:26.787 --> 00:04:28.163
오
좋아요

00:04:28.163 --> 00:04:30.973
이번엔 정말 빠르게
커지고 있네요

00:04:30.973 --> 00:04:33.824
브라우저는 이제
makeItBigger를 호출해요

00:04:33.824 --> 00:04:37.900
그려지기 바로 직전에요
초당 60프레임정도로요

00:04:37.900 --> 00:04:40.196
저번에 설정했던 값의
두 배 정도 되네요

00:04:40.196 --> 00:04:43.105
그리고 매번 폭에 1픽셀을
더하고 있으니까

00:04:43.105 --> 00:04:45.335
계산 해보세요
우리 수학 잘하잖아요

00:04:45.335 --> 00:04:47.906
초당 60픽셀정도를
더하고 있는 거에요

00:04:47.906 --> 00:04:50.957
몇 초안에 얘가
페이지보다 더 커질거에요

00:04:50.957 --> 00:04:53.163
이제 사라졌네요

00:04:53.163 --> 00:04:56.046
그럼 이 효과를
어떻게 늦출 수 있을까요?

00:04:56.046 --> 00:04:58.467
몇 가지 방법이 있지만
제가 좋아하는 방법은

00:04:58.467 --> 00:05:01.048
시간이 얼마나 지났는지
기록하고 있다가

00:05:01.048 --> 00:05:04.832
그걸 기준으로
새로운 폭을 계산하는 거에요

00:05:04.832 --> 00:05:08.809
밀리초 단위의 시작 시간을
기록해두는 걸로 시작해요

00:05:08.809 --> 00:05:10.459
함수가 불리기
전에 말이죠

00:05:10.459 --> 00:05:12.567
'var startTime'

00:05:12.567 --> 00:05:14.267
다시 커지고 있어요

00:05:14.267 --> 00:05:16.507
'new Date().getTime();'

00:05:17.097 --> 00:05:20.332
그리고 makeItBigger안에
현재 시간을 저장해요

00:05:20.332 --> 00:05:26.332
'var currTime =
new Date().getTime();'

00:05:26.332 --> 00:05:28.552
계산을
위해서는

00:05:28.552 --> 00:05:31.795
초당 30픽셀만큼
커지게 하고싶다고 해봐요

00:05:31.795 --> 00:05:34.232
시작은
50픽셀로 할게요

00:05:34.232 --> 00:05:37.371
그럼 이제 여기서
이걸 계산해요

00:05:37.371 --> 00:05:44.271
newWidth은 50이니까
시작하는 폭이요

00:05:44.271 --> 00:05:48.961
현재 시간에서 시작 시간을
뺀 값을 더해요

00:05:48.961 --> 00:05:50.291
이건 밀리초 단위라서

00:05:50.291 --> 00:05:52.801
천으로
나눌 거에요

00:05:52.801 --> 00:05:56.908
그리고 거기에
30을 곱해서

00:05:56.908 --> 00:05:59.447
왜냐하면 초당
30픽셀씩 커지길 원하니까요

00:05:59.447 --> 00:06:01.749
좋아요
이게 newWidth네요

00:06:01.749 --> 00:06:09.283
그리고 style.Width를
newWidth로 해줘요

00:06:12.173 --> 00:06:14.233
오
좋아요

00:06:14.233 --> 00:06:20.361
초당 30픽셀로
아주 부드럽게요

00:06:20.361 --> 00:06:27.991
만약 느리거나 빠르게 하고싶다면
이 값을 바꿔주면 돼요

00:06:31.031 --> 00:06:34.374
얘가 너무 커졌을 때
어떻게 멈추면 될까요?

00:06:34.374 --> 00:06:37.884
이 부분을 그냥
if문안에 넣어서

00:06:37.884 --> 00:06:45.142
현재 폭이 특정 값보다
작을 때만 수행되게요

00:06:45.142 --> 00:06:49.703
예를 들어 300정도로
한번 해볼게요

00:06:54.320 --> 00:06:58.481
사실 currentWidth은 -
아니 newWidth네요

00:06:58.481 --> 00:07:01.273
좋아요
300이 될 때까지 봐요

00:07:03.673 --> 00:07:04.743
'오 노'
파이팅!

00:07:04.743 --> 00:07:05.843
할 수 있어!

00:07:06.693 --> 00:07:08.684
와
아름다워요

00:07:08.684 --> 00:07:12.536
requestAnimationFrame을
사용하는 방법은

00:07:12.536 --> 00:07:17.486
크롬이나 파이어폭스
익스플로러 10이상을 쓰면 될 거에요

00:07:18.296 --> 00:07:21.426
수많은 자바스크립트
라이브러리나 도구가 있는데

00:07:21.426 --> 00:07:25.615
requestAnimationFrame을
지원할 때는 사용하고

00:07:25.615 --> 00:07:29.545
예전 브라우저에서는
setInterval로 바꿔서 사용하게 해줘요

00:07:30.125 --> 00:07:32.578
이게 웹 개발에 대한
중요한 점이에요

00:07:32.578 --> 00:07:34.701
웹은 항상
변하고 있고

00:07:34.701 --> 00:07:36.334
브라우저는 계속
새로운 기능을 추가하고

00:07:36.334 --> 00:07:40.245
개발자들은 새 기능을 이용하는
새로운 방법을 찾아내고 있으니

00:07:40.245 --> 00:07:43.565
여러분은 계속해서
새로운 것을 배우고

00:07:43.565 --> 00:07:46.271
여러분이 하고 싶은 것에
뭐가 최선인지 배워야 해요