목록2023/03/26 (3)
kohigowild

Debounce 는 이벤트 핸들러의 과도한 횟수가 발생하는 경우를 효과적으로 제어하여 성능의 개선을 목표로 하는 프로그래밍 기법으로, 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기법이다. 해당 프로젝트에서는 검색 페이지에서 키워드 입력 시, 키워드 입력 완료 후 특정 시간 이후 API를 요청하도록 적용하였다. 🗒️ 적용 전 코드 키워드를 담을 state를 선언해 주고 input에 onChange 이벤트를 적용한다 의존성 배열에 keyword를 전달해서 keyword의 값이 변동될 때마다 api를 요청한다 const [keyword, setKeyword] = useState(''); useEffect(() => { // api call searchFeedList(keyword, setFeed..

Problem 타입스크립트 환경에서 env 변수 사용 시 import.meta.env에서 타입 오류 발생 Property 'env' does not exist on type 'ImportMeta'. Reference https://github.com/vitejs/vite/issues/9539 Property 'env' does not exist on type 'ImportMeta' in 3.0.0 · Issue #9539 · vitejs/vite Describe the bug In vite 3.0.0 it still exists, even if it was previously closed. Can be recreated using react-ts template. Try to use env variabl..

https://heytossme.netlify.app/ HeyTossMe heytossme.netlify.app Problem 메인 페이지 등에서 사이트가 버벅거리거나 로딩이 느려지는 문제 이미지 최적화 관련 처리 X Reason 검색하다가 LightHouse라는 툴을 발견해서(!!) 한 번 적용해 봤는데 성능 점수 뭔 일임 메인 페이지 무한 슬라이드에서 성능 문제가 있을 거라는 예상은 했었는데, 무한 슬라이드 로직에 문제가 있는 게 아니라 고화질 이미지를 너무 많이 사용한 데서 크게 문제가 아닐까 싶었다 Try to solve 메인 페이지 무한 슬라이드 이미지 교체 대놓고 버벅거리는 문제는 해결됨 41점이긴 한데 410점 같음 이미지 업로드 시 이미지 압축 코드 작성 browser-image-compr..