이번 포스트에서는 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: 객체의 속성과 값이 같을 경우는 하나만 사용한다.consise method: 객체에 함수 속성을 정의할 때  강화된 객체 표현 사용먼저 기존에 객체를 정의하던 형태를 살펴보자.let language = "javascript";let oldStyle = { language: language,..

이번 포스트에서는 vanilla javascript를 이용한 ajax 처리에 대해서 살펴보자.사실 대부분의 경우 fetch나 axios등을 사용하겠지만 어차피 모두들 맨 마지막에는 이 vanilla javascript가 동작하는 거니까 한번쯤은 사용해볼만 하다.AJaxAjax란 Asynchronous JavaScript And XML의 약자로 말 그대로 비 동기로 처리되는 JavaScript와 XML을 의미한다. AJAX의 개요ajax는 JavaScript 기반으로 동작하며 전달되는 데이터의 형태로 XML을 사용하기 때문이다. 물론 최근에는 XML 보다 JSON 형태를 많이 사용하지만 적어도 개념이 나왔을 때는 XML을 많이 사용했었다.Ajax의 주요 사용처는 화면의 전환 없이 클라이언트와 서버간에 XM..