JavaScript
-
비동기 작업을 처리할 때 async와 await 키워드를 이용할 수도 있다. async와 await는 ECMAScript 2017에 추가되어 Promise 보다도 더 따끈따끈하다. 기존 Promise의 답답함 앞서 살펴봤던 Promise는 잘 동작하지만 연계 동작을 처리하기 위해서는 then() then() 식으로 계속 chaining 해주는 과정이 필요하다. function thenHell(init) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(init * 10); }, 1000); }); } let result = thenHell(4) .then((val) => { return new Promise((resolve, r..
[새로운 기능] async와 await비동기 작업을 처리할 때 async와 await 키워드를 이용할 수도 있다. async와 await는 ECMAScript 2017에 추가되어 Promise 보다도 더 따끈따끈하다. 기존 Promise의 답답함 앞서 살펴봤던 Promise는 잘 동작하지만 연계 동작을 처리하기 위해서는 then() then() 식으로 계속 chaining 해주는 과정이 필요하다. function thenHell(init) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(init * 10); }, 1000); }); } let result = thenHell(4) .then((val) => { return new Promise((resolve, r..
2022.05.02 -
이번 포스트에서는 Promise의 chaining에 대해 살펴보자. Promise의 Chaining 하지만 간단한 Promise의 사용은 기존 방식 대비 코드가 훨씬 복잡해진 느낌이다. 분명 좋다고 했는데.. then과 catch의 반환 Promise의 then이나 catch는 다시 Promise 인스턴스를 반환하는데 이 Promise의 동작은 then 및 catch의 handler의 반환값에 따라 약간씩 다르다. then, catch의 리턴과 handler의 return이 다르다는 점을 유념하자!! handler가 특정 값(ⓐ)이나 resolve된 promise(ⓑ)을 반환하는 경우 then/catch에서 반환된 promise는 ⓐ 또는 ⓑ의 결과값을 다음 then의 handler에게 전달한다. han..
[새로운 기능] Promise_03 Promise 기본 사용법이번 포스트에서는 Promise의 chaining에 대해 살펴보자. Promise의 Chaining 하지만 간단한 Promise의 사용은 기존 방식 대비 코드가 훨씬 복잡해진 느낌이다. 분명 좋다고 했는데.. then과 catch의 반환 Promise의 then이나 catch는 다시 Promise 인스턴스를 반환하는데 이 Promise의 동작은 then 및 catch의 handler의 반환값에 따라 약간씩 다르다. then, catch의 리턴과 handler의 return이 다르다는 점을 유념하자!! handler가 특정 값(ⓐ)이나 resolve된 promise(ⓑ)을 반환하는 경우 then/catch에서 반환된 promise는 ⓐ 또는 ⓑ의 결과값을 다음 then의 handler에게 전달한다. han..
2022.05.02 -
이번 포스트에서는 Promise객체를 이용해서 Callback Hell에서 탈출해보자. Promise Promise의 상태 Promise는 총 3개의 상태를 갖는다. 최초로 Pending 상태에 있다가 fulfilled와 rejected 상태로 변경되고 이후 작업을 완료하거나 다른 Promise를 체이닝하여 사용할 수 있다. Pending(대기): 실제 작업을 위한 준비 단계로 Promise 객체 생성 및 fulfilled, rejected 상황에서 호출할 handler 함수 바인딩한다. fulfilled(이행): 동작이 성공적으로 완료된 상태이다. rejected(거부): 동작이 실패한 상태이다. settled(확정): pending이 아니고 fulfilled 또는 rejected 된 상태로 다음 동작..
[새로운 기능] Promise_02 Promise 기본 사용법이번 포스트에서는 Promise객체를 이용해서 Callback Hell에서 탈출해보자. Promise Promise의 상태 Promise는 총 3개의 상태를 갖는다. 최초로 Pending 상태에 있다가 fulfilled와 rejected 상태로 변경되고 이후 작업을 완료하거나 다른 Promise를 체이닝하여 사용할 수 있다. Pending(대기): 실제 작업을 위한 준비 단계로 Promise 객체 생성 및 fulfilled, rejected 상황에서 호출할 handler 함수 바인딩한다. fulfilled(이행): 동작이 성공적으로 완료된 상태이다. rejected(거부): 동작이 실패한 상태이다. settled(확정): pending이 아니고 fulfilled 또는 rejected 된 상태로 다음 동작..
2022.05.02 -
자바스크립트에서 비동기 호출은 이해하기가 쉽지 않고 막상 코드를 작성해도 왠지 개운치가 않을 경우가 많다. 이번 포스트에서는 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 -
기존의 javascript에서는
[새로운 기능] module 시스템기존의 javascript에서는
2022.05.02 -
arror function은 함수를 표현하는 새로운 방식으로 자바의 lambda 식을 생각하면 되겠다. arrow function arrow function을 이용한 간편한 함수 선언 가능 arrow 표현식은 자바의 람다와 마찬가지로 함수 선언을 간단히 할수 있게 도와주는데 다음과 같은 간단한 규칙이 있다. function 키워드는 생략하고 => 로 대체 한다. 구현부가 하나의 문장일 경우 {} 를 생략할 수 있다. 실행문이 return 문장 하나로 구성된 경우 {}와 함께 return 을 생략할 수 있다. 파라미터가 하나인 경우 ()를 생략할 수 있다. arrow 표현식의 작성 예 전달된 이름을 반환하는 함수를 전통의 방식과 arrow 표현식으로 작성해보자. let func = function (nam..
[새로운 기능] arrow functionarror function은 함수를 표현하는 새로운 방식으로 자바의 lambda 식을 생각하면 되겠다. arrow function arrow function을 이용한 간편한 함수 선언 가능 arrow 표현식은 자바의 람다와 마찬가지로 함수 선언을 간단히 할수 있게 도와주는데 다음과 같은 간단한 규칙이 있다. function 키워드는 생략하고 => 로 대체 한다. 구현부가 하나의 문장일 경우 {} 를 생략할 수 있다. 실행문이 return 문장 하나로 구성된 경우 {}와 함께 return 을 생략할 수 있다. 파라미터가 하나인 경우 ()를 생략할 수 있다. arrow 표현식의 작성 예 전달된 이름을 반환하는 함수를 전통의 방식과 arrow 표현식으로 작성해보자. let func = function (nam..
2022.05.02 -
es2015에서는 객체를 쉽게 표현하고 분리하거나 추출하는 기능을 제공한다. Vue등 framework에서 많이 볼 수 있는 형태이므로 잘 배워두자. Enhanced Object Literal(강화된 객체 표현) 강화된 객체 표현(Enhanded Object Literal)은 객체를 표현할 때 좀 더 간결한 문법을 제공하는데 2가지의 개선이 이뤄졌다. property shorthand: 객체의 속성과 값이 같을 경우는 하나만 사용한다. consise method: 객체에 함수 속성을 정의할 때 강화된 객체 표현 사용 먼저 기존에 객체를 정의하던 형태를 살펴보자. let language = "javascript"; let oldStyle = { language: language, sayLang: funct..
[새로운 기능] 강화된 객체 표현과 연산자es2015에서는 객체를 쉽게 표현하고 분리하거나 추출하는 기능을 제공한다. Vue등 framework에서 많이 볼 수 있는 형태이므로 잘 배워두자. Enhanced Object Literal(강화된 객체 표현) 강화된 객체 표현(Enhanded Object Literal)은 객체를 표현할 때 좀 더 간결한 문법을 제공하는데 2가지의 개선이 이뤄졌다. property shorthand: 객체의 속성과 값이 같을 경우는 하나만 사용한다. consise method: 객체에 함수 속성을 정의할 때 강화된 객체 표현 사용 먼저 기존에 객체를 정의하던 형태를 살펴보자. let language = "javascript"; let oldStyle = { language: language, sayLang: funct..
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