Javascript/ECMAScript 2015 (ES6)
-
AxiosJavascript/ECMAScript 2015 (ES6) 2022. 9. 28. 20:02
Axios 서드파티 라이브러리로 CDN 혹은 npm 이나 yarn과 같은 패키지 매니저를 통해 설치하여 프로젝트에 추가할 수 있습니다. Axios는 브라우저 혹은 node.js 환경에서 실행할 수 있습니다. 설치하기 NPM을 사용하여 설치 npm install axios Yarn을 사용하여 설치 yarn add axios 그 후 프로젝트에서 import 해야 합니다. import axios from "axios"; 만약 브라우저에서 Axios를 사용한다면 아래와 같이 CDN을 사용할 수 있습니다. 문법 fetch와 문법은 비슷하나, 다양한 방법으로 요청할 수 있습니다. axios(url, { // 설정 옵션 }); HTTP 메서드를 붙일 수도 있습니다. axios.get(url, { // 설정 옵션 })..
-
비동기 처리 - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2015 (ES6) 2020. 6. 25. 23:19
[출처 : https://learnjs.vlpt.us] 비동기 처리 다루기 자바스크립트의 동기적 처리와 비동기 처리에 대해서 알아봅시다. 만약 작업을 동기적으로 처리한다면 작업이 끝날 때까지 기다리는 동안 중지 상태가 되기 때문에 다른 작업을 할 수 없습니다. 그리고 작업이 끝나야 비로소 그 다음 예정된 작업을 할 수 있죠. 하지만 이를 비동기적으로 처리를 한다면 흐름이 멈추지 않기 때문에 동시에 여러 가지 작업을 처리할 수도 있고, 기다리는 과정에서 다른 함수도 호출할 수 있습니다. 그러면, 한번 코드를 보고 이해해봅시다. 연산량이 많은 작업을 처리하는 함수를 만들어보겠습니다. function work() { const start = Date.now(); for (let i = 0; i < 100000..
-
유용한 JS 문법(2) - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2015 (ES6) 2020. 6. 24. 23:43
[출처 : https://learnjs.vlpt.us] spread 일단 spread 문법부터 알아봅시다. spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 입니다. 이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다. 예를 들어서 다음과 같은 객체들이 있다고 가정해봅시다. const slime = { name: '슬라임' }; const cuteSlime = { name: '슬라임', attribute: '귀여운' }; const purpleCuteSlime = { name: '슬라임', attribute: '귀여운', color: '보라' }; console.log(slime); // {name: "슬라임"} console.log(cuteSlime); // {name: "슬라임", at..
-
JavaScript 입문(1) - 모던 자바스크립트 | 김민준Javascript/ECMAScript 2015 (ES6) 2020. 6. 18. 19:08
[출처 : https://learnjs.vlpt.us] 템플릿 리터럴 ES5 : function hello(name) { return "hello, " + name } console.log(hello("AGAL")); ES6 : function hello(name) { return `hello, ${name}` } console.log(hello("AGAL")); *함수에서는 return이 사용된 순간, 함수가 종료된다. 화살표 함수 const hello = (name) => { return `hello, ${name}` } console.log(hello("AGAL")); 함수 내부에서 어떤 값을 바로 return 할 경우 : const hello = (name) => `hello, ${name}`; ..
-
제너레이터와 async/awit - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 26. 19:11
[출처 : https://poiemaweb.com] 1. 제너레이터란? ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. // 이터레이션 프로토콜을 구현하여 무한 이터러블을 생성하는 함수 const createInfinityByIteration = function () { let i = 0; // 자유 변수 return { [Symbol.iterator]() { return this; }, next() { return { value: ++i }; } }; }; for (const in crea..
-
이터레이션과 for...of 문 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 18. 19:11
[출처 : https://poiemaweb.com] 1. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 이터러블 프로토콜(iterable protocol)과 이터레이터 프로토콜(iterator protocol)이 있다. *프로토콜 : 컴퓨터나 통신장비들이 메시지를 주고받을 때 지켜야 하는 규칙들의 체계적인 집합, 미리 약속된 규칙 1-1. 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 Symbol.iterator 메소드를 구현하거나 프로토타입 체인에..
-
7번째 타입 심볼(Symbol) - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 17. 18:48
[출처 : https://poiemaweb.com] 1. Symbol이란? 1997년 자바스크립트가 ECMAScript로 처음 표준화된 이래로 자바스크립트는 6개의 타입을 가지고 있었다. # 원시 타입 (primitive data type) ㆍBoolean ㆍnull ㆍnudefined ㆍNumber ㆍString # 객체 타입 (Object type) ㆍObject 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 2. Symbol의 생성 # Symbol은 Symbol() 함수로 생성한다. Symbol() 함수는 호출될 때마다 Symbol 값..
-
프로미스 - 문법 | PoiemawebJavascript/ECMAScript 2015 (ES6) 2020. 3. 13. 17:29
[출처 : https://poiemaweb.com] 1. 프로미스란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 가독성이 나쁘고 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며 여러 개의 비동기 처리 로직을 한꺼번에 처리하는 것도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입하였다. Promise는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현한다. 2. 콜백 패턴의 단점 2-1. 콜백 헬 # 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 수행한다. 즉, 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 ..