3) CSS3 transition활용 requestAnimationFrame은 애니메이션 동작 자체를 재귀 호출을 하고 연속적으로 자바스크립트 함수가 호출되면서 속성을 바꾸는 그런 방법이었는데 transition이라는 CSS3의 속성을 이용하면 좀 더 애니메이션을 빠르고 부드럽고 적은 성능으로도 구현할 수 있어 애니메이션 관련 기능 구현을 이 속성에 위임 할 수 있습니다. CSS 기법으로 애니메이션 구현 transition을 이용한 방법입니다. 이 방법이 JavaScript로 구현하는 것보다 더 빠르다고 알려져 있습니다. 특히 모바일 웹에서는 transform을 사용한 element의 조작을 많이 구현합니다. css에 transition 값을 주면 좀 더 부드럽게 움직일 수 있습니다. 링크 바로가기 제가..
2) requestAnimationFrame 활용 1. requestAnimationFrame setTimeout은 animation을 위한 최적화된 기능이라 보기는 어렵습니다. setTimeout은 한 번 실행되는 함수입니다. setTimeout 함수를 재귀 호출하면서 setInterval을 좀 더 보완할 수 있지만 문제가 뭐냐면 어떤 정해진 시간 내에 재귀 호출하는, 반복적인 작업을 해야 한다는 것입니다. 그리고 animation주기를 16.6 미만으로 하는 경우 불필요한 frame 생성이 되는 등의 문제도 생깁니다. 그 대안으로 생긴 것이 바로 requestAnimationFrame입니다. 좀 더 자연스럽게 브라우저가 적절한 타이밍에 조절해주며, setTimeout 재귀 호출하는 것을 좀 더 개선한..
1) 웹 애니메이션 이해와 setTimeout활용 setInterval을 쓰면 10개의 콜백이 다 실행되지 않을 수 있습니다. 예상과 다르게 동작하는 거긴하죠.하지만 이렇게 동작해서 애니메이션 자체에 큰 문제가 생기는 건 아니니(9개가 실행되는 것이 때론 더 매끄러울 수도 있죠)참고하세요. 물론 setTimeout은 지정한 횟수만큼 동작하는 것이겠죠. 1. 애니메이션 애니메이션은 반복적인 움직임의 처리입니다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현 가능합니다. 어느 한 점부터 다른 한 점까지 이동하는 어떤 애니메이션을 자바스크립트로 구현하려면 계속 함수를..
2) 디버깅 - 크롬 개발자 도구 1. 크롬 개발자 도구의 네트워크 패널 네트워크 통신이라는 것은 소스 코드 상으로 우리가 직접 서버에 보내는 것보다는 브라우저가 우리의 소스 코드를 읽어서 필요한 부분을 서버로 요청을 보내고 응답을 받아서 화면에 띄우는 것이라 볼 수 있습니다. 대부분의 브라우저들에는 네트워크 모듈이 들어있어서 주소창에 어떤 값을 입력할 떄 서버로 GET방식의 요청이 가는 것이고 서버가 요청을 받으면 어떤 처리를 한 뒤 response를 주게 됩니다. 브라우저, 클라이언트가 그것을 다시 받아 소스 코드 상의 어떤 과정을 거친 후에 화면을 표현하게 되어있습니다. 다시 말해 클라이언트가 소스 코드를 통해 어떤 해석을 한 뒤에 필요한 브라우저에 있는 네트워크 통신 모듈을 불러 그것을 통해 서버..