[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling)
디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 무리를 주지 않기 위해 사용되곤 합니다. 일종의 최적화라고 볼 수 있습니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉,..
2021. 6. 5.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
2020. 9. 6.
[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling)
디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 무리를 주지 않기 위해 사용되곤 합니다. 일종의 최적화라고 볼 수 있습니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉,..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..