clientWidth/clientHeight 엘리먼트의 내부 너비/높이 픽셀값 padding은 포함하지만 border, margin, 스크롤바는 포함하지 않는다. offsetWidth/offsetHeight 엘리먼트의 외부 너비/높이 픽셀값 padding과 border, 스크롤바 크기도 포함한다. (margin은 X) elem.get...

useSelector와 리렌더링 useSelector를 통해 스토어의 상태를 조회하면 기본적으로는 상태가 바뀌지 않으면 리렌더링하지 않는다. const todos = useSelector((state) => state.todos) 하지만 아래처럼 스토어의 상태를 객체로 가져오면, 상태가 바뀌었는지 체크할 수 없기 때문에 action이 일어...

모멘텀? IOS 사파리에서 페이지 화면을 쓕 쓸어내리면 스크롤이 된다. 안드로이드에서와는 달리 스크롤 되는 속도에 가속도가 붙었다가 천천히 느리게 멈춘다. 이렇게 화면에서 touchend가 된 후에도 스크롤이 멈추지 않는 것을 모멘텀이라고 한다. 문제는 모멘텀이 일어나는 동안 다른 스크롤 이벤트를 발생시키면 먹히지 않는다는 것이다. 아래로 버...

구글 I/O 개발자 컨퍼런스 CSS 부분 요약 color-mix 브라우저에서 색상을 혼합할 수 있고, 혼합 비율도 설정할 수 있다. .color-mix-example { --brand: #0af; --darker: color-mix(var(--brand) 25%, black); --lighter: color-mix(var(--bra...

viewport-fit viewport-fit은 스크린에서 viewport를 어떻게 보여줄 지에 대한 속성이다. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> 메타 태그를 통해 viewport-fit을 지정할 수...

git bisect 버그가 발생했을 때, 어느 커밋이 원인인지 이진 탐색으로 찾을 수 있다. 먼저 git bisect start 명령으로 이진 탐색을 시작한다. git bisect bad를 실행하여 현재 커밋에 문제가 있다고 표시를 남긴다. 문제가 없는 마지막 커밋을 git bisect good <good_commit> 명령...

크롬 디버깅 콘솔창에서 levels 선택이 안되고 default levels로 고정되어 있을 때 F1(설정) 눌러서 맨 밑으로 내린 다음 ‘Restore defaults and reload’ 버튼을 클릭한다.

아토믹 디자인이란? 아토믹 디자인은 컴포넌트를 생물학적 개념에 적용하여 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 5가지 레벨로 패턴화하는 방법론이다. Brad Frost가 제시한 design system 관점의 방법론이며 Atomic Design라는 제목의 책도...

편집기 탭이 하나밖에 안열림 당황하지 말고 설정에서 Editor> Show Tabs ‘열려 있는 편집기를 탭에서 열지 여부를 제어합니다.’ 에 체크해준다. (왜 해제되었는지 모르겠네)

prevState 함수형 컴포넌트는 생명주기가 없기 때문에 클래스형 컴포넌트의 componentDidUpdate 같이 prevProps, prevState를 제공하는 메서드가 없다. 함수형 컴포넌트를 만들다 보면, 이전 상태값과 현재 상태값을 특정지어서 비교해야 될 때가 생기는데 (ex. prevState는 false, currentState는 t...