오늘은 Promise( '이하 프로미스' )에 대해서 정리를 해보려고 한다. Promise 자체가 정리할 게 많기 때문에 1. 프로미스 기본 사용법. 2. 프로미스를 활용한 실제 비동기 통신 이렇게 2단계로 나눠서 정리를 해보려 한다. 프로미스란 무엇일까? ============================================================================ 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미 나는 지금까지 제이쿼리를 활용한 Ajax를 사용해오다가 외부라이브러리를 활용한 Axios, ES6 내장함수인 Fetch..

예전에 setTimeout에 대한 글을 정리했으니, setTimeout의 기본문법에 대해 궁금한 사람은 (해당 링크) 확인 이번에 또 이렇게 글을 쓰게 된 건.. 이번에 async랑 await을 쓰면서 비동기 처리 함수를 동기처리 하는 걸 보고 있는데, 이 setTimeout()은 조금 다르게 동작하는 것 같아서 정리해본다.. 아래 샘플코드는 내가 처음 await으로 setTimeout함수를 사용해보려고 했던 코드와 비슷하게 맞추었다. 샘플코드 내 예상으로는 start => setTimeout log => end 가 순서대로 콘솔에 찍혀야 하는데... 결과는 아래와 같았다. 콘솔에 보이는 것처럼 동기처리가 안되고, end가 먼저 찍히고, setTimeout이 나중에 찍힌 것을 확인 할 수 있다.. 그래서..

이번에 promise를 공부할까 하다가 async와 await을 먼저 공부하게 되서 이렇게 공부한다. 계속 거꾸로 가는 느낌.. 우선 아래와 같은 코드가 있다고 해보자. ( async와 await만 볼 사람은 바로 아래로 내려가도록 하자. ) 샘플코드1 javascript는 동기적인 언어이기 때문에 한줄한줄 순서대로 실행이 될 것이다. 그럼 아래와 같은 결과가 나온다. 그럼 또 하나의 샘플코드를 보자. API통신을 했다고 생각하고 setTimeOut을 줬다.. 샘플코드2 아까도 말했듯 javascript는 동기적인 언어이기 때문에, 한줄한줄 실행이 된다. 그럼 결과는 어떻게 될까? 아래와 같이 실행된다. 동기지만, 비동기인 것처럼 실행이 되었다. 이렇게 보면 별 문제 아니겠지 라고 생각할 수 있지만, 실..

ES6에 들어오면서 축약기능이 생겼는데, 길었던 코드를 짧게 작성할 수 있도록 지원해주는 기능이다. 여기서 메소드 축약기능이 제일 마음에 든다. 어려운 건 없으니, 그냥 아래처럼 작성하면 된다. 1. 프로퍼티 축약기능 -- 기존 ES5 // 변수 x,y 선언 var x = 1, y = 2; // 객체 생성시, 키값과, value(변수명)가 똑같아도 둘 다 작성해주어야 함.. var obj = { x: x, y: y }; console.log(obj); // { x: 1, y: 2 } -- ES6 // 변수 x,y 선언 let x = 1, y = 2; // 키값과 value(변수명)이 같으면 키값을 생력할 수 있다.. const obj = { x, y }; console.log(obj); // { x: 1..

ES6에 Class문법이 생겼다는 것을 저번에 배웠는데 ( 해당 글 참조 ) ES6의 Class에서도 java와 같이 상속이 가능하다. 오늘은 상속에 대해 알아보려고 한다. 상속(inheritance)이란? ========================================================================== 상속(inheritance)이란 기존의 클래스에 기능을 추가하거나 재정의하여 새로운 클래스를 정의하는 것을 의미합니다. 이러한 상속은 캡슐화, 추상화와 더불어 객체 지향 프로그래밍을 구성하는 중요한 특징 중 하나입니다. 상속을 이용하면 기존에 정의되어 있는 클래스의 모든 필드와 메소드를 물려받아, 새로운 클래스를 생성할 수 있습니다. 상속의 정의는 위와 같다. 핵심은 ..

java를 배웠다면 Class를 많이 썼을텐데.. javascript에서는 Class를 사용해본 적이 없다. 그래서 오늘 한번 정리해보려고 한다.. ES6에서 Class문법이 추가되었고, 덕분에 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 되었다고 한다. Class ============================================================================ 기본문법 -- Class 생성 -- Class안에 여러 메서드를 정의 할 수 있음 class MyClass { constructor() {} method1() { ... } method2() { ... } method3() { ... } ... } // Class..