본문 바로가기

Knowledge Wiki

 (169)
[ JavaScript ES 6 ] async, await 1. ES8부터 Promise 대신 async/await 문법 사용 가능 async를 function 앞에 붙이면 함수 실행 후에 Promise 오브젝트가 남음 But, async는 Promise와 달리 기본적으로 reject 처리가 안됨. 정 하고 싶으면 Promise.reject()를 리턴해야 함. async function add(){ return 1 + 1; } add().then(function(res){ console.log(res); }) 2. await은 then() 대신 사용 가능 var pro = new Promise(function(resolve, reject){ resolve(); }); var result = await pro; // Promise가 끝날 때까지 기다려! conso..
[ JavaScript ES 6 ] Promise 1. 콜백함수는 여러번 쓸수록 depth가 깊어지고 가독성이 안좋아지는 문제가 있음 -> 더 쉽게 쓰기 위해 탄생한게 Promise 패턴 // Callback func1(function(){ func2(function(){ func3(function(){ }) }) }); // Promise func1().then(function(){ }).then(function(){ }) 2. Promise는 코드 디자인 패턴이다. var pro = new Promise(); pro.then(function(){ }); 3. Promise는 이전 작업이 성공할 경우 then(), 실패할 경우 catch()를 사용해서 모든 경우에 대비할 수 있도록 해줌 4. Promise는 성공/실패 판정 기계 var pro = ne..
[ JavaScript ES 6 ] 비동기식 처리 1. JavaScript의 비동기식 처리 -> setTimeout(), 이벤트 리스너, ajax 2. 함수들을 좀 더 안전하게 순차적 실행을 하려면 콜백 함수 사용 콜백함수는 함수 디자인 패턴일 뿐, 순차적 실행을 '반드시' 지켜주진 않음. 오래 걸리는 연산은 그냥 비동기로 실행될수도 있음. function func1(paramFunc){ console.log(1); paramFunc(); } function func2(){ console.log(2); } func1(func2));
[ JavaScript ES 6 ] 웹브라우저 동작 원리 1. 웹브라우저 동작 원리 setTimeout() 이런거는 stack에서 바로 처리하는 게 아니라 대기실에 넣어놨다가 실행시키기때문에 다른 언어의 Sleep()처럼 Pending되지 않음. 어려운 수학 계산 등 오래 걸리는 작업은 자바스크립트로 수행하면 안됨. 이 작업이 Stack을 차지하고 있어서 사용자의 UI Request가 Queue에서 Stack으로 올라가지 못하기 때문에 사용자는 "응답없음" 화면을 보게 됨. 1) stack을 바쁘게 하지 말자 2) queue를 바쁘게 하지 말자 event listener 백개 천개 달아놓는 등..
[ JavaScript ES 6 ] import, export 1. ES6에서 import&export를 이용하여 파일간 모듈식 개발 가능 는 옛날 방식, but 호환성은 그만큼 좋음 require()도 옛날 방식 // main.js // library.js var a =10; export default a; 2. export default는 파일 하나당 한번만 사용 가능 여러개 export 하려면 export {a, b, c}; 이렇게 하거나 export {a}; export {b}; 이렇게 하거나 export var a = 10; 이렇게 하면 됨 3. export를 여러개 하는 파일을 import할 때에는 export 변수명과 똑같이 맞춰서 써주어야 함. 똑같이 맞추는 게 기존이지만 이름을 재지정해줄 수 있음 import {a as myA} from '/libr..
[ JavaScript ES 6 ] Destructuring 1. Destructuring ES6에서 Array로부터 변수 만들기 좀 더 쉬워짐 var [a,b,c] = [2,3,4]; 2. Destructuring 하면서 몇개 빼먹을 경우를 대비해 default 값 지정 가능 var [a,b,c = 10] = [2,3]; 3. Object 데이터의 Destructuring 변수명을 key명과 똑같이 써주어야 함 var { name, age } = { name : 'Kim', age : 30 }; // 변수명 변경 가능하고 default 값 지정도 가능 var { name : myName, age = 31 } = { name : 'Kim' }; 4. Destructuring을 역으로 이용하는 방법이 많이 쓰임 var name = 'Kim'; var age = 30..
[ JavaScript ES 6 ] getter, setter 1. ES5부터 getter, setter 문법이 추가됨 get 함수들 -> return이 있어야 함, 파라미터가 없어야 함 set 함수들 -> 파라미터가 1개 있어야 함
[ JavaScript ES 6 ] 상속 1. ES5 상속 기능 -> 2010년 부터는 ES5 스타일로 상속을 쉽게 구현함 child.create(parent); // parent를 상속받아 child를 생성, 즉 child의 prototype이 parent가 됨 2. ES6 상속 기능 -> 타 객체지향언어 스타일 class parent { constructor(){ this.name = 'Kim'; this.sayHi = function(){} } sayHi2(){ } } var child = new parent(); child.sayHi(); // 있음 chid.sayHi2(); // 없음. constructor에 선언된게 아니니까. 3. extends 와 super class granpa { constructor(name){ this.fi..

티스토리툴바