★ :root 의 개념 ★ console 창 활용 css 에서 :root{ } 쓰는 경우 - root 가상 클래스 웹 문서 구조에서 특정 위치에 있는 요소를 선택하는 가상 클래스이다. :root 선택자는 웹 문서 구조에서 가장 상위 요소를 선택할 때 사용한다. 즉, html 에서 root 는 항상 html 을 가리킨다. 그러나, html 보다 :root 가상 클래스의 스타일 적용 우선순위가 더 높다. 문서 전반적으로 재사용할 임의가 있는 값을 작성한다. :root 을 이용해 최상위 요소에 변수를 선언하면 모든 요소에서 이 변수를 사용할 수 있다. 이렇게 :root 을 사용하여 변수를 사용하게 되면 한 번에 수정이 용이하다. :root 의사 클래스는 문서 트리의 루트 요소를 선택한다. HTML 의 루트 요..

//async & await //clear style of using promise //1. async async function fetchUser(){ //do network request in 10 secs.. return 'beshyun'; } const user = fetchUser(); user.then(console.log); console.log(user); //2. await ✨ function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } async function getApple(){ await delay(2000); return '🍎'; } async function getBanana(){ await del..

보호되어 있는 글입니다.

// Create - POST //Read - GET //Update - PUT //Delete - DELETE 나는 지금 단어장을 만들면서 단어의 생성, 읽기, 업뎃, 삭제에 대해 배우고 있고, 데이터 값은 json 형식으로 가져오고, 진짜 서버를 이용하는 것이 아니라, json-server 를 이용해 dummy data(?) 를 useFetch( )로 가져오는 것까지 했었다. 1. PUT 우선 해당 날짜에 있는 단어리스트들의 체크박스에 체크하면 체크한 값이 새로고침(F5) 했을 시에도 유지되도록 해줬다. 실제 data.json 에서 데이터 값이 삭제되게끔 해주었다. // import dummy from '../db/data.json'; import { useState } from 'react'; ex..

보호되어 있는 글입니다.

event.target( ) event 인터페이스의 target 속성은 event 가 전달한 객체에 대한 참조이다. 이는 이벤트의 버블링 또는 캡처 단계에서 이벤트 핸들러를 호출하는 event.currentTarget 과는 다르다. event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환한다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다. 이벤트 리스너 호출 이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출한다. 이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조한다. 이벤트 객체(event object..