프론트엔드 개발자가 될거야./ts
-
[typescript] 너는 무슨 타입이니? (keyof 연산자, Record<string, boolean>)프론트엔드 개발자가 될거야./ts 2023. 5. 17. 12:40
- previewImage 상태 변수에서 kyc 값에 따라 이미지를 렌더링하는 기능을 구현할 때 interface IPreviewImage { advanced: string; basic: string; } const [previewImage, setPreviewImage] = useRecoilState(previewImageState); {previewImage[kyc as keyof IPreviewImage] && ( )} IPreviewImage 인터페이스와 previewImage 상태 변수를 사용하여 이미지 미리보기를 구현하는 부분이다. IPreviewImage 인터페이스는 advanced와 basic 두 개의 속성을 갖고 있고 previewImage 상태 변수는 useRecoilState 훅을 사..
-
[react][react-modal][typeScript] react-modal typeScript 환경에서 style 적용하기프론트엔드 개발자가 될거야./ts 2023. 2. 8. 23:44
나는 모달을 띄울 때 react-modal 라이브러리를 사용한다. https://reactcommunity.org/react-modal/ react-modal documentation react-modal Accessible modal dialog component for React.JS We maintain that accessibility is a key component of any modern web application. As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web. reactcommunity.org react-modal typescr..
-
[typeScript 오류] li tag : onMouseOver must be accompanied by onFocus for accessibility프론트엔드 개발자가 될거야./ts 2023. 2. 7. 15:39
setIsListHover(true)} onMouseOut={() => setIsListHover(false)} > li tag에 onMouseOver, onMouseOut 이벤트를 추가했더니 eslint typeScript 오류가 났다. onMouseOver must be accompanied by onFocus for accessibility. onMouseOut must be accompanied by onBlur for accessibility. 라는데.. https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/93f78856655696a55309440593e0948c6fb96134/docs/rules/mouse-events-have-key-even..