js

이벤트 제어하기. 쓰로틀링(throttling)과 디바운싱(debouncing)

✍ 쓰로틀링과 디바운싱 개념 : 디바운싱과 쓰로틀링은 자주 사용되는 이벤트나 함수의 빈도를 줄여 성능상 유리함을 가져오기 위한 개념이다. 📌 디바운싱 연속으로 호출되는 함수(이벤트)에서 가장 마지막(혹은 처음) 이벤트만 실행되도록 한다. == 입력(이벤트)가 끝난 후에 요청을 보내면 된다. 검색 시 많이 사용 이벤트 발생 시점 입력이 끝날 때까지 무한정 대기 이벤트 발생 시(ex onChange) 타이머를 설정해두고, 200ms(설정 시간) 이전에 타자 입력(이벤트)가 발생하면 이전 타이머는 클리어, 새로운 타이머를 설정해준다. 설정 시간 이전에 이벤트가 발생하지 않으면 이벤트 발생 끝 => 코드가 실행된다. 📌 쓰로틀링 연속으로 호출되는 함수(이벤트)를 일정 시간 동안에 한번씩만 실행되도록 한다. ==..

JavaScript 자바스크립트 이벤트 리스너(eventListener)

나.. 이벤트리스너 모르네 ✍ addEventListener EventTarget 인터페이스의 메서드. 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정한다. = 호출 시 인자를 전달받는다. 일반적인 대상 Element, Document, Window지만 XMLHttpRequest 같이 이벤트를 지원하는 모든 객체가 대상이 될 수도 있다. target.addEventListener('click', function(){}) 이벤트명을 나타낸 문자열 함수 (콜백함수) 옵션 ( capture, once, passive, signal ... ) 기존 이벤트 핸들러 (onclick)등을 사용하는 것에 비해 addEventListener을 사용하면 이전에 추가한 이벤트 핸들러를 제거할 수 있응 대응 메소드 ..

[ CSS ] 아이템에 shadow 주기

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com css shadow쓸 때 좋음 https://getcssscan.com/css-buttons-examples?ref=beautifulboxshadow-bottom CSS Scan - The fastest and easiest way t..

[react] .process.env.REACT_APP_KEY undefined

문제 상황 드림코딩 강의를 들으면서 분명히 하라는 대로 했는데 계속해서 문제가 생겼다. firebase도 일부러 다운그레이드를 해서 버전 7로 실행했는데. 계속 process.env.REACT_APP_FIREBASE_API_KEY가 undefined라는 것 key 값이 잘못되었나 확인을 하고 .env 파일에서 값을 복붙해 컴포넌트에 직접 담았을 때는 정상적으로 작동되었다. 따라서 key값에는 문제가 없고, _FIREBASE_API_KEY 뿐만 아니라 .env 파일에 담아둔 키들이 활동을 못하는 것 같았다 해결방법 일단 맨 처음 할 일은 .env파일에 ,를 넣은 것은 아닌지 살펴보고 .env파일을 root에 생성한 것이 맞는지 다시 확인한다. 아무리 해도 코드에 문제가 없다면 'dotenv'를 설치하면 된..

[FISH-NEWS] 프로젝트 기록

주저리 일단 글을 계속 안 쓰기는 했는데 지속적으로 공부를 하기는 했다 HTML CSS같은 경우는 어느 정도 궤도에 올랐다고 생각하지만 JS는 글쎄 조금 더 노력해야 할 것 같다 일단 목표는 이번 달 안으로 궤도에 진입하는 것이기는 하지만 될런지 지금까지 해 온 것처럼 하면 잘 될 것 같기는 하다 드림코딩 앨리와 노마드코더 무료강의들을 일단 열심히 수강했고 이제 강의를 구매해서 들을 예정 어쨌든 지금까지 배운 내용들을 바탕으로 혼자 프로젝트를 하나 수행해보기로 했다. 처음 코딩이란 걸 접해보고 HTML에 을 처음 작성했을 때 열의에 차서 혼자 이것저것 만들어봤는데 지금 보면 음.. 분명 두 달 전 정도밖에 되지 않았지만 아주 부끄러운 퀄리티다 당연하게도 깃허브 연동은 꿈도 꾸지 않았다 이상이 높은 편인지..