비동기 작업을 처리할 때 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..

이번 포스트에서는 fetch api에 대해서 살펴보자.fetch는 '가져오다'라는 뜻으로 Request나 Response와 같은 객체를 이용해서 HTTP 파이프라인을 구성하는 요소를 조작하고 원격지에서 정보를 가져오기 위해 사용한다. 원문에 설명된 내용을 쓰다보니 말이 어려워졌는데 가장 쉽게 이해할 수 있는 예로 AJAX를 들 수 있다. 기존에는 AJAX를 Vanilla script에서 사용하기 위해서는 XMLHttpRequest 객체를 이용했는데 너무 번거롭기 때문에 jQuery나 Axios 같은 추가 라이브러리를 활용 했었다.하지만  fetch API를 사용하면 간단하게 ajax 작업의 처리가 가능하다. fetch api fetch API?fetch API는 Promise 를 기반으로 동작한다. ht..

이번 포스트에서는 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에게 전달한다.handle..

이번 포스트에서는 Promise객체를 이용해서 Callback Hell에서 탈출해보자. Promise Promise의 상태Promise는 총 3개의 상태를 갖는다. 최초로 Pending 상태에 있다가 fulfilled와 rejected 상태로 변경되고 이후 작업을 완료하거나 다른 Promise를 체이닝하여 사용할 수 있다.Pending(대기): 실제 작업을 위한 준비 단계로 Promise 객체 생성 및 fulfilled, rejected 상황에서 호출할 handler 함수 바인딩한다.fulfilled(이행): 동작이 성공적으로 완료된 상태이다.rejected(거부): 동작이 실패한 상태이다.settled(확정): pending이 아니고 fulfilled 또는 rejected 된 상태로 다음 동작 처리 가..

자바스크립트에서 비동기 호출은 이해하기가 쉽지 않고 막상 코드를 작성해도 왠지 개운치가 않을 경우가 많다. 이번 포스트에서는 ES6에 추가된 Promise라는 객체를 이용해서 비동기 작업을 처리하는 방법에 대해 알아보자.  비 동기 작업과 callback hell 동기(synchronous) 작업과 비동기(asynchronous) 작업동기 작업은 코드를 한 줄 한줄 실행하면서 이전 코드의 동작 결과를 받은 후 다음 코드가 실행되는 구조이다. 반면 비동기 작업은 코드를 실행하다가 이전 코드의 동작 결과를 받지 않고 바로 다음 코드를 실행하는 구조이다. 간단한 비동기 작업으로 setTimeout 함수를 사용해보자.let num = 0;setTimeout(() => { console.log(`작업 진행: $..

기존의 javascript에서는  입력사항  출력사항  핵심 컨셉 고려사항  입력사항  출력사항  핵심 컨셉 고려사항  입력사항  출력사항  핵심 컨셉 고려사항  입력사항  출력사항  핵심 컨셉 고려사항  입력사항  출력사항  핵심 컨셉 고려사항  입력사항  출력사항  -->

arror function은 함수를 표현하는 새로운 방식으로 자바의 lambda 식을 생각하면 되겠다. arrow function arrow function을 이용한 간편한 함수 선언 가능 arrow 표현식은 자바의 람다와 마찬가지로 함수 선언을 간단히 할수 있게 도와주는데 다음과 같은 간단한 규칙이 있다. function 키워드는 생략하고 => 로 대체 한다. 구현부가 하나의 문장일 경우 {} 를 생략할 수 있다. 실행문이 return 문장 하나로 구성된 경우 {}와 함께 return 을 생략할 수 있다. 파라미터가 하나인 경우 ()를 생략할 수 있다. arrow 표현식의 작성 예 전달된 이름을 반환하는 함수를 전통의 방식과 arrow 표현식으로 작성해보자. let func = function (nam..

es2015에서는 객체를 쉽게 표현하고 분리하거나 추출하는 기능을 제공한다. Vue등 framework에서 많이 볼 수 있는 형태이므로 잘 배워두자. Enhanced Object Literal(강화된 객체 표현) 강화된 객체 표현(Enhanded Object Literal)은 객체를 표현할 때 좀 더 간결한 문법을 제공하는데 2가지의 개선이 이뤄졌다.property shorthand: 객체의 속성 이름과 참조하려는 변수의 이름이 같을 경우는 하나만 사용concise method: 객체에 함수 정의 시 속성 이름을 함수 이름으로 사용 강화된 객체 표현 사용먼저 기존에 객체를 정의하던 형태를 살펴보자.let language = "javascript";let oldStyle = { language: la..