[moin-review] 2021-11-03

Facts

• router 순서변경
• 공통 form 과 이전 & 다음 버튼간 margin 설정
• 다음 버튼 클릭 시 화면별로 다른 함수 호출되도록 설정
• connet-react-router mock 처리
  • react-redux 랑 충돌나서 mock 처리 함
• 기존 hook 에 있던 type 들의 경로를 수정함
• connet-react-router 의 goBack 함수를 컴포넌트에서 직접호출하지 않고 redux-thunk 로 분리함
• url 이랑 화면의 상태의 변수이름이 안맞아서 url 기준으로 변경함
• 송금 form 입력에 따라서 다음버튼 비활성화 여부를 계산하는 함수 추가
  • 원래는 useReducer 로 action 호출 되었을 때 각 페이지별로 다음버튼 비활성화 여부를 계산해서 상태로 가지고 있다가 컴포넌트에 내려주는 방식이었음
  • 근데 생각해보니 굳이 상태로 가지고 있을 필요 없이 action 호출 되었을 때
    함수로 계산해서 가능여부를 custom hook 리턴값으로 주면 끝나던 것 이었음
• click event 관련 버그 수정

Findings

1. click event 관련 버그 수정

input 이 아닌 Element 에 속성과 같은 데이터를 지정하고 click 이벤트 발생시
해당 데이터를 가져오려고 할 때 이벤트 캡쳐링, 버블링 에 주의해야 한다.

input 같은 경우 change, focus 등 이벤트 발생시 event target 이 input 으로 고정되지만

div , li, span 같은 경우 사용자가 클릭했을 때 event 의 target 이 명확하지 않기 때문에 click event 발생시 event.target.속성을 제대로 가져올 수 없다.

1. 디자인 시스템 UI Mock 처리

내부 디자인 시스템이나, 외부 디자인라이브러리 사용시 @testing-library/react 를 통해 test 하기 힘든점이 많다.

사실 제대로 props 이 전달 되었는지 click 했을 때 함수가 호출되는지 등만 확인하면 되지 스타일부분 까지 확인할 필요는 없다.

때문에 아래처럼 html element 에 prop 만 넘기는 걸로 mock 처리해서 test 하는게 좋다고 생각한다.

jest.mock('@themoin/moin-design-system', () => ({
  ...jest.requireActual('@themoin/moin-design-system'),
  DefaultButton: props => <button {...props} />,
  PrimarySolidButton: props => <button {...props} />,
}))

Feelings

처음에 설계할 때는 맞다고 생각했던 것들이 실제 code 짜면서 계속 틀린점이 나온다. 설계에 대한 검증이 빈약했던 것 같다.

refactoring 할 때도 맞다고 생각해서 refactoring 했지만 나중에 다시보면 또 아닌 상황이 생긴다.

자기 생각에 대해서 교차검증을 하기는 힘들지만 내 생각이 무조건 맞다고 생각하지 않고 주장의 근거에 대해서 생각하는 과정을 거쳐야 겠다.