전체 글

[TIL] 디바운싱과 쓰로틀링

디바운싱 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 특정시간 지난 후 하나의 이벤트만 발생하도록 하는 기술 웹에서 주로 ajax검색에 자주 쓰인다. 그룹에서 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용 leading edge: 처음에 실행한 함수를 실행하고 그 뒤 이벤트 무시 trailing edge : 마지막에 실행한 함수를 실행하고 그 전의 이벤트 무시 쓰로틀링 마지막 함수가 호출되고 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 성능 개선을 위해 사용(무한 스크롤) 이벤트를 일정주기마다 발생하도록 하는 기술 디바운싱 vs 쓰로틀링 - 디바운싱 : 스크롤이 내리다가 스크롤을 멈추고 정해진 시간 후 이벤트 발생. - 쓰로틀링 : 이벤트 하나 발생하고 특정 시간동안 이벤트가 발생..

[CSS] custom checkbox 만들기

checkbox를 css로 커스텀하기는 너무나 어렵다. 인터넷에서 열심히 찾아서 알아낸 방법. 잊지 않기 위해 적는다. All /*CSS*/ .all { position: absolute; opacity: 0; } .all:checked ~ .option > .checkmark { border-width: 1px; background-color: red; } .all:checked ~ .option > .checkmark:after { display: block; } .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 1px solid red; border-radius: 5px; margin-right: ..

[React] React Hooks - useState, useEffect

Hooks는 혼란을 야기했던 Class없이 React의 기능을 사용할 수 있게 해준다. Hooks는 함수 컴포넌트에서 React state와 생명주기(lifecycle features)을 연동할 수 있게 해주는 함수들을 말한다. React Hooks는 다음과 같은 사용 규칙이 있다. React 함수 컴포넌트 내에서 호출해야 한다. 컴포넌트 내 최상위에서 호출해야한다. 1. useState state값은 컴포넌트가 렌더링 돼도 유지되며, 컴포넌트가 렌더링될 때 한번만 생성된다. 아래 코드에서 0의 자리에는 초기값을 넣는다. function Sample() { // 선언 const [count, setCount] = useState(0); return( {count} setCount(count+1)}> ) ..