본문 바로가기

Knowledge Wiki/Javascript

 (51)
[ 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..
[ JavaScript ES 6 ] prototype 1. prototype - 상속을 구현할 수 있는 또 하나의 문법 prototype은 '유전자' prototype에 값을 추가하면 모든 자식들이 물려받기 가능 function machine(){ this.name= 'mac'; } machine.prototype.gender = 'neutral'; // 멤버가 아니어도 출력이 가능...!! 유전자에 등록되어 있기 때문 console.log(machine.gender); // "neutral" '.' 키워드는 맨 처음에 멤버 변수를 탐색하고 없으면 prototype을 탐색한다. 2. 내장함수 obj.toString(); // toString()은 Object/Array에 붙일 수 있는 내장함수 3. prototype 특징 1) 함수에만 생김 2) 내 부모 ..
[ JavaScript ES 6 ] Spread Operator 1. Spread Operator -> 쉽고 유용해서 많이 씀 Array의 대괄호를 제거하는 문법 문자열을 문자로 나열하는 문법 var arr = ['hello', 'world']; console.log(...arr); // "hello world" var str = 'hello'; console.log(...str); // h e l l o 2. Spread Operator 사용 예 1) List 합치기 var a = [1,2,3]; var b= [4,5]; var c= [...a, ...b]; console.log(c); // 1 2 3 4 5 2) Obj 합치기 (Deep Copy) -> Spread Operator는 대괄호 뿐만 아니라 중괄호도 풀어준다! var obj1 = {a:1, b:2}; ..

티스토리툴바