FrontEnd3 requestAnimationFrame에 대해 알아보기 requsetAnimationFrame이란? requestAnimationFrame()은 브라우저에서 애니메이션을 최적화하여 실행할 수 있도록 제공하는 JavaScript API이다.주로 CSS 애니메이션이나 setTimeout(), setInterval()을 사용하는 것 보다 성능이 뛰어나기 때문에 웹 애니메이션을 구현할 때 많이 사용된다. requestAnimationFrame()의 목적은 애니메이션을 위한 프레임 렌더링을 브라우저의 화면 갱신속도(리페인팅)에 맞추는 것이다.이 API를 사용하면 브라우저의 리프레시 속도(초당 60프레임, 60FPS)를 고려하는데 이 갱신 주기를 맞추어 콜백을 실행해 부드럽고 효율적인 애니메이션을 만들 수 있다. 이를 통해 브라우저가 최적의 시점에 프레임을 렌더링하도록.. 2025. 3. 18. 자바스크립트 함수의 특징 자바스크립트 함수에는 여러가지 특징들이 있다. 1.일급 객체일급 객체(First-Class Object)는 프로그래밍 언어에서 특정 타입의 데이터가 아래 조건을 만족할 때 사용하는 용어이다.변수에 할당할 수 있다.함수의 인자로 전달할 수 있다.함수의 반환값으로 사용할 수 있다. 자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로도 사용할 수 있다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction.. 2024. 12. 3. Lighthouse로 프론트엔드 성능 개선하기 해당 글은 Velog에서 옮겨온 글 입니다.문제점1. 첫 화면 컨텐츠 렌더링시 버벅거리는 문제첫 화면에서 AOS 라이브러리를 사용하여 이미지에 flip 효과를 주는 애니메이션을 적용했다.하지만 해당이미지가 렌더링 될 때 커튼처럼 버벅거리며 렌더링되었고 깜빡거리면서 보여지는 문제가 발생했다.해당 문제는 두 가지의 방법으로 해결했다.CSS의 will-change 속성으로 해결CSS 작업에서 스타일 계산, 레이아웃 처리, 애니메이션 프레임 계산 등을 CPU가 담당하는데, CPU가 과도하게 사용되는 경우 버벅거리고 깜빡이는 문제가 발생할 수 있다.CSS의 will-change 속성은 브라우저에게 요소의 예상 변경 사항을 미리 알려주는 역할을한다.이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 .. 2024. 9. 9. 이전 1 다음
