0:00:00.350,0:00:03.719
다시 '오 노'[br]카운트다운으로 돌아왔어요

0:00:03.719,0:00:07.135
만약 '오 노' 친구가[br]점점 커지게 하려면요?

0:00:07.135,0:00:09.524
카운트다운이[br]0에 가까워지면서요

0:00:09.524,0:00:12.779
마지막에 더 가까워지는[br]것처럼 보이게요

0:00:12.779,0:00:13.979
이 효과를 주는[br]첫번째 방법은

0:00:13.979,0:00:19.368
이 이미지의 CSS스타일을[br]window.setInterval로 주는 거에요

0:00:20.168,0:00:22.428
첫번째로[br]이미지를 찾아서

0:00:22.428,0:00:24.902
변수 형태로[br]저장해둘게요

0:00:24.902,0:00:32.232
'var ohnoes = [br]document.getElementById("ohnoes");'

0:00:32.232,0:00:34.361
그리고 시작스타일을[br]지정할 거에요

0:00:34.361,0:00:36.453
같은 크기에서[br]시작하게 말이죠

0:00:36.453,0:00:39.415
이렇게 하면 어느 정도부터[br]커져야 하는지 알 수도 있어요

0:00:39.415,0:00:43.806
이제 makeItBigger함수를[br]선언할거에요

0:00:43.806,0:00:47.182
그래서 매번[br]커지게 만들거에요

0:00:48.072,0:00:52.058
이 함수에서는[br]style.width를 바꿀거에요

0:00:52.940,0:00:57.960
이전 style.width를 가져와서[br]1을 더해줄 거에요

0:00:59.908,0:01:04.438
마지막으로 이 함수를[br]setInterval을 통해 호출할거에요

0:01:04.439,0:01:07.659
'window.setInterval(makeItBigger);'

0:01:07.659,0:01:09.697
얼마나 커지게[br]할 것인지나

0:01:09.697,0:01:11.776
얼마나 자주 커지게[br]할 것인지를 정할거에요

0:01:11.776,0:01:13.506
우리는 부드러운[br]효과를 원하니까

0:01:13.506,0:01:14.656
그 말은 보통

0:01:14.656,0:01:18.759
초당 24프레임에서[br]60프레임 정도를 말해요

0:01:18.759,0:01:21.205
저는 초당[br]30프레임으로 할게요

0:01:21.205,0:01:23.738
즉[br]30분의 1000이죠

0:01:25.676,0:01:27.936
그래요[br]동작하지 않네요

0:01:28.577,0:01:31.190
이유를 알 것 같나요?[br]약간 복잡해요

0:01:31.190,0:01:33.631
여기로 가서[br]한번 생각해보죠

0:01:33.637,0:01:40.496
이 줄 다음에 오는[br]ohnoes.style.width의 값은 뭐죠?

0:01:41.309,0:01:45.759
50픽셀이었으니[br]51픽셀이라고 생각하지만

0:01:45.759,0:01:49.942
로그를 보고[br]ohnoes.style.width의 값을 알아보죠

0:01:49.942,0:01:52.270
우리는 infoDiv에서[br]이 값을 볼 거니까

0:01:52.270,0:01:57.980
'= ohnoes.style.width;'[br]한번 봐요

0:01:57.980,0:02:00.477
50픽셀이네요[br]좋아요

0:02:00.480,0:02:05.330
그럼 50픽셀에[br]1을 더하려고 해요

0:02:05.330,0:02:07.338
50픽셀 더하기[br]1은 뭐죠?

0:02:07.338,0:02:09.541
여러분은 51픽셀이라고[br]하겠지만

0:02:09.553,0:02:14.876
자바스크립트는 '50px'를[br]문자열로 인식해요

0:02:15.856,0:02:20.018
그러니까 '50px1'이[br]되는거에요

0:02:20.018,0:02:21.686
아무 의미도[br]없는 말이죠

0:02:22.520,0:02:25.817
그러니까 브라우저는[br]우리의 시도를 무시하고 있을거에요

0:02:25.817,0:02:28.831
폭 값을 말도 안되는 값으로[br]설정하려고 하니까요

0:02:29.627,0:02:35.486
우리는 단위가 달린 숫자를[br]그냥 숫자로 변환하고

0:02:35.486,0:02:40.181
숫자에 1을 더해서[br]그 뒤에 'px'를 붙여야해요

0:02:41.047,0:02:45.467
이걸 하려면 처음에[br]parseFloat을 쓰면

0:02:45.467,0:02:47.451
숫자로[br]바꿀 수 있어요

0:02:47.451,0:02:49.866
이걸 모두[br]더한 후에

0:02:49.866,0:02:52.798
마지막에 'px'를[br]붙여주면 돼요

0:02:52.798,0:02:54.458
와![br]동작하네요

0:02:54.458,0:02:56.929
얘가 점점[br]커지고 있어요!

0:02:56.929,0:02:59.485
이제 여러분은[br]약간 복잡한 부분을 배웠어요

0:02:59.485,0:03:01.133
CSS속성으로[br]효과를 줄 때 말이죠

0:03:01.133,0:03:03.122
대부분 단위들이[br]붙어있으니까

0:03:03.122,0:03:04.752
먼저 여러분은[br]단위를 떼내고[br]

0:03:04.752,0:03:05.892
어머나[br]얘가 계속 커져요

0:03:05.892,0:03:10.192
다시 단위를[br]붙여줘야해요

0:03:10.752,0:03:14.270
근데 얘가 점점[br]무서워지려고 하네요

0:03:14.270,0:03:17.606
사실 더 무서운 것들이[br]몇 가지 있어요

0:03:17.606,0:03:21.315
이 CSS에 효과를 줄 때[br]setInterval을 사용하면 말이죠

0:03:21.315,0:03:24.327
첫번째로[br]브라우저가 보장하지 않아요

0:03:24.327,0:03:28.459
이 속도를 정확히[br]따라가는 걸 말이죠

0:03:28.459,0:03:31.704
사용자 움직임 같은[br]다른 것들이 띄워진다면

0:03:31.704,0:03:33.514
문자를 친다거나 할때

0:03:33.514,0:03:36.103
그러면 여러분의 콜백 함수가[br]늦게 불려져서

0:03:36.103,0:03:38.667
부드러운 효과를[br]얻지 못할 수도 있어요

0:03:38.667,0:03:41.188
두번째로는 브라우저가[br]함수를 계속 호출하게 되니까

0:03:41.188,0:03:43.038
만약 이 탭이[br]가려져 있더라도 말이죠

0:03:43.038,0:03:47.071
컴퓨터의 작업 수행량을[br]불필요하게 소비한다는거에요

0:03:48.081,0:03:51.797
그래서 최신 브라우저에는[br]새로운 함수가 있어요

0:03:51.797,0:03:55.283
DOM 효과를 위해[br]디자인 된 기능이죠

0:03:55.283,0:03:59.133
'window.requestAnimationFrame'[br]이라고 불러요

0:03:59.147,0:04:03.400
이걸 사용하려면[br]setInterval부분을 지우고

0:04:03.400,0:04:08.110
'requestAnimationFrame'을[br]호출할 거에요

0:04:08.110,0:04:11.558
이 함수 안에서[br]말이죠

0:04:11.558,0:04:14.957
그리고 참조를[br]해줄 거에요

0:04:14.957,0:04:18.927
makeItBigger함수를[br]호출하게 말이죠

0:04:18.927,0:04:24.177
그러면 페이지가 로드될 때[br]makeItBigger함수를 호출하겠죠

0:04:24.177,0:04:26.787
'makeItBigger();'

0:04:26.787,0:04:28.163
오[br]좋아요

0:04:28.163,0:04:30.973
이번엔 정말 빠르게[br]커지고 있네요

0:04:30.973,0:04:33.824
브라우저는 이제[br]makeItBigger를 호출해요

0:04:33.824,0:04:37.900
그려지기 바로 직전에요[br]초당 60프레임정도로요

0:04:37.900,0:04:40.196
저번에 설정했던 값의[br]두 배 정도 되네요

0:04:40.196,0:04:43.105
그리고 매번 폭에 1픽셀을[br]더하고 있으니까

0:04:43.105,0:04:45.335
계산 해보세요[br]우리 수학 잘하잖아요

0:04:45.335,0:04:47.906
초당 60픽셀정도를[br]더하고 있는 거에요

0:04:47.906,0:04:50.957
몇 초안에 얘가[br]페이지보다 더 커질거에요

0:04:50.957,0:04:53.163
이제 사라졌네요

0:04:53.163,0:04:56.046
그럼 이 효과를[br]어떻게 늦출 수 있을까요?

0:04:56.046,0:04:58.467
몇 가지 방법이 있지만[br]제가 좋아하는 방법은

0:04:58.467,0:05:01.048
시간이 얼마나 지났는지[br]기록하고 있다가

0:05:01.048,0:05:04.832
그걸 기준으로[br]새로운 폭을 계산하는 거에요

0:05:04.832,0:05:08.809
밀리초 단위의 시작 시간을[br]기록해두는 걸로 시작해요

0:05:08.809,0:05:10.459
함수가 불리기[br]전에 말이죠

0:05:10.459,0:05:12.567
'var startTime'

0:05:12.567,0:05:14.267
다시 커지고 있어요

0:05:14.267,0:05:16.507
'new Date().getTime();'

0:05:17.097,0:05:20.332
그리고 makeItBigger안에[br]현재 시간을 저장해요

0:05:20.332,0:05:26.332
'var currTime =[br]new Date().getTime();'

0:05:26.332,0:05:28.552
계산을[br]위해서는

0:05:28.552,0:05:31.795
초당 30픽셀만큼[br]커지게 하고싶다고 해봐요

0:05:31.795,0:05:34.232
시작은[br]50픽셀로 할게요

0:05:34.232,0:05:37.371
그럼 이제 여기서[br]이걸 계산해요

0:05:37.371,0:05:44.271
newWidth은 50이니까[br]시작하는 폭이요

0:05:44.271,0:05:48.961
현재 시간에서 시작 시간을[br]뺀 값을 더해요

0:05:48.961,0:05:50.291
이건 밀리초 단위라서

0:05:50.291,0:05:52.801
천으로[br]나눌 거에요

0:05:52.801,0:05:56.908
그리고 거기에[br]30을 곱해서

0:05:56.908,0:05:59.447
왜냐하면 초당[br]30픽셀씩 커지길 원하니까요

0:05:59.447,0:06:01.749
좋아요[br]이게 newWidth네요

0:06:01.749,0:06:09.283
그리고 style.Width를[br]newWidth로 해줘요

0:06:12.173,0:06:14.233
오[br]좋아요

0:06:14.233,0:06:20.361
초당 30픽셀로[br]아주 부드럽게요

0:06:20.361,0:06:27.991
만약 느리거나 빠르게 하고싶다면[br]이 값을 바꿔주면 돼요

0:06:31.031,0:06:34.374
얘가 너무 커졌을 때[br]어떻게 멈추면 될까요?

0:06:34.374,0:06:37.884
이 부분을 그냥[br]if문안에 넣어서

0:06:37.884,0:06:45.142
현재 폭이 특정 값보다[br]작을 때만 수행되게요

0:06:45.142,0:06:49.703
예를 들어 300정도로[br]한번 해볼게요

0:06:54.320,0:06:58.481
사실 currentWidth은 -[br]아니 newWidth네요

0:06:58.481,0:07:01.273
좋아요[br]300이 될 때까지 봐요

0:07:03.673,0:07:04.743
'오 노'[br]파이팅!

0:07:04.743,0:07:05.843
할 수 있어!

0:07:06.693,0:07:08.684
와[br]아름다워요

0:07:08.684,0:07:12.536
requestAnimationFrame을[br]사용하는 방법은

0:07:12.536,0:07:17.486
크롬이나 파이어폭스[br]익스플로러 10이상을 쓰면 될 거에요

0:07:18.296,0:07:21.426
수많은 자바스크립트[br]라이브러리나 도구가 있는데

0:07:21.426,0:07:25.615
requestAnimationFrame을[br]지원할 때는 사용하고

0:07:25.615,0:07:29.545
예전 브라우저에서는[br]setInterval로 바꿔서 사용하게 해줘요

0:07:30.125,0:07:32.578
이게 웹 개발에 대한[br]중요한 점이에요

0:07:32.578,0:07:34.701
웹은 항상[br]변하고 있고

0:07:34.701,0:07:36.334
브라우저는 계속[br]새로운 기능을 추가하고

0:07:36.334,0:07:40.245
개발자들은 새 기능을 이용하는[br]새로운 방법을 찾아내고 있으니

0:07:40.245,0:07:43.565
여러분은 계속해서[br]새로운 것을 배우고

0:07:43.565,0:07:46.271
여러분이 하고 싶은 것에[br]뭐가 최선인지 배워야 해요