본문 바로가기

Knowledge Wiki/Javascript

 (51)
[ JavaScript ES 6 ] HTML 모듈화 1. HTML 모듈화 Web Component에 스타일 넣고 싶을 때 Shadow DOM 쓰면 좋음 Shadow DOM에서 작업한 스타일은 다른 컴포넌트에 영향을 주지 않음 2. innerHTML에 직접 HTML 코드를 하드코딩으로 박지 말고 HTML 임시보관함인 을 사용하시길. 이메일 입력 ㄱㄱ
[ JavaScript ES 6 ] Shadow DOM 1. Shadow DOM Shadow DOM은 Web Component의 숨겨진 독립적인 공간임
[ JavaScript ES 6 ] 커스텀 태그 1. 커스텀태그 길고 복잡한 HTML을 축약하는 법 html 중복제거, 다른 페이지에서 재활용 가능하기 때문에 커스텀 태그 사용 커스텀 태그 안에서도 파라미터 문법 구현 가능 attribute 변경 감지기능 제공, Vue.js의 props처럼 동작하게 구현할 수 있음 React, Vue가 커스텀태그 역할을 잘 지원해줌
[ JavaScript ES 6 ] Map, Set 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; // ..
[ JavaScript ES 6 ] Symbol 사용법 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(..
[ JavaScript ES 6 ] for in, for of 반복문 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가..
[ 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..

티스토리툴바