케어닥에서 문서를 잘 만들어주셔서 업무 분담을 하고 디자인을 만드는 데에는 큰 어려움이 없었습니다.
주소 검색 API를 호출하여 데이터를 정제하는 과정에서도 생각지 못한 구조로 되어 있어서 팀원 분이 그것을 발견하고 수정하는 데에 약간의 시행착오가 있었지만 그래도 잘 해결하였습니다.
달력
이번 과제에서의 가장 큰 이슈는 달력의 CSS 커스터마이징이었습니다.
처음에는 Material UI를 사용하여 커스터마이징을 시도하였습니다.
https://mui.com/components/date-range-picker/#main-content
Material UI는 다양한 UI 라이브러리를 간편하게 사용할 수 있습니다.
하지만, 하나의 라이브러리를 깊게 커스터마이징하는 데에는 무리가 있었습니다.
그래서 react-datepicker로 라이브러리를 변경하여 커스터마이징하였습니다.
https://github.com/Hacker0x01/react-datepicker
SWR
이번에 주소검색에서 API를 호출하면서 팀원 분이 SWR을 사용하였습니다.
const [value, setValue] = useState("");
const [currentPage, setCurrentPage] = useState(1);
const { data, isValidating } = useSWR(
[value, currentPage],
() => get(value, currentPage),
{
revalidateIfStale: false,
revalidateOnFocus: false,
revalidateOnReconnect: false,
dedupingInterval: 10 * 1000, // 10 sec
}
);이런 식으로 검색어와 페이지에 따라 쿼리 키가 변경되도록 하여 data가 바꿔도록 하여 변경된 data가 화면에 띄워지도록 하였습니다. 10초 이내에 이전에 호출했던 쿼리 키로 호출할 시 다시 API 호출을 하지 않고 캐시에 있는 데이터를 바로 사용하도록 하였습니다.
위를 참고하여 요구된 입력사항이 모두 만족되었을 시, POST 요청을 보내는 것을 구현해보았습니다.
const { data, mutate } = useSWR("submit", () => post(state));
useEffect(() => {
(async () => {
const res = await mutate(state);
// 받은 res의 데이터 중 _id로 POST 요청했던 정보 조회 가능
})();
}, [state.phoneNumber]);state 안에는 여태까지의 플로우를 통해 입력받았던 정보들이 모두 들어가 있습니다.
입력값 검증은 각 페이지마다 하고, 맨 마지막에 입력받은 전화번호가 정상적으로 들어와서 상태 변경이 감지되면 mutate를 통해 state를 인자로 넘겨주면서 POST 요청을 하도록 하였습니다.
느낀 점
가장 먼저, Material UI는 다양한 UI를 빠르게 가져와서 쓰는 데에 초점이 맞춰져 있다는 것을 알 수 있었습니다.
라이브러리를 정하고 최대한 해결해보려고 하고 그것이 안되면 빠르게 다른 방법으로 시도해보는 것도 항상 염두에 두어야겠다는 생각을 하였습니다.
저번에는 리액트 쿼리를 사용해보고 이번에는 SWR을 사용해보았는데 둘 다 간편하게 data를 fetching하고 caching 설정할 수 있었습니다.
리액트 쿼리에는 useMutation이라는 훅이 별도로 있는데 SWR에서는 useSWR 훅 안에서 반환값으로 mutate를 주는 것이 차이가 있었습니다.
다른 차이점도 알아봐서 블로깅하고 싶다는 생각도 하였습니다.
