웹(56)
-
비동기 처리 - Promise
개요 전통적인 자바스크립트의 비동기 처리를 위한 패턴으로 콜백함수가 존재 콜백함수의 경우, 가독성 및 에러의 예외처리 한계 ES6 Promise 등장하여 단점 보완 정의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체 Promise는 함수에 콜백을 전달하는 대신, 콜백을 첨부하는 방식의 객체 특징 콜백은 자바스크립트 Event Loop 가 현재 실행중인 콜 스택을 완료하기 전에는 절대 호출 되지않음 then() 을 여러번 사용하여 여러개의 콜백 추가 가능(chaning), 순서대로 콜백이 수행 예제) // Promise 객체 생성 const fetchData = new Promise((resolve, reject) => { // 비동기 작업 수행, setTimeout으로 대체 setT..
2020.06.16 -
이벤트 전달 방식(버블링, 캡처, 위임)
1. 이벤트 등록 addEventListener 메서드 사용하여 특정 요소에 이벤트 등록 클릭 2. 브라우저의 이벤트 감지 1) 이벤트 버블링(Event Bubbling) 특정 요소에서 이벤트 발생 시, 해당 이벤트가 상위 요소들로 이벤트 전달(자식 -> 부모) 하위에서 상위 요소로 이벤트 전파 방식을 이벤트 버블링(Event Bubbling) 예제) const divs = document.querySelectorAll('div') divs.forEach((div) => { div.addEventListener('click', (evnet) => { console.log(event.currentTarget.className + " click"); }); }); -- 출력 결과(div3 클릭) -- div..
2020.06.15 -
iterator 와 for-of
iterator 반복 처리가 가능한 객체 시퀀스를 정의하고 종료시의 반환값을 잠재적으로 정의하는 객체 반복자는 두 개의 속성(value, done)을 반환하는 next() 메소드 사용하여 객체의 iterator protocol 을 구현 반환되는 value 속성은 현재 iterator 가 가리키는 곳의 값을 가리키며, done 속성은 iterator 가 끝까지 도달했는지를 구분해주는 true/flase 값을 가짐 Array, String, Map, Set, DOM이 iterable, 이러한 요소를 탐색할 수 있게 하는 객체가 iterator 예제) const furitArr = ['사과', '배', '오렌지']; const iterator = furitArr[Symbol.iterator](); consol..
2020.04.10 -
Rest, Spread 연산자
Spread 연산자 이터러블 오브젝트(Iterable Object)의 엘리먼트를 하나씩 분기 전개한 결과를 변수에 할당 / 호출하는 함수의 파라미터 인수 예제) 기존 객체를 복사, 새로운 객체를 반환 // 새로운 객체 생성 const book = { action : 'read' }; const js_book = { ...book, title: 'JS' }; const react_book = { ...js_book, title: 'react', price: '1000' }; console.log(book); console.log(js_book); console.log(react_book); console.log('------------------------------------------------'); ..
2020.04.09 -
Destructuring(구조 분해 할당)
Destructuring(구조 분해 할당) 특징 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 JSON 규격의 객체나 배열은 쉽게 매핑하여 변수를 할당할 수 있고, 함수의 반환값을 여러 개로 할 수 있음 ES6 에서는 Destructing 을 통해 객체나 배열이 복잡하게 전달되는 함수들로 인하여 변수를 할당하고 속성에 접근해야할 때, 간편하게 할당 및 정의 예제) let num1, num2, rest; [num1, num2] = [100, 200] console.log(num1); console.log(num2); [num1, num2, ...rest] = [100, 200, 300, 400, 500]; console.log(rest); con..
2020.04.08 -
템플릿 리터럴 문자열 표현식
템플릿 리터럴 문자열 표현식 특징 기존에 없었던 새로운 기능 역따옴표(`) 사용 변수 사용의 편리성 여러 줄의 문자열의 경우, "\n" 을 넣어 개행 예제) Name : 태그로 입력 시, change 이벤트 핸들럴를 통해 별도의 태그에 보여줌 역따옴표(`)의 변수 설정은 ${} 안에서 이루어지며, 일반 변수 뿐만 아니라 함수 호출이나 계산식 등을 넣을 수 있음 예제) (() => { function Test(strings, ...values) { console.log(strings); console.log(values); return "Test" } var str = "World"; console.log(Test `Test, ${str}!\n${2 * 2 + 2} End`); })(); -- 출력 결과 ..
2020.04.08