Til

[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..

2022/7/31 TIL

1. 오늘 한 공부 자바스크립트 딥 다이브 26장 ES6 함수의 추가기능 딥 다이브 공부할 때 더욱 집중하고 블로그에 한번씩 더 정리를 해보려고 노력해보자. Meal Finder 미니 프로젝트 만들기 이벤트 클릭시 해당 객체의 상위 요소를 배열로 가져오는 event객체의 path와 composedPath()에 대해 배움 find()메서드: true 이면 해당 요소 가져오고 false 이면 안 가져옴 innerHTML요소에 배열 요소를 넣을 때 map을 사용하는데 많이 익숙해졌다, 마크업 언어로 화면 구성하는 것도 많이 늘었지만 더 노력해야겠다. css는 아직 부족해서 더 보고 노력 많이 해야겠단 생각이 든다. 2. 느낀점 오늘도 역시 난 부족했다. 정진 정진 정진! JS 정리 : https://gith..

2022/07/29 TIL

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

2022/7/27 TIL

1. 자바스크립트 딥다이브 책 프로미스 파트를 마무리 - 프로미스는 then, catch, finally 이렇게 세 가지 후속 처리 메서드를 갖는다. 이 후속 처리 메서드가 언제나 프로미스를 반환하므로 프로미스 체이닝이 생긴다. => 이 프로미스 체이닝으로 비동기 처리 결과를 받으므로 콜백 헬에 빠지지 않을 수 있게 된다! - 프로미스는 다섯 가지의 정적 메서드를 갖는다. 1.Promise.resolve, Promise.reject => 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용 => new 연산자로 Promise 만든 후 resolve나 reject하는 것과 같게 작동 2.Promise.all => 여러 개의 비동기 처리를 모두 병렬 처리할 때 사용 => 모든 프로미스가 fullfil..