반응형 javascript4 Javascript 스크롤 페이징 처리중 이벤트가 여러차례 중복 호출된다면? 개발을 하다보면 Javascript 이벤트가 여러차례 중복 호출되는 현상을 만나본 적 있을 것입니다. 저같은 경우 자바스크립트로 세로 스크롤을 맨 아래로 내렸을때 자동으로 "더보기"기능이 실행될 수 있도록 스크롤 페이징 작업을 수행하고있었습니다. 그때 스크롤이 최하단 부분에 닿게 되었을 때 "더보기"버튼을 실행하는 Function이 10~20회가량 중복 호출이 되버리는 바람에 10개씩 더보기 되어야할 화면에 한번에 100~200개씩 중복 호출이 되는 현상을 맞이하게 되었습니다. 이런 상황에서의 대처법을 알려드리겠습니다. 1. 스크롤 이벤트를 디바운스(debounce) 처리하기디바운스는 연이어 호출되는 함수들 중에서 마지막 함수만 실행하도록 하는 기술입니다.이를 통해 스크롤 이벤트 발생 시 함수가 여러 .. 2024. 6. 25. Javascript의 eval()을 new Function()으로 대체해보자. 저번 포스트에서 eval()의 보안상 문제점에 대하여 다루었는데요, 그와 관련하여 이번 포스팅에서는 new Function()으로 대체하는 방법에대해 알아보겠습니다. 1. 간단한 식으로 된 예시 2. 동적으로 생성된 함수 예시 3. 외부 변수 활용 예시 위의 세가지 예시와 같이 eval() -> new Function()으로 쉽게 대체할 수 있습니다. 감사합니다. 2024. 3. 28. Javascript의 eval() 이란? 안녕하세요, 오늘은 자바스크립트의 eval함수에 대하여 알아보겠습니다. 자바스크립트의 eval() 함수는 문자열을 자바스크립트 코드로 해석하고 실행하는 기능을 제공합니다. 이 함수는 강력한 기능을 가지고 있지만, 신중하게 사용해야 합니다, 왜냐하면 보안상의 이유로 사용을 권장하지 않는 경우도 많기 때문인데요. 우선 사용법부터 천천히 알아보겠습니다. 1. eval() 사용법 위와 같이 다양하게 eval() 함수를 사용할 수 있습니다. eval() 함수는 문자열을 코드로 실행하기 때문에 사용자 입력을 처리하거나 외부 소스에서 가져온 코드를 실행할 때 주의해야 합니다. 2. eval() 보안상의 문제 1) Injection Attacks - eval() 함수는 문자열을 자바스크립트 코드로 해석하고 실행합니다... 2024. 3. 24. CSS Animation vs Javascript Animation CSS Animation vs Javascript Animation CSS 에니메이션과 자바스크립트 에니메이션에 대한 성능차이에 대한 고민은 프론트엔드 개발로는 절대로 중요한 사안입니다. 웹 프론트 엔드는 HTML, CSS 및 JavaScript의 세가지로 구축됩니다. HTML, CSS 및 JavaScript는 HTML5 및 CSS3 이후로 특히 겹칩니다. 과거에는 복잡한 애니메이션을 위해서 Javascript에 의존적이었지만, 그리고 여전히 GSAP와 같은 라이브러리가 있지만 요즘에는 Transition을 사용하여 애니메이션을 적용 할 수도 있습니다. 이를 통해 브라우저에서 javascript를 사용하는 몇가지 규칙을 공식화 할 수 있습니다. Javascript를 통한 에니메이션, 포커스 된 상태 대신.. 2023. 11. 7. 이전 1 다음 반응형
