< 코드숨 > 리액트 5주차 회고

한것

• redux-thunk사용하여 비동기 액션 실행하기
• redux-mock-store를 사요하여redux-thunk 테스트하기
• api 호출 함수 테스트 코드 작성하기
• reducer를 if나 switch를 사용하지 않고 lookup table pattern을 이용해 구현하기
• given2 라이브러리 사용하여 테스트코드에서 반복되는 부분 리팩토링하기

느낀것

• api를 어떻게 요청해야하는지를 확실하게 알고 사용해야겠다. 무작정 가져다 쓰다보니 잘못된 방법으로 요청해서 코드를 싹 바꿨다..
• 그동안 비동기 요청에 대한 테스트를 대체 어디까지 진행해야하나 막막했는데 이번 시간을 통해 api 요청은 프론트에 관심사가 아니므로 mocking 해주면 된다는 것을 알게되어 너무 행복했다. 데드라인의 중요성..
• 앞으로 given2를 자주 사용해야겠다. 중복되는 코드를 없애주니 너무 좋다.
• 질문을 잘 정리해서 해야겠다. 아홉시에 과제를 제출해야된다는 생각에 너무 급하게 질문을 써내려가다보니.. 너무 바보같은 질문이 많았던것 같다. 리뷰어님 죄송합니다.. 앞으로 여유를 가지고 정리를 잘해서 질문해야겠다.
• 처음 TDD를 접했을때는 손도 대지 못하는 상황이라 울고싶었는데.. 지금은 그래도 손은 대는거같아.. 조금 뿌듯하다.. 아직 갈길이 멀지만 ㅎㅎㅎ 지금보다 더더 TDD에 익숙해지는 내가 되었으면 좋겠다.

배운것

• App 컴포넌트 테스트는 어느정도는 유닛 테스트로 커버하고, 나머지는 E2E로 커버하자
• API를 프론트에서 테스트할 필요는 없다. API 함수는 mocking하고 action이 잘 실행되는지에 관심을 가져야한다
• redux thunk middleware는 Action creator가 액션을 반환하는 대신에 함수를 반환한다. 첫번째 파라미터로는 dispatch를 받고 두번째 파라미터로는 getState를 받게되는데 getState를 이용해 현재 상태를 가져올 수 있다.
• redux thunk를 사용하려면 스토어를 만들때 두번째 인자로 미들웨어에 등록해야한다.=> createStore(reducer, applyMiddleware(thunk));
• given2를 사용하면 테스트코드 작성시 반복되는 부분을 줄일 수 있다.
• fetch 함수를 mocking하는 방법(global.fetch 조작, fetch-mock 사용)
• redux-thunk 테스트하는 방법 => https://github.com/reduxjs/redux-mock-store
• useEffect에서 여러개의 dispatch를 실행시켜야할 경우 dispatch의 실행 횟수를 테스트하게되는데 dispatch가 추가될때마다 횟수를 변경해줘야하므로 여러개의 dispatch를 하나의 dispatch로 처리 가능하도록 하나로 묶어주자
• jest의 mockResvoledValue 함수를 이용해 mocking한 비동기 함수의 반환값을 조작해줄 수 있다.
• 상태 중심이 아니라 액션 중심으로 사고하는것이 더 좋다. 액션이 전달되는 것이 중요하다. Flux 아키텍처를 중심으로 UI와 상태관리 로직을 완전히 분리하자, Redux를 앱 본체라 생각하고 React를 Redux에 딸린 덤이라고 생각하면 훨씬 좋은 프로그램이 될것이다.

반성

• 연휴와 생일파티로 마음이 들떠 회고도 늦고 풀이영상도 조금 늦게봤습니다.. 반성합니다.. 늘 한결같은 마음가짐을 가지도록 하겠습니다 ㅎㅎ
• 이번주 질문이 너무 적었던것 같습니다. 좀더 적극적으로 질문하도록 하겠습니다!