JavaScript ES6
-
shadow Dom, template로 html모듈화JavaScript ES6 2022. 6. 3. 13:54
이런 태그들이 위처럼 생긴건 shadow DOM덕분이다. 저건 실제로 div태그들을 겹쳐서 만든건데, 개발자도구에서 'show user agent shadow DOM'을 클릭하면 확인가능하다. 이 shadow DOM을 만들어보자. 기본적으론 html태그를 찾고, 거기에 attachShadow를 붙여서 shadowRoot를 열어주고, 거기에 숨길 태그를 넣어주는 것이다. 이걸 Web Components와 합치면 html모듈을 만들 수 있다. 이메일인풋이에요 여기서 만약 스타일을 넣고 싶을때, innerHTML에 태그를 넣어서 label {color:red} 하면 모든 label태그가 빨간색이 된다. 이렇게 쓰면 컴포넌트끼리 스타일도 겹치기 때문에 위험하다. 이럴때, shadow DOM을 쓰면 좋다. 위처럼..
-
Web components로 커스텀 html태그 만들기JavaScript ES6 2022. 6. 3. 10:29
반복되는 html태그가 있으면 하나의 태그로 축약하고 싶을때가 있다. 이럴땐, Web components인 js문법으로 구현할 수 있는 브라우저 기본 기능을 이용하면 된다. customElements.define('custom-input',HTML~); 이렇게, custom-input처럼 작명을 해주고 뒤에는 html태그를 넣으면 된다. html은 클래스형태로 넣어주면 된다. 위처럼 class을 만들고, connectedCallback() {}에 this를 써서 custom-input태그에 들어갈 html을 작성해준다. 여기서, this는 새로 생성될 요소를 뜻한다. 그래서 이 요소에 innerHTML을 써서 넣어주면 된다. 혹은, let 변수 = document.createElement('label')..
-
Map / Set자료형JavaScript ES6 2022. 6. 3. 10:29
먼저, Map 자료형을 알아보자. map자료형은 똑같히 Key, Value를 저장하는 자료형이다. var person = new Map(); person.set('name', 'Kim'); // key, value 위처럼 person이란 map자료형을 만들고 set 키워드를 이용해서 key와 value를 저장한다. map자료형은 { "name" => "Kim" } 이런 식으로 화살표로 저장이 된다. 화살표가 있는 이유는 map자료형이 자료간의 연관성을 표현하기 위해서 사용하기 때문이다. Object 자료형은 자료이름(key값)으로 글자만 가능한데, Map자료형은 key값으로 다 가능하다. 자료 출력은 get키워드를 이용한다. person.get('name'); 이렇게 get(key값)으로 값을 출력할 수..
-
Symbol자료형JavaScript ES6 2022. 6. 3. 10:01
심볼을 만드는 방법은 Symbol('설명') 이렇게 만든다. var 심볼 = Symbol('설명'); 심볼의 용도는 Object 자료형의 비밀스런 Key값이다. var person = { name : 'Kim' }; person.weight = 100; 이런 식으로, 오브젝트에 추가하면 사람들에게 다 보이게 된다. 그럴때, var weight = Symbol('내 시크릿 몸무게임'); var person = { name : 'Kim' }; //key값에는 문자만 가능했는데, ES6부터 symbol을 넣을 수 있다. person[weight] = 100; 이렇게 심볼을 만들고, 오브젝트명[추가할심볼키값] = 심볼의value값 이렇게 추가해주면 된다. 이렇게 만든 key와 value는 반복문에서 출력이 되지..
-
for in / for of 반복문JavaScript ES6 2022. 6. 2. 04:04
for in / for of 반복문과 enumerable, iterable에 대해 알아보자. 자바스크립트의 반복문에는 for문, forEach()반복문 ( Array전용 ), for in 반복문 ( Object전용 ), for of 반복문 ( iterable전용 )이 있다. 첫번째 단순 반복문은, 코드를 여러번 실행할 때 사용하지만, 두번째 반복문들은 Array,Object에서 자료를 꺼낼때 사용한다. 먼저, for in 반복문을 배워보자. var 오브젝트 = { name : 'Kim', age : 30 }; for (var key in 오브젝트) { console.log(오브젝트[key]); } 이렇게 오브젝트에 있는 값을 하나씩 꺼내서 사용할 때 사용한다. var 작명 in 오브젝트 형식을 사용하며,..
-
async / awaitJavaScript ES6 2022. 6. 2. 03:08
Promise가 복잡하면 async 와 await를 쓰면 된다고 한다. 이 문법은 ES8부터 제공을 한다. async function 더하기() {//함수 실행 후에 promise오브젝트가 남게됨 return 1 + 1; } 더하기().then(function(결과){ console.log(결과); }) 이렇게 연산이 끝나면 특정 코드를 실행하고 싶어서 promise를 쓰려했는데, function을 지우고 promise를 쓰기 귀찮으면 함수 앞에다 만 붙일 수 있는 async라는 키워드를 사용할 수 있다. 그러면, 함수가 실행이 되고나서 promise오브젝트가 남게 된다. 그리고, async함수에 return을 쓰면 then에 결과를 확인할 수도 있다. 단점으론, 성공만 사용가능하다. 이제, await을..
-
PromiseJavaScript ES6 2022. 6. 1. 12:12
콜백함수 디자인이 맘에 안들면 Promise를 배워보자. var 프로미스 = new Promise(); 프로미스.then(function(){//프로미스가 성공일 경우 실행할 코드 }).then(function(){//이런 식으로 1번째 할거 2번째 할거 then으로 붙여서 옆으로 길어지지 않음 }).catch(function(){//이건 실패할 경우에도 코드실행 가능 }).finally(function(){//이건 성공이든 실패든 뭔가 일어났을때 실행하는 기능 }) 위처럼 promise 는 성공/실패를 판정하는 기계라고 보면 된다. 그리고, then, catch, finally 같은 키워드를 사용할 수 있다. 근데, then함수는 new Promise로 생성된 오브젝트 뒤에만 붙일 수 있기에, then..
-
동기/비동기와 콜백함수JavaScript ES6 2022. 5. 31. 02:35
자바스크립트는 동기식처리를 한다. 즉, 한번에 코드 한줄씩 차례대로 실행한다. (synchronous) 근데, 비동기(Asynchronous)라는 비동기식처리도 있다. 자바스크립트에선 setTimeout같은게 있다. 비동기식이란 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식을 뜻한다. 앞에서 배운 메모리얘기처럼 queue에 들어있다가 stack이 비게되면 stack으로 올라가기 떄문에 stack에 있는 모든 처리를 끝나고 하게 된다. 즉 자바스크립트는 오래걸리는 작업이 나타나면 계속 기다리는 언어가 아니라 웹의 특수성 때문에 잠깐 제껴두고 다른것부터하는 언어이다. 그래서, 자바스크립트에서 순차적으로 실행하려면, console.log(1); setTimeout(()=>{ console.log(..