프론트엔드 TDD에 대한 단상

어제 React로 사고하기 – React 문서를 단위 테스트를 작성하며 실습해보았다. 레이아웃 스팩도 테스트에 기술했지만 아래에서 설명할 이유로 한 두 커밋 이후 지워버렸다. Remove unnecessary Test suit · x86chi/thinking-in-react@b004b87 · GitHub 테스트는 어느 정도까지 작성해야 될까 고정된 <td/>의 문자 확인 props에 따라 스타일이 변화되는지 체크 onChange 이벤트가 제대로 발생하는가 3개 다 아니다. 위 세가지 테스트 수트는 리엑트를 믿지 못한다는 의미라고 생각한다. 그러면 무엇을 테스트해야 되나? Props 와 state 의 조합에 따라 기대하는 뷰가 나오는지 확인...

2020년 3월 3일 · 1 분 · 105 단어 · 김무훈

[TS & React] FormEvent의 타입 확장하기

FormEvent는 입력 요소의 상태를 직접 관리하지 않으면서 입력 요소의 값을 얻는 편리한 방법이지만, 처음 TS를 React와 함께 사용할 때 폼 이벤트의 타입을 어떻게 확장할 것인가 고민했다. 타이핑이 안되어 있는 경우 제너릭으로 flag라는 상태의 타입을 명시하는 것처럼, 폼 요소로 감싸진 입력 요소의 타입을 정의하는 법을 알고 싶었다. 타이핑 된 경우 굳이 HTMLFormElement를 두 번 써야 되나..? 라고 의문이 들지만 FormTarget.target이 덮어 씌워지는 상황이다. “그러면 FormEvent<HTMLFormElement>는 필요 없지 않는가요?” 무척이나 엄격한 TS의 타입 규칙 때문에 FormEvent는 HTMLFormElement를 제너릭 타입으로 갖고 있어야 하고, 그 하위의 개체인 target은 HTMLFormElement를 상속받으면서 그 아래 입력 요소 타입을 가져야 되어야 하는 상황입니다....

2019년 11월 11일 · 1 분 · 119 단어 · 김무훈