WEB

Web Components 들이 매우 많아 귀찮을 경우, 여러개의 태그들을 하나의 단어로 축약할 수 있는 문법 자바스크립트 문법은 아니고 브라우저 기본 기능 중 하나임. 커스텀 html 태그 만드는 법 예를 들어서 이라고 입력하면 이렇게 2개의 태그가 안에 출현하게 만들고 싶음 같은 커스텀 태그를 이제부터 컴포넌트라고 칭할겁니다. 컴포넌트를 만들고 싶으면 이런 형식에 따라서 그대로 타이핑만 하면 됩니다. 이건 정해진 문법이라 이해할 필요는 없고 따라치면 됩니다. class 클래스 extends HTMLElement { connectedCallback() { this.innerHTML = '이름을 입력하쇼' } } customElements.define("custom-input", 클래스); 1. 컴포넌트..

for in 반복문 Object에 사용 var 오브젝트 = { name : 'Kim', age : 30 }; for (var key in 오브젝트) { console.log(오브젝트[key]); // Kim 30 } 특징 1. 셀수있는 것만 출력해줌(enumerable) var 오브젝트 = { name : 'Kim', age : 30 }; console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); //{value: "Kim", writable: true, enumerable: true, configurable: true} enumerable이 true인 자료들만 for in 반복문이 출력가능 2. 부모의 prototype에 저장된 것도 출력 class ..

Promise 성공하면 then(), 실패하면 catch()를 실행 1. 일단 new Promise()로 생성된 변수를 콘솔창에 출력해보시면 현재 상태를 알 수 있음 성공/실패 판정 전에는 성공 후엔 실패 후엔 이렇게 프로미스 오브젝트들은 3개 상태가 있습니다. 그리고 성공을 실패나 대기상태로 다시 되돌릴 순 없음 2. Promise는 동기를 비동기로 만들어주는 코드가 아님 Promise는 비동기적 실행과 전혀 상관이 없습니다. 그냥 코딩을 예쁘게 할 수 있는 일종의 디자인 패턴입니다. var 프로미스 = new Promise(function(성공, 실패){ var 어려운연산 = 1 + 1; 성공(); }); 프로미스.then(function(){ console.log('연산이 성공했습니다') }).ca..

Array 안에 있는 데이터를 변수에 담는 방법 var array = [2,3,4]; var a = array[0]; var b = array[1]; var [a,b,c] = [2,3,4]; //디폴트값도 가능 var [a,b,c = 5] = [2,3]; Object 안에 있는 데이터를 변수에 담는 방법 var { name : a, age : b } = { name : 'Kim', age : 30 }; var { name, age } = { name : 'Kim', age : 30 }; //name = 'Kim' 변수를 object로 집어넣고 싶은 경우 key값과 value값이 동일하면 하나로 생략이 가능 var name = 'Kim'; var age = 30; var obj = { name, age }..

말풍선을 어떻게 만들지? scope프로젝트에서는 테스트진행 페이지에 진행도를 나타내는 프로그래스바가 있었고 그 상태게이지 상단에 말풍선모양의 디자인을 구현해야하는 와이어 프레임을 전달 받았다. svg형태로 가져다 쓰면 편하겠지만 css로 만들어 보고싶었다. border-width, ::before, ::after 이 3가지가 핵심 - border-width : top, right,bottom, left 순서로 적용 - ::before는 중심컨텐츠앞 ::after는 뒤에 배치 const ArrowBubble = styled.div` position: relative; width: 100%; height: 25px; padding: 0 5px; background: #f1f9ff; /* -webkit-bor..

Constructor 비슷한 object를 쉽게 찍어낼수 있는 문법 constructor안에서 쓰이는 this는 새로생성되는 object를 뜻함 상속(inheritance)이라함 - this : 기계에서 새로 생성되는 object (instance) - 기계 : object생성기(constructor, 생성자) //var 학생1 = { name : 'Kim', age : 15 }; function 기계(이름,나이){ this.name = 이름; this.age = 나이; this.sayHi = function() { console.log('안녕하세요'+ this.name +'입니다') } } var 학생1 = new 기계('park',13); //기계 {name: 'park', age: 13, sayHi..

만능 for문 하지만.. 개발하다보면 배열에서 뭘 꺼내서 지지고볶고할일이 참 많다. 특히 알고리즘을 풀다보면 다 이러한 것들인데 응용력이 떨어지는 내겐 그저 for문과 map돌리는것외엔 생각나는게 없다. 그래서 코드가 더 직관적이고 깔끔하고 쓰임새가 많은 배열함수들이 정리가필요했다. 1. Array.forEach Array.forEach(element => { }); 배열안에 요소에 어떤 작업을 수행할때 let words = ['a','b','c','d'] words.forEach(word => { console.log(word) }); // a // b // c // d words.forEach((word,index) => { console.log(word,index) }); // a 0 // b 1 ..

함수의 default 파라미터 넣기 가능 등호, 수학연산자, 다른파라미터와 연산도 가능하고 함수도 넣을수있음 function 더하기 (a, b = 10){ console.log(a + b) } 더하기(1); // 11 function 더하기 (a, b = 2 * 5){ console.log(a + b) } 더하기(1); // 11 function 더하기 (a, b = 2 * a){ console.log(a + b) } 더하기(3); // 9 function 임시함수(){ return 10 } function 더하기 (a, b = 임시함수() ){ console.log(a + b) } 더하기(3); // 13 함수의 arguments arguments는 입력된 파라미터를 [ ] 안에 감싸주어 파라미터들을 ..

Spread Operator ... 쓰면 괄호제거해주는 연산자 1. 배열에 붙이면 대괄호제거 2. 문자에 붙이면 단어하나씩 해체 var 어레이 = ['hello', 'world']; console.log(어레이); //['hello', 'world'] console.log(...어레이); //hello world var 문자 = 'hello'; console.log(...문자) //'h','e','l','l','o' ✔ 활용방법 1. Array 합치기 var a = [1,2,3]; var b = [4,5]; var c = [...a, ...b]; //[1,2,3,4,5] //Deep Copy var d = [1,2,3]; var e = [...d]; d[3] = 4; console.log(d) // [1..

1. template literals (backquote, backtick)을 사용하는 이유 1. 문자 중간 엔터키 입력이 가능 var 문자 = `안녕 하세요`; 2. 문자 중간에 변수를 집어넣을 때 편리 var 이름 = '손흥민'; var 문자 = `안녕하세요 ${이름} 입니다`; var 템플릿 = `${변수명}`; 2. tagged literals S6는 tagged literals라고 해서 함수로 문자 해체분석기능을 만들어줄 수 있음 var 변수 = '손흥민'; function 해체분석기(문자들, 변수들){ console.log(문자들); console.log(변수들); } 해체분석기`안녕하세요 ${변수} 입니다`; // ['안녕하세요 ', ' 입니다', raw: Array(2)] // 손흥민 CA..