📍참고 https://testing-library.com/docs/queries/about About Queries | Testing Library Overview testing-library.com 📍Queries ✅testing-library 에서 제공하는 API - Element를 찾을 수 있게 도와주는 역할 - DOM API의 querySelector 와 비슷하다 - 예시 // 을 모두 찾을 때 const inputs = screen.getAllByRole("textbox"); // 을 1개 찾을 때 const button = screen.getByRole("button"); ✅Query Type ✅Query Priority - getByRole : aria-role 기반으로 탐색 - getByL..

📍참고 https://create-react-app.dev/docs/running-tests Running Tests | Create React App Note: this feature is available with react-scripts@0.3.0 and higher. create-react-app.dev 📍before test.. ✅뭘 테스트 할건지 명확히 정하기 - 특정 컴포넌트의 기능.. - 유저 입력.. ✅테스트 성공, 실패 여부를 어떤 기준으로 할 건지 정하기 - 일치하는 문자열을 출력.. 📍Create React App 환경의 내장 testing 라이브러리 설치된 것들 1) @testing-library/react : ReactDOM을 사용하여 테스트할 컴포넌트를 렌더링 (React Te..

📍ARIA장애가 있는 사용자가 웹 콘텐츠 및 웹 앱(특히 JavaScript 웹 앱)에 더 쉽게 접근할 수 있도록 하는 방법을 정의- HTML, JavaScript 를 보완 기본적으로 ARIA 대신 기존의 HTML element 또는 semantic element 를 우선하는 것이 좋다- 웹 접근성을 고려하여 ARIA element를 우선적으로 사용하면, 이를 보충하기 위해 구현해야 할 코드 또는 에러가 많아질 수 있음- 따라서 ARIA element는 꼭 필요한 순간에만 사용해야 한다 (No ARIA is better than bad ARIA) 📍예제HTML 어트리뷰트 설명role : aria-role- 브라우저에게 해당 element가 JavaSript로 구동되는 진행상태 위젯이라는 것을 알린다a..

📍참고 https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 📍설치 TypeScript 사용을 위해 추가 라이브러리도 함께 설치 npm i -D jest ts-jest @types/jest 이후 설정파일 만들기 - jest.config.ts 생성 import type { Config } from "jest"; const config: Config = { verbose: true, preset: "ts-jest", }; export default config; package.json 에 test script 추가 - npm test 로 실행 가..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍18. 사용자 요구에 따른 실행유저가 의도치 않은 기능이 실행되면 안된다 ✅새 창을 열 때, 스크린 리더 사용자에게 새 창이 열림을 알려줘야 한다- 아래와 같은 방법을 사용할 수 있다이용약관새 창또는이용약관또는이용약관 - target="_blank" 어트리뷰트 방식이 가장 간편하다- 이 밖에 window.open() 방식도 있지만, 스크린 리더가 인지 불가- 센스리더 외의 스크린 리더에서는 title, target 방식을 읽어주지 않으므로 주의 ✅컨트롤 선택 시 바로 기능이 실행되면 안됨- 유저가 콤보 상자, 라디오 버튼, 체크 박스 등의 컨트롤을 선택했을 때 기능이 실행되면 안된다- 예..

부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍13. 깜빡임과 번쩍임 사용 제한✅광과민성 발작- 1997년 일본에서 포켓몬스터 애니메이션의 특정 에피소드를 보고 750명의 어린이들이 구토, 어지럼증, 경련 등을 일으킴- 이는 밝은 빛의 화면 점멸이 연속되는 장면을 보고 일어난 광과민성 발작 때문으로 밝혀짐 ✅과도한 깜빡임과 번쩍임 방지- 점멸 컨텐츠가 차지하는 면적이 화면 전체 면접의 10% 미만이 되게 조정- 시간을 3초 미만으로 제한- 사전에 경고하며, 중단 가능한 수단을 제공 ✅PEAT- 컨텐츠가 초당 3~50회 깜빡이는지를 확인할 수 있는 프로그램https://trace.umd.edu/peat/ Photosensitive Ep..