📍참고 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..

이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅타입 단언문은 일반적으로 타입을 위험하게 만들지만, 상황에 따라 필요할 때도 있다. 불가피하게 사용해야 한다면, 정확한 정의를 갖는 함수 안으로 숨겨야 한다 📍함수를 만들 때, 타입 정보를 힘들게 구성하지 않아도 된다 함수의 타입 정의만 보면, 간단해 보이지만, 내부 로직에 모두 안전한 타입을 붙이는 것은 힘든 작업이다 - 불필요한 예외 상황을 전부 걸러낼 필요는 없다. 타입 정의에서는 any를 쓰면 안되지만.. // 타입 정의 type cacheLast = (fn: T) => T 실제 구현체에서는 any 또는 타입 단언문을 사용해도 된다! - 타입 정의에는 any가 없기 때문에, cacheLast를 호출하는 쪽에서는 any가 쓰였는지 모른..

📍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..

이전 글 2023.03.26 - [🛠️FE Lib & FW/React] - [React Docs] React 방식으로 생각하기 (1) [React Docs] React 방식으로 생각하기 (1) 📍참고 https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 📍목표 아래의 json 데이터와 디자인 목업을 React로 구현해보자 - json [ { category: "Fruits", pri ggarden.tistory.com 📍참고 https://react.dev/learn/thinking-in-react Thinking in React – R..

📍참고 https://react.dev/learn/thinking-in-react Thinking in React – React The library for web and native user interfaces react.dev 📍목표 아래의 json 데이터와 디자인 목업을 React로 구현해보자 - json [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" }, { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" }, { cate..

리액트 공식 문서(react.dev) 읽기더보기Built-in React Hooks 1. useTransition2. useCallback 📍useCallback✅리렌더링 간 함수 정의를 캐시할 수 있는 훅- 컴포넌트 상단에서 호출const cachedFn = useCallback(fn, dependencies) 📍useCallback(fn, dependencies)✅매개변수fn- 종속성 배열(dependency array) 의 원소가 바뀌지 않으면 캐시되는 함수- 종속성 배열의 원소가 바뀌면, 렌더링 중에 전달한 콜백 함수를 리턴하고, 재사용에 대비하여 저장(캐싱) dependencies- fn 코드 내부에서 참조되는 모든 반응형 값(props, state 및 컴포넌트 내부의 모든 변수와 함수) 배..

📍참고 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 로 실행 가..