도도의 IT이야기

우리는 저번에 콜백과 프로미스에 대해서 배웠다. 그리고 나는 강조했다. 콜백과 프로미스는 비동기적 AJAX request에서 많이 사용되는 것이라고. 이제 드디어 AJAX가 도데체 뭔지 배워보자. 일단 AJAX는 자바스크립트의 코어 기능 중 하나로 몇가지 중요한 일을 한다. 1. 페이지가 로딩된 후에도, 서버에서 데이터를 읽을 수 있다 2. 읽은 데이터로 HTML데이터를 새로고침하지 않고 바꿀 수 있다. 3. 백그라운드에서 서버로 데이터를 보낼 수 있다. 즉, AJAX의 주목적은 페이지의 작은 부분을 새로고침하지 않고 가져올 수 있다는 점에 있다. 이제 AJAX의 기능을 사용할 수 있는 방법에 대해서 알아보자. 1. XMLhttprequest XMLhttprequest는 전통적인 AJAX request의..

콜백을 대체할 수 있는 프로미스를 대해서 알아보거다. 하지만 그전에 콜백에 대해서 한번 복습해보자. 콜백은 다른 함수(higher-order function)의 파라미터로 전달되는 함수로써 그 higher-order이 원할때 호출될 수 있다. function add(a,b,print){ let sum = a+b; print(sum); } function result(res){ console.log(res);//3 } add(1,2,result) 이런 식으로 우리는 result 함수를 add의 인자로 보내 사용할 수 있다. 물론 위의 함수를 이런식으로도 쓸수있다. function add(a,b){ return a+b; } function result(res){ console.log(res);//3 } le..

지금까지 우리는 CSS에 어떻게 애니메이션을 더했죠? .original{ height:0px; transition: 2s ease; } .original.someAnim{ height:100px; } 우리는 우선 .original이라는 class에 element의 initial height를 지정해주고 javascript를 이용해 click/focus등등 event가 일어나면 .someAnim이라는 class를 더해줘서 animation이 일어나게 했습니다. 하지만 jQuery에서는 위와 같은 일을 굉장히 쉽게 할 수 있습니다. 기본적인 ANIMATION $('.original').animate({"height":"100px"}); 위 코드는 jQuery가 select된 element가 height 0 ..