이번주 부터 심화강의로 들어갔다.
오늘은 redux toolkit, json과 axios 그리고 thunk를 들었고 내일은 optimizing과 custom hook 그리고 배포(aws-s3)에 대해서 들을 예정이다!!
심화강의를 다 들은게 아니기 때문에 전체적인 강의평은 좀 다를 수도 있겠지만 오늘 들은 강의 소감은 redux보다 오히려 개념자체는 쉽다는 생각이 들었다.
물론 안보고 한번 해보라고 하면 못할 것같긴한데 엄청 어려운 부분이 없었다.
오히려 개정이 되지 않은 수업강의와 자료로 인해 시간을 끌었던거지 강의를 이해하지 못해서 시간을 끌진 않았기 때문이다.
여하튼... 이번주 목요일부터 팀프로젝트로 들어가기 때문에 심화강의는 최대한 빨리 끝낼 생각이구 오늘은 해당 주의 강의에 대해서 키워드별로 정리해보고자 한다:)!!
특히 thunk 기준으로
리덕스 툴킷
리덕스 툴킷은 리덕스의 코드 양을 줄이기 위해서 나온 api다.
컴포넌트에서 useSelctor를 사용한건 같고 달라진 부분은 "모듈"이다.
하면서 달라진 부분은 action, reducer부분을 따로 작성하는게 아니라 하나로 합쳐졌다는 부분이다.
미들웨어
리덕스에서 dispatch를 하면 action이 리듀서로 전달되고 리듀서는 새로운 state를 반환하는데 미들웨어를 사용하면 그 사이에 새로운 작업을 넣을 수 있다.
미들웨어를 사용하는 이유는 서버와의 통신을 위해 사용하는 경우가 많고 개발자들이 애플리케이션을 보다 효율적으로 지원하며 데이터나 사용자 사이를 연결시켜준다.
thunk
미들웨어 중 하나며 dispatch 할 때 객체가 아닌 함수로 dispatch 할 수 있게 해준다.
그렇기에 thunk 함수 라고 표현한다.
thunk함수를 생성할 땐 creatAsyncThunk()를 사용하며 첫 번째 자리에는 action value, 두 번째에는 함수가 들어간다.
그리고 thunk 함수는 reducer가 아닌 외부에서 작성된 것이기 때문에 extraReducer라는 메서드를 사용해야 하며 promise를 다룰 수 있게 된다.
이로 인해 axios.get은 promise를 반환, fullfilled 혹은 rejected 된 것을 처리하기 위해 async/await를 사용할 수 있다.
try/catch 문을 사용하여 해당 요청을 성공 혹은 실패하는 부분을 나누어줄 수도 있다.
- 이 함수를 사용하면서 서버에서 가져오는 상태는 로딩(pending), 성공(fullfilled), 실패(rejected) 3가지로 정리할 수 있다.
fulfillWithValue, rejectWithValue
toolkit에서 제공하는 api로 fulfillWithValue은 promise에서 resolve 즉 네트워크 요청이 성공한 경우에 dispatch해주는 기능을 가진 api. 인자로는 payload를 넣어 줄 수 있다.
그리고 rejectWithValue은 promise에서 rejected 즉 네트워크 요펑이 실패한 경우에 dispatch해주는 기능을 가진 api. 인자에 어떤 값을 넣어주는 것이 가능하다.
이런 api를 이용하여 예제에서는 catch에서 잡아주는 에러 객체를 넣었다!
공부용으로 vscode로 그냥 입력하는 것들이 손에 익었었는데, 이것저것 문제가 생길 때 다시 롤백하기 쉽게 깃허브를 꾸준히 써보는 것을 추천받았다!!
생각해보니 깃허브를 팀프로젝트할 때나 코테풀고나서 업로드하는 정도로만 사용했지 정작 내 공부할 땐 쓴 적이 없는 것같다...ㅠㅜㅜㅜ
어렵긴 하지만 앞으로를 위해서 습관적으로ㅜㅜ 업로드 하는게 필요할 것같다..!!
조언 고마워요:)
++
정리병이 도져서...
이번 팀프로젝트에는 정리하면서 슬랙에다가 찾아놓은 자료 공유해봄...ㅎㅎ
수용해주고 반응해주는 팀원들 고마워용^ㅡ^b!!!
