전체 글

[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는 그저 기능 구현만을 위함이라는 것을 또 한번 깨닫게 되었다. 기능 구현만이 아닌 추상화를 통한 코드 재사용에 대해 배웠고, 실습해보며 배우게 되었다. 다음주에는 또 다른 기능들과 함께 기본 개념들을 다시 배울 기회가 있으니 더욱 기대된다 ㅎ 드디어 만난 팀원 분들 🤭 이번 주에서 가장 기억에 남았던 일은 팀원분들을 만난 일이였다. 오랫만에 새로운 사람들..

💪REST API 설계 원칙

- REST: URI를 통해 자원을 표시하고, HTTP Method를 이용하여 해당 자원의 행위를 규정하여 그 결과를 받는 것을 의미한다. - REST API: REST를 기반으로 서비스 API를 구현한 것을 의미한다. - 자원(URI), 행위(HTTP 표현 메서드), 표현(페이로드)의 세가지 요소로 구성됨 👊 REST의 특징 1) Uniform: URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍쳐 스타일을 의미한다. 2) Stateless: 작업을 위한 상태정보를 따로 저장하고 관리하지 않으며, 서버로 들어오는 요청만 단순히 처리하면 된다. 3) Cacheable: HTTP라는 기존 웹 표준을 그대로 사용하고 있기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용할 ..

[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 메소드..

[JavaScript] JavaScript 로 TDD 및 테스트 코드 작성 하기 (cypress)

👊 오늘의 공부 - Cypress 강의 듣기 => 자바스크립트로 E2E 테스트 코드를 작성함으로써 사용자 중심의 흐름으로 ‘검증’ 가능한 앱을 만들 수 있다. *cypress 깔고 열기 npm install cypress --save-dev ./node_modules/.bin/cypress open 1)Counter 앱 테스트 코드 작성 2)계산기 앱 테스트 코드 작성 => 테스트 코드의 두려움 극복하기 -> 자신감으로 바꾸기 💪 테스트를 작성해야 하는 이유 애플리케이션이 요구 사항에 맞게 동작하는지를 검증하는 행위 DB에 데이터를 입력하는 API를 개발 -> API 호출 -> DB 값 검증 디자인 시안에 맞게 HTML/CSS를 작성 -> 브라우저에서 실제 렌더링한 결과를 확인 새로운 기능을 추가하기 위..

2022/08/09 TIL

💪 오늘의 공부 Sortable List 미니 프로젝트 해보기 이번 미니 프로젝트는 배열 고차함수 연습에 괜찮았다. map,sort,forEach등을 자유자재로 쓸 수 있게 더 연습해야 겠다. dragStart 부터 enter, leave, over, drop까지의 개념을 다시 봐야겠다. 이벤트 리스너들을 하나로 모아서 한번에 함수에 넣는 것은 복습해야겠다. DOM 요소들을 배열에 넣어 저장 및 관리하는 것도 다시 본다. Sortable List git: https://github.com/SDWoo/20_Web_Projects_With_Vanilla_JS/tree/main/Sortable%20List GitHub - SDWoo/20_Web_Projects_With_Vanilla_JS Contribute ..