🟨 JavaScript/개념

[코딩애플,mdn 등] 이벤트버블링과 이벤트캡쳐링 및 관련 유용한 함수들

이벤트가 DOM트리를 타고 발생하는 흐름 이벤트는 document에서 시작해 DOM 트리를 따라 event.target까지 내려간다. 이벤트는 트리를 따라 내려가면서 addEventListener(..., true)로 할당한 핸들러를 동작시킵니다. addEventListener(..., true)의 true는 {capture: true}의 축약형이다. 이후 타깃 요소에 설정된 핸들러가 호출된다. 이후엔 이벤트가 event.target부터 시작해서 다시 최상위 노드까지 전달되면서 각 요소에 on로 할당한 핸들러와 addEventListener로 할당한 핸들러를 동작시킨다. addEventListener로 할당한 핸들러 중, 세 번째 인수가 없거나 false, {capture: false}인 핸들러만 호출된..

[코딩애플] 요소의 높이와 위치값 구하기 (clientHeight, offsetHeight, scrollHeight, getBoundingClientRect())

clientHeight console.log(element.clientHeight); clientHeight는 패딩을 포함한 요소의 높이를 가져온다. offsetHeight console.log(element.offsetHeight); clientHeight는 패딩, 테두리, 가로스크롤바(있는 경우)을 포함한 요소의 높이를 가져온다. scrollHeight console.log(element.scrollHeight); scrollHeight는 패딩, overflow로 인해 화면에 표시되지 않은 컨텐츠을 포함한 요소의 높이를 가져온다. getBoundingClientRect() console.log(element.getBoundingClientRect()); // 출력결과 { top: 134 y: 134 ..

[코딩애플] 스크롤 이벤트

스크롤바 위치 찾기 : window.scrollY, window.scrollTop() window.addEventListener('scroll', function(){ console.log(window.scrollY); //window.pageYOffset과 동일한 기능(이쪽이 호환성이 더 떨어짐) }) //jquery버전 $(window).on('scroll', function(){ $(window).scrollTop() //(100) 괄호안에 숫자를 넣으면 현재스크롤바 이동 }); 더 알아가기 : scrollTop은 현재 스크롤바 이동 기능도 겸한다. 강제로 맨 위에서부터 스크롤하기 : scrollTo(x,y) window.addEventListener('scroll', function(){ wind..

[드림코딩] 콜백함수 (4) : 콜백지옥 탈출, Promise (callback hell 코드개선하기)

Callback Hell 예시 이전시간에 만들었던 콜백지옥 예시다. // 기본세팅 class UserStorage { loginUser(id, password, onSuccess, onError) { setTimeout(() => { if ( (id === 'master' && password === 'master00') || (id === 'submaster' && password === 'submaster00') ) { onSuccess(id); } else { onError(new Error('not found')); } }, 2000); } getRoles(user, onSuccess, onError) { setTimeout(() => { if (user === 'master') { onSucce..

[드림코딩] 콜백함수 (3) : promise로 Error Handling하기 (reject, catch 활용)

Error Handling const turnonLaptop = () => new Promise((resolve, reject) => { setTimeout(() => resolve(`노트북 실행.`), 1000); }); const loginBlog = blog => new Promise((resolve, reject) => { setTimeout(() => reject(new Error(`Error! ${blog} => 블로그 진입.`)), 1000); }); const writePost = post => new Promise ((resolve, reject) => { setTimeout(() => resolve(`${post} => 게시 완료.`), 1000); }); producer 코드를 작성했..

[드림코딩] 콜백함수 (2) : 콜백지옥 탈출, Promise (State, Producing)

Promise Promise는 javascript에 내장되어있는 object로, 이를 통해서 비동기 코드를 깔끔하게 작성할 수 있다. 네트워크통신을 한다던지, 파일을 읽어온다던지 하는 등의 무거운 작업을 할 때는 오래 걸리므로 Promise로 처리한다. 무거운 작업을 처리하므로 사용자가 요청하지 않았는데도 일어나는 불필요한 네트워크통신(promise함수의 실행)을 방지해야 한다. new Promise가 만들어지는 순간, 해당 executor 함수가 자동으로 실행되므로 주의하자. promise는 아래 두 가지를 염두에 두면 좋다. 1. State(상태) process가 무거운 operation을 수행하고 있는지/완료되었다면 성공했는지/실패했는지의 상태 pending : operation을 수행 중인 상태 ..