본문 바로가기
반응형

분류 전체보기572

react test library에서 textarea 테스트할때 keyPress,keyDown 결론만 말하면 keyPress 안먹히고 keyDown 써야한다. https://github.com/testing-library/user-event/issues/391 userEvent.type(input, 'text') consistently shuffles the input · Issue #391 · testing-library/user-event @testing-library/user-event version: 12.0.11 Testing Framework and version: jest@24.9.0 DOM Environment: jsdom@14.0.0 (via jest-environment-jsdom-fourteen) I'm having some issues with the following... .. 2024. 1. 9.
JSX Element React Element ReactNode 차이 JSX Element, React Element, ReactNode 먼저 JSX가 createElement로 변환되는 것을 한번 보자 return hi; 위 JSX 코드는 다음과 같이 변환된다. return React.createElement('div', null, 'hi'); JSX Element와 React Element의 관계 JSX문법으로 적는 return hi는 react와 컴파일러에 의해 JS인 createElement로 변환된다. 이 createElement를 통해 생성되는 element가 바로 가상돔의 표현방식인 React Element이다. 실제로 타입을 보았을때는 JSX Element가 React Element보다 조금 더 유연한 방식이다 정도로만 느껴진다. 이 타입은 React El.. 2024. 1. 8.
webpack에서 vite로 마이그레이션 이 프로젝트를 webpack에서 vite로 마이그레이션했다. 1. 빈 vite 만들고 필요한 것 복붙 https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/ 번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기 Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구로 요즘 인기를 끌고 있습니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠 tech.cloudmt.co.kr 위 글이면 왠만한건 다 해결된다. 3. index.html은 root로 옮기기 localhost:3000을 켰는데 아무것도 되지 않았다. cra에서는 index.html을 public폴더에 만.. 2024. 1. 7.
객체를 state로 이용할 때는 readonly로 직접 변경 못하게 막기 리렌더링 방지를 하는게 아니라면 아래와 같은 코드는 쓰지 않는게 좋다.(리렌더링 방지를 원한다면 useRef가 적합하다) const [application, setApplication] = useState({ name: "june", product: "SEB", }); // application을 직접 변경하는 것은 리렌더링을 일으키지 않음 application.name = "seung"; 코딩단계에서 막을 수 있게 타입스크립트로 타입가드를 하자. readonly를 이용해서 직접 변경을 막은 코드이다. interface ApplicationType { readonly name: string; readonly product: string; } const [application, setApplication].. 2024. 1. 7.
반응형