5 주차 과제

[gringrape]

주제

redux thunk 를 이용하여 레스토랑 조회 구현하기

과제 요구사항

• [x] 레스토랑 지역 목록을 볼 수 있다.
• [x] 레스토랑 분류 목록을 볼 수 있다.
• [x] 버튼을 클릭하면 버튼에 체크 표시가 된다.
• [ ] 지역과 분류를 선택하면 그에 속하는 레스토랑들의 목록을 볼 수 있다.

과제 제한사항

• TDD 를 이용하여 구현한다.
• redux thunk 를 이용하여 구현한다.

[gringrape]

과제 지식 습득하기

지식 주제

redux thunk 에 대한 이해

• thunk 란?
• 왜 redux thunk 를 사용하는가?
• laziness 란?

[gringrape]

작업1. 레스토랑 지역 목록 보기

접근 방법

• 강의에서 어떻게 만들어내는지 확인한다.
• TDD로 혼자 적용해본다.
• 되돌린 후에 업로드 한다.

  작업 회고

• 테스트가 부실하다 -> 외우는 것 만으로는 충분하지 않다.
• 커밋메세지가 형편없다 -> 혜원님 메세지를 참고해서 한눈에 볼 수 있도록 수정하자.

[gringrape]

작업 2 . 레스토랑 지역 목록 보기 비동기

풀이계획

• [x] 로딩함수를 만든다.
• [ ] 피드백을 반영한다.
• [x] 서비스 api 테스트를 만든다.
• [ ] app 에서 불러올 수 있도록 한다.
• [ ] 리덕스 thunk 를 사용해서 리팩토링 한다.
• [ ] 로딩 처리 테스트를 만든다.
• [ ] 로딩 처리를 해준다 -> 간단하게
• [ ] 없을때의 테스트를 만든다.
• [ ] 없을때의 테스트를 만든다.

실제 수행

• loadRegions 라는 함수를 만든다.
• 서버에서 데이터를 가져오는 로직을 함수에 넣는다.
• loadRegions 라는 함수대신, loadRegions 라는 액션을 만든다.
• redux-thunk 를 이용해, 해당 액션이 dispatch 될때, 비동기로직이 실행되도록 한다.

후기

풀이 설계를 상세하게 하는 것부터 잘못됐다.

요구사항을 정했으면 그 상태로 한단계씩 바꿔가는 것이 TDD 에 걸맞는다. 특히, Red 단계는 단순히 테스트를 만드는 단계가 아니라, 원하는 구현의 모습을 설정하는 단계다.

async function 을 react-testing library 에서 테스트할때

아래와 같이 진행했는데, 더 좋은 방법은 없을지 고민된다.

const {  container } = await render(<App />);

expect(asyncFunction()).toBeCalled();

[gringrape]

작업 3. regions 가 로딩되고 있을때, 처리하는 로직을 추가한다. (연습)

작업계획

• [x] 토글 로딩 테스트 추가
• [x] 토글 로딩 액션 추가
• [x] reducer 에 글로벌한 로딩 스테이트 추가
• [x] App 에서 로딩 중일때, 로딩메세지를 표시하도록 하기

참고

여러개의 reducer 가 있을때의 처리

https://redux.js.org/api/combinereducers

작업 회고

• toggleLoading 보다는 setLoading 이 더 좋을것 같다. 호출했을때, 정확히 어떤 일을 하는지 명시하는 것이 더욱좋다.
• 작업단위가 끝날때는 꼭 리팩토링을 해준다.

[gringrape]

작업 3. regions 가 로딩되고 있을때, 로딩메세지를 표시한다.

작업계획

• [x] 로딩 메세지 테스트
• [x] 로딩 메세지 구현
• [x] 로딩 상태 추가
• [x] 리듀서 추가
• [x] 액션 추가
• [x] 액션 테스트 추가
• [x] 코드 리팩토링

추가공부

• 리덕스 목 스토어에 대해서 알아보기

[gringrape]

작업 4. 아이템을 클릭했을때, 클릭한 아이템이 표시되도록 하기

• [x] UI 부분 구현
  • [x] 상태에 따라 체크 표시
  • [x] 클릭 핸들러
• [x] reducer 구현
• [x] reducer 중첩
• [x] action 구현

리듀서 중첩

참고자료

상태를 결정하는 팁 리듀서의 중첩

상태 결정 1

• restaurants
• categories
• regions
• loadingState
  • restaurantsLoading
  • categoriesLoading
  • regionsLoading
• restaurantSearchQuery
  • regionName
  • categoryId

[gringrape]

작업 5. 로딩중을 개선하기

작업계획

• [x] 콜렉션마다 로딩을 갖고 있도록 해준다.
• [x] 리듀서를 구현한다.
• [x] 액션을 구현한다.
• [x] 프라미스를 개선한다.
• [x] 앱이 작동하도록 한다.

리팩터링

• [ ] 액션 분리
• [x] App test 개선

[gringrape]

작업 6. 상태변경

주안점

• 도메인 별로 상태를 분리한다.

  상태설계

• restaurant
  • restaurants
  • loading
• category
  • categories
  • selectedId
  • loading
• region
  • regions
  • selectedId
  • loading

    작업계획

• [x] reducer 를 변경한다.
• [x] UI 를 변경한다.
• [x] action 을 나눈다.

[gringrape]

작업 7. 리팩토링

주안점

• 심플하고 읽기 쉽도록 코드를 다듬는다.

작업계획

• [ ] categories 에서 상태를 모르도록 수정
• [ ] regions 리팩토링
• [ ] categories 리팩토링