매일 공부한거 기록하기

Carousel을 직접 구현하려고 했을때 React에서 어떤걸 쓰는게 더 적합할지 고민했다. 우선 1. setTimeout() 2. setInterval() 두개를 생각했다. 우선 비교해보자. setTImeout() : delay 된 시간만큼 기다린 후에 function을 실행한다. 일정 시간이 지난 후에 함수를 실행한다. const timeoutId = setTimeout (function[,delay,arg1,arg2,...] ); //종료 clearTimeout(timeoutId); 1. setTimeout은 timeoutId를 리턴한다. 따라서 timeoutId로 생성한 타이머를 식별할 수 있다. clearTImeout()에 전달해 타이머를 취소 할 수 있다. 2. 함수를 실행하지 않고 넘겨야한다..

달력을 만들어 보자 :) ~ dayjs 공식홈페이지 ~ https://day.js.org/en/ 달력을 구현하기 위한 로직을 정리하자 ~ :) 1. 이번달의 시작 요일을 알아야 한다. 1-1 . dayjs 에서 startOf는 지정 시간 단위의 시작을 알려준다. 1-2 . dayjs().startOf("month")는 object를 리턴한다. 1-3. dayjs().startOf("month").format("d") 를 이용해 필요한 포맷으로 리턴받으면 된다. 1-4. format("d")는 요일이 0-6까지로 표현된다. (일요일이 0으로 시작함) 2. 이번달의 마지막 날짜 2-1.마찬가지로 이번달의 마지막은 dayjs().endOf("month")를 사용해 Object를 리턴받는다. 2-2 .dayjs..

화면에 애니메이션을 구현하려고 검색했을때 throttling 과 debouncing 그리고 requestAnimationFrame을 찾아봤는데 이제야 다시 읽어본다! requestAnimationFrame() 브라우저에게 동작하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트 하는 함수를 호출하게 한다. window.requestAnimationFrame(callback); callback : 다음 repaint를 위한 애니메이션을 업데이트 할 때 호출할 함수이다.

우선 호이스팅을 알아보자 쉽게 말하면 스코프 내부 어디에서든 변수'선언'은 최상위에 선언된것처럼 행동하는것이다. 으로 정리 할 수 있고 MDN정의를 정리하면 아래와 같다. 인터프리터가 변수와 함수의 메모리공간을 선언전에 미리 할당하는 것을 의미한다. 즉 선언 전에 미리 할당하는것이다 그렇기 때문에 let과 const도 호이스팅 된다는것이다 :) 그렇다면 var로 선언한 a는 undefined로 동작하는것은 알겠는데 console.log(a); //undefined var a ; let으로 선언한 b는 왜 ReferenceError가 발생하는 것일까? 너두 호이스팅 된다면서! console.log(b); //ReferenceError: b is not defined let b; 이유는 TDZ Tempora..

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org 1. Set Set 객체는 자료형에 관계없이 원시값, 객체참조 모두 유일한 값을 저장 할 수 있다. Set => 삽입 순서대로 요소를 순회 할 수 있다. 하나의 Set 내 값은 한번만 나타날 수 있다. => 어떤 값은 Set 컬렉션 내에서 유일하다. Set 내의 값은 유일해야 하므로 값이 같은지 검사한다. 2. has() Set객체에 주어진 요소가 존재하는지 판별한다. 3. add() a..

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. domRect = element.getBoundingClientRect(); 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect Element.getBoundingClientRect() - Web API | MDN Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. developer.mozilla.org 까먹지마~~~~~~

charAt()은 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 리턴한다. 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charAt String.prototype.charAt() - JavaScript | MDN charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. developer.mozilla.org

To. 나 이걸 아는 사람이 왜 실수를 하고 그래! From 나 1. 버블링 한 요소에 이벤트가 발생하면 할당된 핸들러가 동작하고 부모 요소의 핸들러가 동작하는것이다. 가장 최상단의 요소를 만날때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 거의 모든 이벤트는 버블링 된다. 이벤트가 발생한 가장 안쪽의 요소는 target 이라고 부른다. event.target으로 접근 한다. event.target : 실제 이벤트가 시작된 타깃 요소 , 버블링이 진행되어 변하지 않음. event.currentTarget (this): '현재'요소 현재 실행 중인 핸들러가 할당된 요소를 참조한다 2. 캡처링 하위 요소로 전파되는 단계

어흑ㅠ 바보 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 기본동작을 실행하지 않도록 지정하는 것. https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN Event 인터페이스의 preventDefault() 메서드는 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정합니다. developer.mozilla.org

주어진 숫자의 절대값을 리턴한다! https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/abs Math.abs() - JavaScript | MDN Math.abs() 함수는 주어진 숫자의 절대값을 반환합니다. x가 양수이거나 0이라면 x를 리턴하고, x가 음수라면 x의 반대값, 즉 양수를 반환합니다. developer.mozilla.org