‘never’ 형식에 ‘focus’ 속성이 없습니다. const inputRef = useRef<HTMLInputElement>(null); if (inputRef.current) inputRef.current!.focus(); ‘Timeout’ 형식은 ‘number’ 형식에 할당할 수 없습니다. const timerRef: { cu...

타입스크립트로 리팩토링 하던 도중, yarn start로 앱을 실행하면 tsconfig.json 파일이 자동으로 수정되어버림; 타입스크립트 사용 버전을 workspace로 바꿔도 동일 현상 지속. 가장 바깥 경로에 .env 파일을 생성하고 아래 코드 추가 후 저장해도 똑같음. DISABLE_NEW_JSX_TRANSFORM: true; 결국...

툴팁 등을 만들 때 부모 요소의 가운데에 배치시키려면 아래처럼 작성한다. position: absolute; left: 50%; transform: translateX(-50%); left: 50%은 부모 크기의 50%만큼 이동하고, transform: translateX(-50%)은 요소 크기의 50% 만큼 이동한다. 둘을 함께 사용해야 ...

useUpdateEffect 첫 번째 호출은 무시하고 이후에 실행, 나머지는 useEffect와 동일 두 번째 인자로 상태값을 넣어봤다. 첫 렌더링 시에는 아예 호출되지 않는다. 이후 이벤트나 함수를 통해 상태값을 변경한 후에야 실행된다. 원래 사용 목적은 처음에 context의 상태값을 가져올 때 초기값인 0이 넘어오는 것을 건너뛰려는 목적...

잊을만하면 다시 꺼내쓰게 되는 viewport 한번 정리하고 가야겠다. PC와 Mobile는 Viewport가 다르다. 편의상 height 기준으로 작성. width도 동일하다고 이해하라. PC Viewport window.innerHeight / window.outerHeight window.innerHeight : 가로 스크롤...

지정된 숫자 범위만큼 map을 돌리고 싶다면 [...Array(n).keys()].map; 혹은 Array.from(Array(n).keys()); 숫자만큼 배열을 만들어 map을 돌린다. How to generate range of numbers from 0 to n in ES2015 only?

fatal: The current branch <branchname> has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin <branchname> push 할 때 브랜치...

styled.div 대신에 keyframes을 사용한다. import styled, { keyframes } from 'styled-components' const fadeIn = keyframes` 0% { opacity: 0; } 100% { opacity: 1; } ` const FadeInButton = sty...

styled-components에서 각 엘리먼트에 animation을 적용하려다 for문 코드에 대해 알아보았다. const createCSS = () => { let str = ""; for (let i = 1; i < 30; i++) { str += ` &:nth-of-type(${i}) { ...

<input type="number" name="cc-number" id="cc-number" autocomplete="off" /> 사용자에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수 있다. <input>, <textarea>, <select>, <form> 요소가 다음 조건을...