prettier/prettier 에러가 뜨거나 .ts 파일을 lint하지 못할 때 setting.json 파일을 아래 코드를 추가해준다. "typescript.format.enable": false, "eslint.alwaysShowStatus": true, "eslint.autoFixOnSave": true, ESLint 를 이용한 코드 규격화

툴팁 등을 만들 때 부모 요소의 가운데에 배치시키려면 아래처럼 작성한다. 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> 요소가 다음 조건을...

프로토콜 네트워크 통신 규약 다양한 규격끼리 데이터를 주고받을 때 같은 프로토콜을 사용하여 주고받는 방식을 따르도록 함 상황에 따라 전달할 데이터가 다르기 때문에 맞는 프로토콜을 사용한다. Syntax, Semantic, Timing 세 가지 요소로 구성됨 Syntax 문법, 구문...