react 어플리케이션을 테스팅하기 위해 jest와 react testing library를 사용한다. 두 라이브러리는 각각 테스트에서 어떤 부분을 맡고 있을까? React Testing Library React testing library는 테스트를 위한 가상 DOM을 제공한다. 브라우저에서의 실제 DOM이 아닌 node 환경에서의 가상 DOM을 사용한다. 이 가상 DOM의 node들과 상호작용할 수 있는 함수들을 제공하고 사용자가 화면에서 요소를 찾는 것과 유사하게 node들을 선택할 수 있는 기능을 제공한다. 따라서 마치 실제 사용자가 어플리케이션을 조작하는 것처럼 테스트를 할 수 있다. 기본적으로 다음과 같이 사용한다. import {render, screen} from '@testing-..

리엑트 앱에서 한글을 입력 후 keydown 이벤트로 엔터를 입력받았는데, 한글이 중복입력되는 문제가 생겼다. 왜 이런 문제가 생겼는지 알아보자. 내가 진행하고 있는 프로젝트에서 텍스트를 입력 후 엔터를 통해 입력한 텍스트를 리스트 아이템에 추가 할 일이 생겼다. 나는 추가적인 버튼을 넣지 않는 깔끔한 UI를 원했다. Keydown 이벤트를 사용하지 않고 form 태그로 감싸고 onSubmit 핸들러를 달아주는 방법도 고려했지만 이 컴포넌트에서 즉시 서버로 요청을 보내는 것이 아니기 때문에 고려 사항에서 제외했다. 그래서 엔터인 키보드 이벤트가 발생하면 리스트에 아이템을 추가하는 핸들러를 작성하였다. const handleSkillEnter = (e: KeyboardEvent) => { if (e.key..