Frontend/JavaScript 25

프로토타입을 이해해보자

백엔드 개발자 칭구가 프로토타입을 물어봤는데 뭔가 느낌으로 설명하기 어려워서.. 정리를 해보려고 한당 :) https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개발 학습하기 | MDN Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 developer.mozilla.org javaScript는 프로토 타입 기반 언어이다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체 prototype object를 가진다는..

Frontend/JavaScript 2022.06.09

window.requestAnimationFrame() 너 누구 야

화면에 애니메이션을 구현하려고 검색했을때 throttling 과 debouncing 그리고 requestAnimationFrame을 찾아봤는데 이제야 다시 읽어본다! requestAnimationFrame() 브라우저에게 동작하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트 하는 함수를 호출하게 한다. window.requestAnimationFrame(callback); callback : 다음 repaint를 위한 애니메이션을 업데이트 할 때 호출할 함수이다.

Frontend/JavaScript 2022.06.05

Temporal Dead Zone 줄여서 TDZ !

우선 호이스팅을 알아보자 쉽게 말하면 스코프 내부 어디에서든 변수'선언'은 최상위에 선언된것처럼 행동하는것이다. 으로 정리 할 수 있고 MDN정의를 정리하면 아래와 같다. 인터프리터가 변수와 함수의 메모리공간을 선언전에 미리 할당하는 것을 의미한다. 즉 선언 전에 미리 할당하는것이다 그렇기 때문에 let과 const도 호이스팅 된다는것이다 :) 그렇다면 var로 선언한 a는 undefined로 동작하는것은 알겠는데 console.log(a); //undefined var a ; let으로 선언한 b는 왜 ReferenceError가 발생하는 것일까? 너두 호이스팅 된다면서! console.log(b); //ReferenceError: b is not defined let b; 이유는 TDZ Tempora..

Frontend/JavaScript 2022.06.03

Set 에 대해 알아보자..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org 1. Set Set 객체는 자료형에 관계없이 원시값, 객체참조 모두 유일한 값을 저장 할 수 있다. Set => 삽입 순서대로 요소를 순회 할 수 있다. 하나의 Set 내 값은 한번만 나타날 수 있다. => 어떤 값은 Set 컬렉션 내에서 유일하다. Set 내의 값은 유일해야 하므로 값이 같은지 검사한다. 2. has() Set객체에 주어진 요소가 존재하는지 판별한다. 3. add() a..

Frontend/JavaScript 2022.06.02

Element.getBoundingClientRect()

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. domRect = element.getBoundingClientRect(); 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect Element.getBoundingClientRect() - Web API | MDN Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. developer.mozilla.org 까먹지마~~~~~~

Frontend/JavaScript 2022.05.17

이벤트 버블링, 캡처링

To. 나 이걸 아는 사람이 왜 실수를 하고 그래! From 나 1. 버블링 한 요소에 이벤트가 발생하면 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작하는것이다. 가장 최상단의 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 거의 모든 이벤트는 버블링 된다. 이벤트가 발생한 가장 안쪽의 요소는 target 이라고 부른다. event.target으로 접근 한다. event.target : 실제 이벤트가 시작된 타깃 요소 , 버블링이 진행되어 변하지 않음. event.currentTarget (this): '현재'요소 현재 실행 중인 핸들러가 할당된 요소를 참조한다 2. 캡처링 하위 요소로 전파되는 단계

Frontend/JavaScript 2022.04.10

e.preventDefault();

어흑ㅠ 바보 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 기본동작을 실행하지 않도록 지정하는 것. https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. developer.mozilla.org

Frontend/JavaScript 2022.04.10