보통 무한 루프 코드를 작성할 때 'try-catch' 블록을 사용하는 것은 에러 핸들링을 위해 좋은 방법 중 하나.하지만 무한 루프가 끝나지 않는 문제를 해결하는 가장 중요한 방법은 루프를 적절하게 종료할 수 있는 조건을 만드는 것! 1. 루프 조건 명확히 하기: 루프가 종료될 수 있는 명확한 조건을 설정2. 타임아웃 설정: 특정 시간이 지나면 루프를 종료하도록 타임아웃을 설정3. 에러 핸들링: 'try-catch' 블록을 사용하여 에러 발생 시 루프를 종료하거나 재시도 로직을 작성4. 외부 신호: 외부 신호나 상태 변수를 사용하여 루프를 제어할 수 있도록 함. let running = true; const timeout = setTimeout(() => { running = false; on..
실무를 하다가 건물을 클릭했을 때 webGL에서 카메라가 해당 건물로 줌인되는데 줌인이 끝나면 그 건물에 대한 정보가 담긴 모달창이 뜬다. 카메라가 움직이는 몇 초 사이에 건물을 여러번 클릭하면 해당 함수가 중복적으로 일어나 모달창이 꺼졌다 켜졌다하는 문제가 발생했다. 여기서 디바운스 라는 기술을 적용해 보기로 했다. debounce의 일반적인 뜻은 전자 회로 스위치의 신호 이상 상태에서 왔다. 전자 회로 스위치를 눌렀다가 떼는 과정에서 전압이 불규칙적으로 들어거 전류의 흐름이 비정상적으로 일어나는 현상을 바운싱이라고 한다. 이런 비정상적인 흐름을 정상적으로 해주는 작업이 "디바운싱"이다. 해당 개념을 웹으로 가져와 예를 들어보면 우리는 어떠한 input창을 칠 때 혹은 버튼을 누를 때 의도치 않게 서버..
개인 프로젝트를 하는데 state인 editingIndex의 초기값을 null로 두고 useEffect(() => { if (editingIndex && inputRef.current) { inputRef.current.focus(); } }, [editingIndex]); 이렇게 useEffect로 변경될 때 input창에 바로 포커싱을 주어 UX를 향상시키기 위한 코드를 짰다. 근데 editingIndex가 1번 째 일 때는 focus가 잘 되는데 유독 0번 째 일 때만 focus가 되지 않는 것이다. 그래서 useEffect(() => { if (editingIndex !== null && inputRef.current) { inputRef.current.focus(); } }, [editingIn..
{ skip(true); }} > ... 코드 중 이런 코드를 발견하게 되는데 여기서 onAnimationEnd는 무엇일까?? onAnimationEnd 이벤트 핸들러는 애니메이션이 끝났을 때 실행되는 콜백 함수이다. 해당 코드에서는 onAnimationEnd 이벤트가 발생하면 콜백 함수가 호출된다. 여기서 의문은 이 div 태그에 어떤 애니메이션이 있는가이다. 답은 바로 className 코드에서 태그는 loading 클래스가 있는 요소이다. 해당 요소에는 CSS에서 정의된 애니메이션 클래스(fadeOut)가 추가되거나 제거되는데 이게 바로 애니메이션! 애니메이션 클래스가 추가되면 loading 요소는 해당 애니메이션을 수행하고, 애니메이션이 끝나면 onAnimationEnd 이벤트 핸들러를 통해 sk..
