KorSA

1. HTML 모듈화 Web Component에 스타일 넣고 싶을 때 Shadow DOM 쓰면 좋음 Shadow DOM에서 작업한 스타일은 다른 컴포넌트에 영향을 주지 않음 2. innerHTML에 직접 HTML 코드를 하드코딩으로 박지 말고 HTML 임시보관함인 을 사용하시길. 이메일 입력 ㄱㄱ

1. Shadow DOM Shadow DOM은 Web Component의 숨겨진 독립적인 공간임

1. 커스텀태그 길고 복잡한 HTML을 축약하는 법 html 중복제거, 다른 페이지에서 재활용 가능하기 때문에 커스텀 태그 사용 커스텀 태그 안에서도 파라미터 문법 구현 가능 attribute 변경 감지기능 제공, Vue.js의 props처럼 동작하게 구현할 수 있음 React, Vue가 커스텀태그 역할을 잘 지원해줌

1. key, value를 저장하는 Map 자료형 Map 자료형은 자료간의 연관성을 표현하기 위해 사용 자료얻기 -> get() var person = new Map(); person.set('name', 'Kim'); person.set('age', 20); var person2 = new Map([ ['name', 'Kim'], ['age', 20] ]); 2. 중복자료를 허용하지 않는 Array 비슷한 Set 자료형 Set의 add(), delete(), has(), size 주로 쓰임 var book = new Set(['john', 'tom', 'andy', 'tom']); var arrBook = [...book]; // 기존 배열에서 중복 제거한 버전 구할 때 유용하게 쓰임 book; // ..

1. ES6에서 Symbol 자료형이 추가됨 심볼은 아래처럼 만들면 됨 var sym = Symbol('description'); 2. 심볼의 용도 Object 자료형의 비밀스런 key값 for in 문법으로 반복문 돌면 Symbol은 참조 안됨! Symbol은 enumerable하지 않기 때문! var secretWeight = Symbol('my secret weight'); var person = {name: 'oh'}; person[weight] = 100; 3. 심볼 넣는 다른 방법 var person = {name: 'kim', [height]: 170}; 4. 심볼 특징 1) 설명이 같아고 같은 Symbol이 아님. Symbol 생성할 때마다 고유한 Symbol임 var a = Symbol(..

1. for in 반복문 Object에 있던 값을 전부 하나씩 꺼내서 사용할 때 쓰는 문법 enumerable 한 것만 반복해줌 부모의 prototype도 반복해줌 class parent { } parent.prototype.name = "Park"; //var obj = {name: 'kim', age: 30}; var obj = new parent(); for (var key in obj){ if(obj.hasOwnProperty(key)){ // 부모꺼 빼고 내꺼만 출력 console.log(obj[key]); } } 2. for of 반복문 Array, 문자, arguments, NodeList, Map, Set 등에 사용 iterable한 자료형에만 사용 가능 -> Symbol.iterator가..

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..

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..

1. JavaScript의 비동기식 처리 -> setTimeout(), 이벤트 리스너, ajax 2. 함수들을 좀 더 안전하게 순차적 실행을 하려면 콜백 함수 사용 콜백함수는 함수 디자인 패턴일 뿐, 순차적 실행을 '반드시' 지켜주진 않음. 오래 걸리는 연산은 그냥 비동기로 실행될수도 있음. function func1(paramFunc){ console.log(1); paramFunc(); } function func2(){ console.log(2); } func1(func2));

1. 웹브라우저 동작 원리 setTimeout() 이런거는 stack에서 바로 처리하는 게 아니라 대기실에 넣어놨다가 실행시키기때문에 다른 언어의 Sleep()처럼 Pending되지 않음. 어려운 수학 계산 등 오래 걸리는 작업은 자바스크립트로 수행하면 안됨. 이 작업이 Stack을 차지하고 있어서 사용자의 UI Request가 Queue에서 Stack으로 올라가지 못하기 때문에 사용자는 "응답없음" 화면을 보게 됨. 1) stack을 바쁘게 하지 말자 2) queue를 바쁘게 하지 말자 event listener 백개 천개 달아놓는 등..