1) 웹 애니메이션 이해와 setTimeout활용 setInterval을 쓰면 10개의 콜백이 다 실행되지 않을 수 있습니다. 예상과 다르게 동작하는 거긴하죠.하지만 이렇게 동작해서 애니메이션 자체에 큰 문제가 생기는 건 아니니(9개가 실행되는 것이 때론 더 매끄러울 수도 있죠)참고하세요. 물론 setTimeout은 지정한 횟수만큼 동작하는 것이겠죠. 1. 애니메이션 애니메이션은 반복적인 움직임의 처리입니다. 웹 UI 애니메이션은 자바스크립트로 다양하게 제어할 수 있지만, 규칙적이고 비교적 단순한 방식으로 동작하는 방식은 CSS3의 transition과 transform속성을 사용해서 대부분 구현 가능합니다. 어느 한 점부터 다른 한 점까지 이동하는 어떤 애니메이션을 자바스크립트로 구현하려면 계속 함수를..
2) 디버깅 - 크롬 개발자 도구 1. 크롬 개발자 도구의 네트워크 패널 네트워크 통신이라는 것은 소스 코드 상으로 우리가 직접 서버에 보내는 것보다는 브라우저가 우리의 소스 코드를 읽어서 필요한 부분을 서버로 요청을 보내고 응답을 받아서 화면에 띄우는 것이라 볼 수 있습니다. 대부분의 브라우저들에는 네트워크 모듈이 들어있어서 주소창에 어떤 값을 입력할 떄 서버로 GET방식의 요청이 가는 것이고 서버가 요청을 받으면 어떤 처리를 한 뒤 response를 주게 됩니다. 브라우저, 클라이언트가 그것을 다시 받아 소스 코드 상의 어떤 과정을 거친 후에 화면을 표현하게 되어있습니다. 다시 말해 클라이언트가 소스 코드를 통해 어떤 해석을 한 뒤에 필요한 브라우저에 있는 네트워크 통신 모듈을 불러 그것을 통해 서버..
1) Ajax 응답 처리와 비동기 Ajax란, 새로 고침이 일어나지 않고 서버측의 데이터를 브라우저의 화면 전환 없이 서버 측에 어떤 데이터를 별도로 요청해서 받아와서 화면에 그려주는 것입니다. 어떤 화면이 쭉 보여지다가 앞서 말한 통신 코드가 가서 서버에서 응답을 받아와서 다시 그립니다. 사용자 입장에서는 통신 코드가 서버로 갔는지 안 갔는지는 관심이 없습니다. 화면을 차례대로 렌더링하는 중에 일부 데이터에 한해 응답 데이터가 없으면 화면이 멈춰져 있거나 비어있을 것입니다. 그리고 이로 인해 사용자는 불편을 느낄 것입니다. 브라우저, 자바스크립트에서 이 방법을 해결하기 위해 Ajax를 사용하였습니다. 우선 전체적인 화면을 그리는 과정에서 만약 비동기적인 작업, 즉, Ajax와 같은 요청이 존재하면 그 ..
3) DOM APIs 실습 실습1 지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText = document.createTextNode("망고"); mango.appendChild(mangoText); var parent = document.querySelector("ul"); parent.appendChild(mango); 실습2 insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText =..