데브코스

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

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

📖 오늘 배운 것 컴포넌트 방식으로 생각하기 - Simple Todo List 만들기 컴포넌트 방식으로 만드는 것은 어렵다 UI를 선언적으로 표현하기 위해 표현하는 부분들을 추상화 가능하다. Header, TodoForm, TodoList, 그리고 이 세가지 컴포넌트들을 관리할 app 각자를 하나의 단위로 보고 나눈다. 이 모든 것을 하나로 합칠 app이 필요함 이렇게 추상화를 진행해 놓으면 수정 단계에서 해당 화면에서 입력받는 것만 고치면 된다. 1. TodoList 파라미터: target(어느 화면? 에 표시될 것인지 , append 될 것인지), state (todoLIst에 표현할 데이터) 받은 파라미터들로 데이터를 계산하여 화면에 출력 function TodoList({$target, initi..

프로그래머스 데브코스 2주차 회고록 😝

자료구조, 알고리즘의 늪에서 벗어났다.. ! 😅 (부제: 또 다른 여정 바닐라 자바스크립트) 이번주도 너무 순식간에 지나가 버렸다. 저번주에 자료구조, 알고리즘의 파도가 한번 휩쓸고 가서 한 숨 돌리려고 하니 바닐라 JS가 나타났다..! 그래도 데브코스를 시작하기 전에 공부를 적당히는 했다고 생각했던 나 상당히 어리석었다.. 😅 내가 코딩한 바닐라 JS는 그저 기능 구현만을 위함이라는 것을 또 한번 깨닫게 되었다. 기능 구현만이 아닌 추상화를 통한 코드 재사용에 대해 배웠고, 실습해보며 배우게 되었다. 다음주에는 또 다른 기능들과 함께 기본 개념들을 다시 배울 기회가 있으니 더욱 기대된다 ㅎ 드디어 만난 팀원 분들 🤭 이번 주에서 가장 기억에 남았던 일은 팀원분들을 만난 일이였다. 오랫만에 새로운 사람들..