Promise Chaining (프로미스 연결하기) const fetchNumber = new Promise((resolve, reject) => { setTimeout (()=> resolve(1), 1000); }); //1초 있다가 성공하면 1을 전달하는 promise 작성 fetchNumber .then(num => num * 2) //resolve에서 전달된 값 1이 num으로 전달되어서 num*2인 2를 반환 .then(num => num * 3) // 위에서 받은 2가 num으로 전달되어 num*3인 6을 반환 .then(num => { return new Promise((resolve, reject) =>{ setTimeout( () => resolve(num-1), 1000); }); /..

프로미스(promise)란? - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체(Object)이다. - 비동기 처리: ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미함 - 프로미스를 사용하면 콜백 함수를 계속해서 불러서 코드의 가독성이 떨어지는 일명 '콜백 지옥'을 없이 쉽게 비동기 처리 가능 - 프로미스는 정해진, 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어졌다면 "성공의 메시지와 함께 결과 값을 전달" - 만약 기능을 수행하다가 예상치못한 문제가 발생했다면 "Error를 전달" 프로미스 학습에 중요한 포인트 2가지 1) State(상태) 2) Producer VS Consumer - Producer(제공자): 우리가 원하는 ..

- 폼 요소에는 키 관련 이벤트, 포커스 관련 이벤트, change 이벤트 등 많은 이벤트가 발생한다. onblur와 onfocus - 이들은 포커스(focus)가 변경될 때 호출된다. - 포커스는 키 입력에 대한 독점권 - HTML 요소가 포커스를 받게 될 때는 onfocus 리스너가 호출되고 포커스를 잃으면 onblur 리스너가 호출된다. 라디오버튼과 체크박스 1) 라디오버튼 객체 radio 객체는 로 만들어진 라디오버튼을 나타내는 DOM 객체이다. 서울 부산 춘천 태그의 name 속성이 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성값으로 radio 객체를 찾아야 한다. var koreaCity = document.getElementsByName("city"); * getEle..

5. 문서와 이미지 로딩, onload 문서의 로딩 완료와 onload - onload는 HTML 문서나 이미지의 로딩이 완료되는 시점에 호출되는 이벤트 리스너이다. - 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다. - onload 리스너를 작성하는 2가지 방법 window.onload="alert('onload')"; 이미지 로딩 완료와 onload - Image 객체의 프로퍼티 : src, width, height, complete(이미지의 로딩이 완료되었는지 여부, true/false) - 만약 이미지의 폭을 알아내고 싶을 때, 이미지 로딩이 완료되지 않았다면 이미지의 width는 0으로 나타날 것이므로 이미지 로딩을 지시하기 전에 onload리스너를 먼저 등록..

4. 마우스 핸들링 - 웹 페이지 개발에 가장 많이 활용되는 마우스 관련 이벤트 마우스 이벤트 객체의 프로퍼티 - 마우스 관련 이벤트가 발생할 때 이벤트 객체에는 마우스 포인터의 위치, 클릭된 버튼 등의 정보가 담겨 있음 프로퍼티 설명 x,y (x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표 clientX, clientY (clientX, clientY)는 브라저 윈도우의 문서출력 영역 내에서의 마우스 좌표 screenX,screenY (screenX,screenY)는 스크린을 기준으로 한 마우스 좌표 offsetX, offsetY (offsetX,offsetY)는 타겟 객체 내에서의 마우스 좌표 button 눌러진 마우스 버튼 * 0 : 아무 버튼도 눌러지지 않았음 * 1 : 왼쪽 버튼이 눌러졌..

3. 이벤트 흐름 이벤트 흐름과 이벤트 리스너 - 발생한 이벤트는 타겟 객체에 전달된다, 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님 - 발생한 이벤트는 window 객체로부터 DOM 트리를 타고 중간 DOM 객체들을 거쳐 타겟 객체로 흘러가고, 다시 반대 방향으로 이동하여 window 객체에 도달한 후 없어진다 → 이 같은 과정을 이벤트 흐름 이라고 함 - 이벤트 흐름의 과정 1) 캡쳐 단계 : window에서 타겟 객체까지 이벤트 객체가 전파되는 과정. 캡쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름순으로 실행된다. - 캡쳐 리스너 : 캡쳐 단계에서 실행되도록 작성된 리스너 (상 -> 하) 2) 버블 단계 : 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는..