콘요맘떼 개발일지

React의 className 리액트는 JSX문법에 따라 class가 아닌 className을 통해 element의 클래스를 지정해준다. 그런데 클래스명을 지정해주다 보면 불필요하게 코드가 길어지거나 일관성이 떨어지는 등의 문제가 발생하기도 한다. 첫 번째 예시를 보자. 여러 클래스명이 존재할 때 클래스명은 서로 공백을 통해 구분된다. 만약 경우에 따라 클래스명이 추가될 수도 추가되지 않을 수도 있을 때 이것은 매우 귀찮은 문제를 만든다. 클래스명이 추가될지 여부도 모르는 채 공백을 추가해줘야 하며 어떠한 방식으로 표현해도 관련 코드가 보기 안 좋아진다. (공백 처리 관련하여 join을 활용한 classNameGenerator 함수를 만들어줘도 되지만 그 역시 효율적이라고 볼 수는 없다.) 두 번째 예시..

리액트 코드에서 컴포넌트가 mount되기도 전에 컴포넌트 갱신을 시도할 때 발생하는 에러 메시지이다. 그런데 아무리 찾아봐도 내 코드에서는 그런 실수를 한 적이 없다. 답은 정말 의외의 곳에서 나온다. 리액트는 video element의 muted 속성을 제대로 처리하지 못 한다. (웹 프로젝트 주제로 많이 추천되는 유튜브 클론 프로젝트를 해본 사람이라면 이미 크롬 정책으로 인해 video element의 자동 재생을 위해서는 muted 속성을 통해서 동영상을 무음 처리해야 한다는 사실을 알고 있을 것이다. 그런데 muted 속성을 넣어주는 순간 리액트는 위와 같은 이슈를 일으킨다. 간단하게 정리하면 이유는 이렇게 추측된다. 기본적으로 JSX element에서 우리가 value와 같은 attribute를..

모킹 (Mocking) 모킹은 유닛 테스트 코드를 작성할 때 테스트하는 코드가 의존하는 일부분을 가짜로 대체하는 기법을 의미한다. 모킹의 대상은 테스트 목적과 거리가 있거나 테스트 코드 구현 혹은 실제 테스트 과정에서 지나치게 리소스를 차지하는 코드이다. 혹은 DB에 접근하는 것과 같이 side effect를 유발시키거나 결과의 일관성을 방해하는 코드들도 모킹을 적용하는 것이 좋다. 모킹 기법을 활용하면 특정 일부분만을 테스트하는 유닛 테스트의 목적에 부합하면서 빠르고 가벼우면서도 매번 동일한 결과를 반환하는 테스트를 수행할 수 있다. 자바스크립트의 테스팅 라이브러리인 Jest는 여러 가지 모킹 기능을 지원한다. 오늘은 그 중에서도 jest.fn( ) 메소드를 다뤄볼 것이다. jest.fn( ) jest..