vanillajs

[VanillaJS] TodoList에 Drag & Drop 이벤트 적용시키기 (feat. taskQueue)

🔥 이전에 진행했던 TodoList에 Drag & Drop 이벤트를 적용시키자 Drag & Drop 이벤트란? 드래그 시작 점에서 dataTransfer라는 객체로 보낼 DOM Element를 지정하고, 드랍 하는 것이다. 순서 드래그 할 요소의 어트리뷰트에서 dragable이라는 속성을 true로 지정한다. (드래그 가능한 객체가 된다.) 드래그 시작 점 (dragstart event): 드래그한 Element를 event.dragTransfer라는 객체에 저장한다. 드래그 중간 === 드롭 전 (dragover event): 드롭 대상 Element의 드롭을 허용하기위해 기본동작을 취소한다. 드롭 시점 (drop event): 일부 요소의 링크 열기와 같은 기본동작 취소 후, 드래그한 요소를 even..

VanillaJS를 통한 자바스크립트 정리 2

📖 오늘 배운 것 자바스크립트의 모듈화 자바스크립트에서 비동기 다루기 비동기 다루기 실습 (w. To do List) Promise async, await 💪 자바스크립트의 module에 대해 알아보자 솔직히 최근에는 Webpack이나 번들러로 많이 대체해서 쓰지 않을 수도 있다. 그래도 이번 기회에 잘 써서 익숙해지자! Import // export 키워드로 내보내진 변수, 함수 등등을 불러올 수 있는 키워드 // export default로 내보내진 경우 import a from 'folder'; // export 로만 내보내진 경우 import * as a from 'folder'; import {a, b} from 'folder'; // 이름이 너무 길거나 같을 경우 import {a as b} ..

[JavaScript] addEventListener에서의 this 바인딩

오늘은 20 web Projects중 hangman을 VanillaJS 로 구현하고, Component형식으로 바꾸던 와중. this바인딩 때문에 고생했던 기억을 이겨내고자 정리를 해보려고한다. Code 먼저 html에서 module type으로 index.js를 받아오기로 했다. // index.js import App from './App.js'; const app = new App(document.querySelector('.App')); window.addEventListener('keydown', app.handleKeyDown); 이렇게 index.js 에서 window.addEventListner를 호출하고, 'keydown' 이벤트가 일어나면. App.js의 handleKeyDown 메소드..

2022/07/29 TIL

1. 자바스크립트 딥다이브 클래스 정리 클래스 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이다. 클래스와 생성자 함수의 차이점 1. 클래스를 new 연산자 없이 호출하면 에러, 생성자 함수는 new 연산자가 없으면 일반 함수로서 호출 2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한다. 하지만 생성자 함수는 extends와 super 키워드를 지원하지 않는다. 3. 클래스는 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 생성한 생성자 함수는 변수 호이스팅이 발생한다. 4. 클래스 내의 모든 코드에는 암묵적으로 strict mode 가 지정되어 실행되..