수민정의 기술블로그

개요 JavaScript 비동기 처리 패턴 중 가장 최근에 나온 문법 체계이다. CallBack 함수, Promise 의 단점을 개선하고 클린 코드를 작성할 수 있게 해준다. 클린코드 스스로 생각하기에 클린코드를 짜는 개발자가 정말 대단한 개발자라고 생각하고는 한다. 읽은 그대로, 이해한 그대로 코드를 구성하는 것이 async & await 문법의 탄생 목적이다. var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } // HTTP 통신 코드 라고 가정하였을 시 해당 코드가 async & await 문법 적용 형태이다. var user = fetchUser('domain.com/users/1'); ..

Promise 는 JavaScript 비동기 처리에 사용되는 객체이다. Promise 의 주 사용처는 서버에서 받아온 데이터를 표시하는데 있다. 기초 학습 //인자로 함수를 받아 응답데이터를 매개 값으로 넘김 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); }); } // tableData 로깅 getData(function(tableData) { console.log(tableData); }); Promise 사용 function getData(callback) { // 프로미스 객체를 추가 return new Promise(function(resolve, reje..

Java Script 의 비동기 처리는 특정 코드의 연산이 끝나기 전까지 Thread 가 Blocking 되지않고 다음 코드를 실행하며, 이후 CallBack 으로 연산 결과를 받는 자바스크립트의 특성을 의미한다. 사례 Ajax 가 대표적이다. 해당 코드는 Blocking 되지않고 내려가기 때문에 log 결과는 undefined 이다. function getData() { var tableData; $.get('https://domain.com/products/1', function(response) { tableData = response; }); return tableData; } console.log(getData()); // undefined setTimeout() 해당 Web API 도 Bloc..

ECMAScript 2015 Front End Framework 의 React, Angular, Vue 에서 권고하는 형식이다. 문법이 간결하며 코딩방식이 편해진다. Babel 브라우저 중 ES6 를 지원하지않는 브라우저 있으므로 이를 transpiling 하는 기능이 필요하다. 그러므로 Babel 을 사용하게 된다. Webpack 이 만든 js를 Babel 이 모든 브라우저가 호환 되게 끔 변환시킨다. Webpack.config.js 에 Module 란의 loader 에 기술되어 있는 것으로 기억난다. { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, Const & Let Closer 단위의 Variable Scope 를 정의하는 ..