웹 성능 최적화 - 애니메이션 최적화

🎞️ 애니메이션 최적화💥 쟁크(Jank) 현상애니메이션이 부드럽지 않고 끊기는 현상 DOM 업데이트 시 Reflow가 발생함Reflow는 레이아웃 계산과 Paint 재수행을 유발이로 인해 프레임 드랍과 성능 저하 발생📐 Reflow레이아웃을 다시 계산하는 과정 처리 순서DOM + CSSOM 파싱Render Tree 생성Layout 계산 및 배치PaintComposite🎨 Repaint레이아웃 재계산 없이 화면을 다시 그리는 과정예: color, background-color 변경 등 처리 순서DOM + CSSOM 파싱Render Tree 생성Layout 계산 및 배치 (변경 없을 시 생략 가능)PaintComposite 🚀 애니메이션 성능 최적화 전략부드러운 애니메이션을 위해 Reflow/Rep..

• format_list_bulleted TIL(Today I Learned)
• · 2025. 4. 2.
• textsms

React Testing Tutorial(9) - findBy

findByReact Testing Library에서 DOM요소를 찾을 때 많이 쓰이는 메서드 중 하나인 findBy는 비동기적으로 요소를 찾을 때 유용하다.API 호출이나, 타이머처럼 일정 시간이 지난 후에 렌더링 되는 요소를 테스트할 때 주로 사용된다.findBy는 Promise를 반환한다. 지정된 시간 내에 해당 요소를 찾으면 resolve, 그렇지 않으면 reject 된다. 사용시기데이터 패칭 이후 나타나는 요소setTimeout, setInterval 등으로 일정 시간이 지난 후 나타나는 요소상태 변경으로 인한 렌더링 결과물findBy와 getBy는 유사하지만 비동기 요소를 기다린다는 점에서 다르다.promise를 반환하기 때문에 주로 async/await와 함께 사용된다.const elemen..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 18.
• textsms

React Testing Tutorial (8) - getAllBy..., textMatch

getAllBy-이전까지 getBy-를 이용해서 한 개의 요소를 찾는 방법을 배웠다. 여러 개의 요소가 있는 상황을 테스트하는 상황도 있을 것이다. 이때 사용할 수 있는 방법으로 getAllBy-가 있다. getAllBy-는 getBy-와 비슷하지만, 여러 개의 요소를 찾을 때 사용한다.이전 글들은 1개의 요소를 찾을 때 사용했지만, 이번 글에서는 여러 개의 요소를 찾을 때 사용하는 방법을 알아보자.사용법const elements = screen.getAllByRole("textbox")expect(elements).toHaveLength(2) // textBox가 2개 있을 때주의사항getAllBy-는 요소가 없을 때 에러를 발생시킨다.getAllBy-는 요소가 1개일 때도 에러를 발생시킨다.getAl..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 11.
• textsms

React Testing Tutorial(7) - getByDisplayValue, getByAltText, getByTitle, getByTestId

getByDisplayValue()폼 요소(, 등)에 표시된 텍스트 값을 기반으로 DOM요소를 찾는 데 사용된다.주로 폼 입력 필드의 값을 확인하거나 해당 값을 가진 요소를 대상으로 테스트할 때 유용하다.사용 예시import { render, screen } from '@testing-library/react';test('input 요소에 입력된 값을 찾습니다.', () => { render(); const inputElement = screen.getByDisplayValue('테스트 값'); expect(inputElement).toBeInTheDocument();});위 코드에서 getByDisplayValue('테스트 값')은 value 속성이 '테스트 값'인 input 요소를 찾는다.get..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 8.
• textsms

React Testing Tutorial(6) - getByLabelText(), getByPlaceholderText(), getByText()

1. getByLabelText()getByLabelText 함수는 폼 요소를 테스트할 때 주로 사용되다. 요소에 연결되어 있는 폼 요소(ex: input, textarea 등)를 쉽게 찾을 수 있게 도와준다.label에 연결된 폼 요소는 보통 접근성을 위해서 사용되며, getByLabelText를 사용하면 사용자가 실제로 인터페이스와 상호작용하는 방식과 유사한 방식으로 테스트할 수 있다.사용 예시아래와 같은 폼 요소가 있을 때UsernamePassword테스트 코드를 작성 시 getByLabelText()를 이용해서 input요소를 선택할 수 있다.text('폼 요소 테스트', () =>{ render() const usernameInput = screen.getByLabelText("Use..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 9. 1.
• textsms

React Testing Tutorial(5) - getByRole, getByRole option

getByRole접근성 트리를 통해 요소를 찾아내는 데 사용하는 메서드이다.사용자가 페이지에서 상호작용 할 수 있는 요소를 찾아내는 데 도움을 준다.주요 개념1. 역할 기반 탐색getByRole은 HTML의 role 속성에 따라 요소를 찾아낸다. 이 role은 스크린 리더와 같은 접근성 도구가 웹 페이지를 해석할 때 사용하는 중요한 속성이다.2. 일치 기준기본적으로 역할 기반으로 찾지만 추가적으로 name옵션을 사용하여 요소의 텍스트나 aria-label과 같은 접근성 속성도 검사할 수 있다.3. 다양한 HTML 요소 탐색버튼, 링크, 이미지, 체크박스 등 다양한 HTML 요소를 탐색할 수 있다., , 등은 각각 button, link , checkbox와 같은 역할을 한다. 'getByRole'을 사..

• format_list_bulleted TIL(Today I Learned)
• · 2024. 8. 25.
• textsms