배운점

• 관심사 분리 기능 하나를 구현할 때에 파일을 관리하는 Container와 파일 받아 출력하는 컴포넌트로 나눈다.
  처음엔 어색했는데 자주 하니 익숙해졌다.
  내가 작성한 코드를 이름을 통해 빠르게 찾을 수 있으니 필수로 느껴진다.
• fetch로 api주소에서 값 가져오기를 배웠다.
  • url을 따로 변수로 빼두고 fetch에 넣어서 가독성을 향상시키나.
  • fetch로 가져온 데이터는 json으로 변환해야 사용할 수 있다.
  • fetch와 json으로 변환은 비동기적으로 이뤄지게한다
• TypeError: dispatch is not a function에러가 떴다. 그래서 당연히테스트 코드에 dispatch를 구현했다.
  그런데도 불구하고 계속 에러가 떴다.
  알고보니 다른 테스트 코드 파일이었다. 나는 App 테스트 코드에서 dispatch를 추가한 것이었고 하위 컴포넌트의 테스트 코드에서 저 에러가 뜬 것이었다.
  이런 시간낭비를 줄이기위해서 테스트 코드를 차근차근 작성해나가야 겠다. 동시에 여러다발로 테스트 코드를 작성하면 위와같은 실수는 다시 하게될 것이다.
  에러를 일부만 보지 말고 전체적으로 읽어보자
• thunk의 사용방법은 알겠지만 이게 무슨 원리로 그렇게 되는지는 이해가 잘 안됐다. 검색해서 redux-thunk 코드를 찾을 수 있었다.
  https://redux-advanced.vlpt.us/2/01.html

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

redux-thunk는 dispatch가 액션을 함수를 받았을 때에 그 함수에 dispatch와 getState를 넣어주면서 작동이된다.

느낀점

• 쓸데없는 것에 시간낭비를 많이 했다. 수험생활동안에 모의고사풀때마다 안풀리는 문제를 붙잡아서 시간이 부족한 적이 한두번이 아니었다. 어떤 문제가 거의다 풀릴것같은데 안풀려서 그 분노가 계속 붙잡게 만들었다. 지금도 그 습관을 버리지 못하고 있다. 지금은 시간이 촉박하지는 않아 계속 붙잡다가 결국 풀리기는 하는데 시간 손실이 어마무시하다. 이제는 어느정도 시간을 썼으면 넘어가야겠다.
  나중것을 하다보면 이전것이 저절로 해결되는 경우도 있으니 말이다.