설치 package.json에 있는 여러 npm scripts를 한번에 실행하기 위해 npm-run-all 모듈을 설치했다. yarn add npm-run-all --dev run-p / run-s npm-scripts를 동시에 실행하는지, 순서를 보장하여 실행할지 결정할 수 있다. run-p npm-ru...

intelliJ에서 git reset 하기 intelliJ의 git 창에서 log 탭으로 들어간다. 되돌리고 싶은 시점 오른쪽 마우스로 클릭 후 Reset Current Branch To Here... 선택 git push 하기 전에 commit한 걸 취소하는 건 되는데, push 하고 나서도 될 지는 모르겠다.. Intellij G...

바코드 리더 UI 개발중 가운데가 네모낳게 뚫린 배경을 어떻게 만들어야할지 고민해보았다. background 속성으로는 가운데를 제외하고 배경을 적용할 수 없었기에 border를 사용해야 했다. 더군다나 가운데 뚫린 부분은 반응형으로 크기가 고정되어 있지 않기 때문에 min(), max()를 사용했다. border-width: 상하 좌우; 가...

clip, background-clip을 사용하면 각각 이미지, 백그라운드에 마스크 효과를 줄 수 있다. background-clip: border-box; : 배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치) background-clip: padding-box; : 배경이 안쪽 여백의 바깥 경계까지 차지합니다....

모바일에서 100vh 값이 100%보다 클 때 모바일 브라우저는 PC와 달리 vh 값에 주소입력창을 포함하기 때문에 컨텐츠를 100vh로 지정하면 페이지 안에서 꽉 차는게 아니라 페이지보다 주소입력창 길이만큼 길어져 스크롤바가 생긴다. calc()를 사용해 문제를 해결할 수 있다. 100vh에서 100%를 뺀 값을 2로 나눠 위로 땡겨준다...

css min() / max() 안에서 vw / vh 단위 혹은 산술연산자를 사용한 경우 Incompatible units: 'px' and 'vw' 에러 발생 min() / max()를 calc()로 감싸주면 해결된다. padding-top: calc(max(20vh, 100px)); SASS: Incompatible units: ‘vw’...

css로 border 값을 넣으면 테두리가 엘리먼트의 바깥으로 생긴다. 안쪽에 테두리를 만들려면 box-shadow를 사용한다. box-shadow: 0 0 0 3px #000 inset; 네번째 값을 border-width 라고 생각하면 된다. [publishing] css inner border 만들기

IE 9 버전 밑으로는 :before, :after 를 지원하지 않는다. 때문에 일반적인 :before 나 :after 를 사용하는 체크박스 커스텀은 하지 못하고, 직접 html 엘리먼트를 추가해서 체크박스를 디자인해줘야 한다. html <div class="checkbox-wrap"> <input id="checkbox" t...

일반 함수에서는 var, let 등의 변수를 선언 후 setTimeout 값을 넣어 사용한다. const debounce = (func, delay) => { let timeoutId = null; return function (...args) { clearTimeout(timeoutId); timeoutId = setTi...

리액트에서 useRef를 사용하여 debounce를 구현하려 했지만 잘 안되었다.. const debounce = () => { if (timerRef.current) clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { console.log("debou...