callback hell
-
자바스크립트에서 비동기 호출은 이해하기가 쉽지 않고 막상 코드를 작성해도 왠지 개운치가 않을 경우가 많다. 이번 포스트에서는 ES6에 추가된 Promise라는 객체를 이용해서 비동기 작업을 처리하는 방법에 대해 알아보자. 비 동기 작업과 callback hell 동기(synchronous) 작업과 비동기(asynchronous) 작업 동기 작업은 코드를 한 줄 한줄 실행하면서 이전 코드의 동작 결과를 받은 후 다음 코드가 실행되는 구조이다. 반면 비동기 작업은 코드를 실행하다가 이전 코드의 동작 결과를 받지 않고 바로 다음 코드를 실행하는 구조이다. 간단한 비동기 작업으로 setTimeout 함수를 사용해보자. let num = 0; setTimeout(() => { console.log(`작업 진행: ..
[새로운 기능] Promise_01 Callback hell과 Promise자바스크립트에서 비동기 호출은 이해하기가 쉽지 않고 막상 코드를 작성해도 왠지 개운치가 않을 경우가 많다. 이번 포스트에서는 ES6에 추가된 Promise라는 객체를 이용해서 비동기 작업을 처리하는 방법에 대해 알아보자. 비 동기 작업과 callback hell 동기(synchronous) 작업과 비동기(asynchronous) 작업 동기 작업은 코드를 한 줄 한줄 실행하면서 이전 코드의 동작 결과를 받은 후 다음 코드가 실행되는 구조이다. 반면 비동기 작업은 코드를 실행하다가 이전 코드의 동작 결과를 받지 않고 바로 다음 코드를 실행하는 구조이다. 간단한 비동기 작업으로 setTimeout 함수를 사용해보자. let num = 0; setTimeout(() => { console.log(`작업 진행: ..
2022.05.02 -
$(document).on({ // 모든 버튼을 disabled 상태로 바꿈 ajaxStart: function () { $("button").prop("disabled", true); }, // 모든 버튼을 enabled 상태로 바꿈 ajaxStop: function () { $("button").prop("disabled", false); }, }); 이번에는 jquery를 이용해서 vanilla script에서의 너저분했던 코드를 간략히 처리해보자. AJAX를 위한 jQuery API 기본 함수 메서드 설명 $.get() 데이터를 get 방식으로 서버에 전송 후 응답을 받을 때 사용 $.post() 데이터를 post 방식으로 서버에 전송 후 응답을 받을 때 사용 $.getJSON() 데이터를 get..
[ajax]3. jquery를 이용한 ajax$(document).on({ // 모든 버튼을 disabled 상태로 바꿈 ajaxStart: function () { $("button").prop("disabled", true); }, // 모든 버튼을 enabled 상태로 바꿈 ajaxStop: function () { $("button").prop("disabled", false); }, }); 이번에는 jquery를 이용해서 vanilla script에서의 너저분했던 코드를 간략히 처리해보자. AJAX를 위한 jQuery API 기본 함수 메서드 설명 $.get() 데이터를 get 방식으로 서버에 전송 후 응답을 받을 때 사용 $.post() 데이터를 post 방식으로 서버에 전송 후 응답을 받을 때 사용 $.getJSON() 데이터를 get..
2022.03.14