->웹페이지와 브라우저 사이에서 일하는 일꾼을 가상으로 만들어 실제 서비스 워커 대신 api,캐싱, 푸시 ,동기화등을 담당하여 실행할 수 있다.
가상으로 웹페이지와 같은 역할을 할 수 있는 일꾼을 만들어내는 것을 이야기
-> 테스트 코드?
a를 개발하기위해 모듈을 수정-> a,b,c,d,e,f 의존관계 가능성
a를 수정하면 b,c,d,e,f-> 하나는 에러가 날수도 있음
b,c,d,e,f를 여러분이 직접눌러보면서 에러가 있는지 확인 해야할까?
그렇다고 테스트를 안하면? 사용자 이용간에 버그를 확인할 수 있음
테스트코드는 사람이 하는 것보다 더 정확하고 빠른 컴퓨팅 테스트를 도입함으로서
QA(품질평가) 비용을 줄이고, 인건비에 대한 코스트를 감소시키는 역할
-> 테스트 하면서 실제 백엔드 db에 데이터가 들어가면될까?
보통은 비동기 통신 테스팅은 하지 않습니다.
테스트서버에서는 할 수있지만, 비동기 테스트는 하지않고, msw로 비동기 통신을 가로채서 무효화시킨후 mocking api를 테스트 많이하게 됩니다.
백엔드 api가 없어도 동일한 환경에서 가상 api를 만들어 프론트엔드를 구현할 수있다.
(api 서버가 다운되거나 없어도 mocking api를 활용하여 프론트엔드 개발가능)
(개발초기 단계에서 백엔드 없이도 프로토타입을 빠르게 제작가능)
일꾼이 없는데 가상일꾼을 만들어서 일시키는 것
가짜일꾼을 만든다고 생각하면 됨.
redux tool kit
redux에서 기존에 갖고있던 문제점을 보완하기 위해 만든 해결책
템플릿 코드가 기존 redux에 굉장히 많은 양이 감소했고, 불변성을 위한 immmer나
다른 라이브러리를 설치해야하는 미들웨어(devtools)와 같은 것들을 자체적으로 지원해주는 라이브러리
-> 리덕스를 보다 쉽게 사용할 수 있게하는 라이브러리
그러나 이런 장점에도 불구하고 여전히 템플릿 코드는 많으며 사실상 잘 찾지 않게 되는 코드가 되었음 보통실무에서는 redux-saga와 rtk로 구현된 코드를 볼가능성이 가장 높다.
리덕스 미들웨어
데이터를 효율적으로 운용할 수 있도록 중간에서 데이터 변환 및 중개
비동기 통신에 관련된 미들웨어를 배워볼 것
redux-saga ,redux-thunk
redux thunk란 비동기 통신함수를 다시 한번 함수로 감싸는 형태로 비동기 통신을 지원해주는 미들웨어
동기와 비동기중에는 동기가 먼저 실행됨.
const res = await api통신
dispatch({
type:"GET~~~"
})
dispatch({
type:"GET_SUCCESS"
})catch{
dispatch({
type:"GET_ERROR"
})
}
dispatch(fetchData())
실제 백엔드 데이터 로직은 thunk함수안에서 구현하고 ui는 하나의 dispatch만 보내면 api데이터 통신, 그에따른 비동기로 받아온 데이터의 전역 상태 관리가 자동으로 이루어집니다.
그러나 redux thunk를 직접 라이브러리를 설치하여 구현할 수 있음에도 rtk내에서 thunk를 자체지원하고 있으므로 rtk를 사용할 예정
