프론트엔드 정복하기

https://github.com/trekhleb/javascript-algorithms/blob/master/README.ko-KR.md

HTMLElement 타입인지 어떻게 알까? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof instanceof operator 에 대한 설명이 나와 있다. 해당 operator 는 좌측 object 에 우측 constructor 의 prototype 을 가지고 있는지 여부를 알게 한다. 예시 export function isHTMLElement(data?: unknown): data is HTMLElement { return data instanceof HTMLElement; }

MouseMove (드래그) 시 useContext 의 값을 불러오지 못하는 이슈가 있었다. 그에 대한 해답 https://stackoverflow.com/questions/67181909/react-usecallback-function-doesnt-get-current-context-value

배열에 unique 한 값만 모으고 싶을 때 Set 객체를 활용하면 좋다. 그 예가 viselection 라이브러리 예제 코드에 있다. https://codesandbox.io/s/wl0yb?file=/src/App.tsx

testsetestsetse testsetestsetse 위처럼 flex container 내에 텍스트 요소 있다고 할 때, 텍스트가 container 너비를 흘러넘치면, 앞쪽 텍스트 박스가 줄바꿈이 되는 현상이 있다. 이때 앞이 아닌 뒤의 컨텐츠에 'flex:1;' 을 적용하면 앞의 텍스트가 줄바꿈 되지 않는다.

flex -> flex-grow flew-shrink flex-basis 를 나타낸다. 어떤 박스 2개를 2대 1의 비율로 배치하고 싶었다. 그래서 flex:2; flex:1; 을 적용하니 성공하였음. 그런데 flex 의 3가지 속성을 모두 넣고 싶었을 때 어떻게 해야할지 모르겠다!! 여기서 중요한 것은 flex-basis 였음. flex-basis 속성으로 자주 사용하는 것은 auto 또는 0이다. 이때 0은 px 이나 % 처럼 단위를 함께 써줘야 한다. auto 로 설정하면 콘텐츠의 크기를 기준으로 크기가 설정되고, 0 으로 설정하면 그것을 감싸는 container 기준으로 컨텐츠의 크기가 결정된다. 컨테이너 안에 원하는 비율대로 맞춰 넣고 싶다면 0(%) 로 지정해줘야 한다! 참고 사이트 https..