분류 전체보기22 (번역) CSS content-visibility를 이용해 렌더링 성능 향상 시키기 원문: https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/기존 번역문: https://velog.io/@superlipbalm/improving-rendering-performance-with-css-content-visibility💡기존 번역문을 좀 더 읽기 쉽게 바꾸고 설명을 추가한 번역문입니다. 최근에 emoji-picker-element(이모지를 선택할 수 있게 해주는 웹 컴포넌트)에서 흥미로운 성능 이슈가 발견되었습니다.19,000 개의 커스텀 이모티콘이 있는 페디버스 인스턴스를 사용 중인데 ... 이모티콘 선택기를 열면 페이지가 최소 1초 동안 멈추고 그 후에도 한동안 전반.. 2024. 11. 4. 매크로 태스크 큐(Macro Task Queue), 애니메이션 프레임 큐(Animation Frame Queue), 마이크로 태스크 큐(Micro Task Queue) 자바스크립트 런타임의 큐에는 매크로 태스크 큐(태스크 큐), 애니메이션 프레임 큐, 마이크로 태스크 큐가 있습니다. 이 큐간의 우선순위는 위 사진과 같이 마이크로 태스크 큐가 가장 우선순위가 높고 애니메이션 프레임 큐, 매크로 태스크 큐의 순서대로 순위가 매겨져 있습니다. 매크로 태스크 큐 (Macro Task Queue)매크로 태스크 큐 또는 태스크 큐라고 불리우는 큐입니다. 자바스크립트의 콜 스택이 모두 비워져 이벤트 루프가 작동 시 매크로 태스크 큐에 태스크가 있다면 해당 태스크를 콜 스택으로 옮겨 실행합니다. 매크로 태스크 큐의 특징은 이벤트 루프 1번 수행시 1개의 태스크만 실행된다는 것입니다. 매크로 태스크 큐에는 setTimeout, setInterval, DOM, I/O, Network r.. 2024. 10. 29. 전역 에러 바운더리와 지역 에러 바운더리 (feat.Sentry) API 에러 발생시 먼저 지역 Error Boundary인 API 에러 바운더리에 에러가 전달된다.API 에러 바운더리가 에러를 처리하면 해당 에러 Sentry로 전달 → 전역 에러 바운더리는 관여하지 않음API 에러 바운더리가 에러를 처리하지 않고 throw하면 → 전역 에러 바운더리가 캐치지역 에러 바운더리가 throw한 에러는 전역 에러 바운더리가 캐치하게 되고 해당 에러를 Sentry로 전달한다. 2024. 10. 22. Next.js에서의 GSAP 사용 1. DOM 요소일때단일 요소일 경우 useRef를 사용import React, { useRef } from 'react';import { gsap } from 'gsap';import { useGSAP } from '@gsap/react';const AnimatedComponent = () => { // ref 생성 const boxRef = useRef(null); useGSAP(() => { // ref가 가리키는 요소에 애니메이션 적용 gsap.from(boxRef.current, { opacity: 0, y: 50, duration: 1, ease: "power3.out" }); // useGSAP이 자동으로 cleanup을 처리하므로 .. 2024. 10. 22. 이전 1 2 3 4 ··· 6 다음
