2) DOMContentLoaded 이벤트 일반적으로 GET 방식으로 사이트에 요청을 하면 해당 사이트에서 HTML을 응답으로 받고 파싱을 합니다. HTML 코드에 CSS가 필요하면 CSS를 요청해서 받아오고 자바스크립트가 필요하면 또 요청해서 받아오고 이미지가 필요하면 또 요청해서 받아옵니다. 그리고 받아온 HTML과 CSS를 분석해서 배치를 결정하는데 이를 레이아웃이라 합니다. 렌더링 작업 후에 이미지까지 가져와서 화면에 출력을 하면 사용자 입장에서는 화면이 전부 로드된 것으로 보입니다. 그런데 이러한 과정 중간에 자바스크립트가 들어가서 DOM API를 사용하여 구조를 바꾸려 한다면 사용할 수가 없습니다. 아직 DOM 트리가 구성되기 전이기 때문입니다. 이러한 이유로 자바스크립트 파일을 HTML 하단..
1) 서비스 개발을 위한 디렉토리 구성 1. JavaScript파일 구성 간단한 내용의 JavaScript라면 한 페이지에 모두 표현하는 것도 좋습니다. 그렇지 않다면 의미에 맞게 구분하는 방법이 더 좋습니다. 2. HTML안에 JavaScript 구성하기 CSS는 head태그 안에 상단에 위치합니다. 자바스크립트는 body 태그가 닫히기 전에 배치합니다. 브라우저는 한 라인씩 HTML 코드를 파싱하다가 자바스크립트 코드가 있으면 실행해 버립니다. 그런데 script를 head에 위치시키면 document라는 게 구성이 제대로 안 되어서 그 아래에 있는 태그를 못 찾습니다. 그래서 자바스크립트 코드를 body 태그 닫히기 전에 위치시킵니다. 또한, 자바스크립트는 소스파일 간 의존성을 이해해서 순서대로 배..
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 재귀 호출하는 것을 좀 더 개선한..