본문 바로가기

2022/06

 (64)
리액트 테스트 : React Testing Library로 Counter 테스트하기 React Testing Library는 상용구 제거, 테스트 환경 자동 초기화 등 다양한 기능을 제공합니다. React Testing Library는 DOM Testing Library의 React 구현입니다. (다른 구현으로는 React Native Testing Library 등이 있습니다). 이전 게시물에서 작성한 코드 변경하기 돔 생성 보일러플레이트 제거 이벤트 보일러플레이트 제거 테스트 환경 초기화 보일러플레이트 제거 import * as React from 'react' import {render, fireEvent} from '@testing-library/react' import Counter from '../../components/counter' test('counter increme..
리액트 테스트 : 라이브러리 없이 Counter 테스트하기 소프트웨어를 사용하는 것처럼 테스트하라- @kentcdodds 자바스크립트 테스트는 무엇일까요? 어떤 상태를 설정하고, 어떤 동작을 수행하고, 새로운 상태에 대한 주장을 하는 코드일 뿐입니다. 상태 > 동작 > 새로운 상태(assertion) 아래의 간단한 카운터 컴포넌트를 위의 원칙에 따라 테스트해 봅시다. 테스트 작성 시, 두 사용자를 고려합니다. 최종 사용자 : 사용자들이 내 코드와 인터랙션 하는 방법(버튼 클릭 등) 개발자 사용자 : 개발자들이 내 코드를 사용하는 방법 (렌더링, 함수 호출 등) 테스트 사용자(The Test User)는 고려 대상이 아닙니다! 리액트 컴포넌트 관점에서 개발자 사용자는 react-dom의 createRoot API(React Native와 유사한 개념)를 사용하여 ..
CSS 애니메이션 : 접근성 전정기관 장애가 있는 사람들에겐 잘못된 애니메이션이 불쾌감을 유발할 수 있음 미디어 쿼리의 prefers-reduced-motion를 통해 애니메이션 효과를 줄일 수 있는 옵션 제공하기 1. 애니메이션 디폴트, 설정으로 끄기 .fancy-box { width: 100px; height: 100px; transform: scale(1); transition: transform 300ms; } .fancy-box:hover { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .fancy-box { transition: none; } } 2. 애니메이션 없음 디폴트, 설정으로 on .fancy-box { width: 100px; heigh..
CSS 애니메이션 : 설계 Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon..
CSS 애니메이션 : 성능 느린 애니메이션은 사용자 경험을 망칩니다. 우리의 뇌가 애니메이션을 부드럽게 인식하려면 초당 60프레임이 필요합니다. 이는 각 프레임 업데이트에 16ms 정도만 소비해야 한다는 것입니다. 안그러면 사용자는 버벅거림을 느끼게 됩니다. 애니메이션 성능은 깊고 심오한 주제임으로 필수 사항만 짚고 넘어갑니다. 픽셀 파이프라인 화면의 픽셀 색상을 업데이드 하는 경우, 다음과 같은 단계의 파이프라인이 있습니다. 스타일 재계산 — 먼저 어떤 CSS 선언이 어떤 요소에 적용되는지 파악해야 합니다. 레이아웃 — 다음으로 각 요소가 페이지에서 어디에 위치하는지 파악해야 합니다. 페인트 — 모든 것이 어디에 있는지 알게 되면 페인트를 시작할 수 있습니다. 이것은 모든 픽셀이 어떤 색상이어야 하는지 파악("래스터화")하고 채..
CSS 애니메이션 : Keyframe 응용 Fill Modes 왜 사라졌다 다시 나타나지? from 및 to 블록의 선언은 애니메이션이 실행되는 동안에만 적용됩니다. @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .box { animation: fade-out 1000ms; } HTML 삽입 미리보기할 수 없는 소스 즉, 기본값인 불투명도 1로 돌아가는 건데요, 그러면 애니메이션 종료 시의 속성을 선언해줘야 하나? @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } .box { animation: fade-out 1000ms; /* Change the "default" value for opacity, so that ..
CSS 애니메이션 : Keyframe CSS 키프레임 애니메이션은 @keyframes at-rule을 사용하여 선언됩니다. 한 세트의 CSS 선언에서 다른 세트로의 전환을 지정할 수 있습니다. @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0%); } } 각 @keyframes 문에는 이름이 필요합니다! 이 경우 이름을 slide-in으로 지정했습니다. 이것을 전역 변수처럼 생각할 수 있습니다. 키프레임 애니메이션은 일반적이며 재사용할 수 있습니다. animation 속성을 사용하여 특정 선택자에 적용할 수 있습니다. .box { animation: slide-in 1000ms; } 동일한 keyframe 선언에 여러 애니메이션을 ..
CSS 애니메이션 : Transition Tansform으로 변환을 했다면, Transition으로 이전과 이후를 이어줍니다. 전환은 고도로 구성할 수 있지만 두 가지 값만 필요합니다. 애니메이션을 적용하려는 속성의 이름 애니메이션의 지속 시간 여러 속성에 애니메이션을 적용하려는 경우 쉼표로 구분된 목록을 전달할 수 있습니다. all도 가능하지만... 애니메이션은 소금과 같습니다. 너무 많으면 요리가 망합니다. .btn { transition: transform 250ms, opacity 400ms; } .btn:hover { transform: scale(1.2); opacity: 0; } Timing functions 웹에서 "모션"에 대해 이야기할 때 실제로는 시뮬레이션된 동작에 대해 이야기하고 있습니다. 픽셀 자체는 디스플레이에서 움직이..

티스토리툴바