매일 공부한거 기록하기

화면에 애니메이션을 구현하려고 검색했을때 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..

브라우저 렌더링 과정을 읽던중 트리형 자료 구조를 정리해야할것같아서 간단히 정리해본다! 우선 자료구조를 간단히 알아보자! 자료구조란? 데이터의 효율적인 접근, 수정을 하게하는 데이터의 집합, 구조를 말한다. 트리 (Tree) 노드로 이루어진 계층적 구조를 표현할 수 있는 자료구조이다. 한 노드가 여러 노드를 가르킬 수 있는 비선형적 구조로 되어있다. (비선형 구조: Nonlinear Structure->하나의 자료 뒤에 여러개의 자료가 존재 할 수 있는것을 의미함. 예: 트리, 그래프 ) 트리에서는 순서정보가 중요하지 않다. 이산수학에서 나오는 트리의 개념과 같다. 1. 하나의 루트 노드를 갖는다. 2. 루트 노드는 0개이상의 자식 노드를 갖는다. 3. 노드와 노드를 연결하는 edge로 구성되어있다. 4..

영어에서 한국어로 처리 하려고 했을때 한국어가 세로로 나오는 문제가 생겼다. 이럴때는 white-space:nowrap; 요걸 추가해주면 된다! 휴 속 시원~~~

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

Header에서 메뉴를 눌렀을때 화면에서 해당 위치로 scroll이동을 하려고 했다. Main.jsx에서 Header와 여러 component를 import해서 사용했다. import Header import Test1 import Test2 import Test3 이런식으로 화면이 구성된다. Header에 props와 ref를 넘겨주면 될거라고 간단히 생각했으나 Header에 ref를 넘겨주는것이 아니였음! Main.jsx에서 컴포넌트에 해당되는ref를 생성해준다. 초기값은 null 이다. import Header import Test1 import Test2 import Test3 const test1Ref = useRef(null); const test2Ref = useRef(null); const..

https://ko.reactjs.org/docs/forwarding-refs.html Forwarding Refs – React A JavaScript library for building user interfaces ko.reactjs.org React.forwardRef를 사용해 전달된 ref를 얻고, 렌더링되는 DOM으로 전달해준다. ref는 직접 접근하기 위해 사용된다. html 엘리먼트가 아닌 React컴포넌트에서 ref props를 사용하려면 forwardRef() 함수를 사용해야한다. 컴포넌트를 forwardRef()로 감싸주면 , 해당 컴포넌트는 두개의 매개변수를 갖게 된다. 어렵잖아..

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 까먹지마~~~~~~

div에 text를 넣었을때 지정한 width를 넘어갈때가 있다! width를 직접 지정해줘서 인데 요거 둘중에 하나 골라 잡아서 써보셈~~~~ word는 단어단위로 잘라준당! word-break: break-all; word-break: break-word; 요걸 추가해주면 된다! 이건 왜 맨날 까먹음ㅎ? 문제 있을시 .. 살살 지적부탁 출처 https://developer.mozilla.org/ko/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDN CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. developer.mozilla.org

아~ 진짜~~~ 이게 뭐라구 이렇게 고생을 했나 싶고ㅋㅋㅋㅋㅋ styled Component로 만든 radio Button이 checked된게 Update되지 않았다! value를 콘솔에 찍어보면 분명히 잘 set되는데! ㅋㅋㅋㅋㅋㅋ 이게 머라고 어제 저녁부터...^^..ㅋ 문제는...바로바로바로 e.preventDefatul(); 때문이였다^^ㅋ 이거 지워주니까 허무하게 잘 됨요ㅎㅎ;;; const onChangeName = (e: React.ChangeEvent) => { // e.preventDefault(); const { target: { value }, } = e; setBottleName(value); }; const onChangeShape = (e: React.ChangeEvent) =>..