doeunn.log

🚀 낙관적 업데이트 ? 리액트 쿼리는 get 요청은 useQuery를 통해 했었고, 이외 post, update, delete 요청은 useMutation으로 처리했었습니다. 그런데 이전에 구현했던 react-query 글에서 post 요청을 하고 get 요청 했었던 쿼리를 inValid 시키고 했었습니다. 즉, 다시말해서, post 요청을 보내고 다시 get 요청을 보내고 받아서 화면에 보여줘야 한다는 점이었습니다. 사용자 입장에서 생각해보면, 내가 post 요청 보내는 버튼을 눌렀는데 안에서는 post 요청 보내고 ~ get 요청 했었던 거 inValid 하게 해서 다시 요청 보내게끔 하고 ~ 다시 받아오고 ~ 화면에 뿌리고 ~ 하는 작업이 이뤄져야 하고 이걸 사용자가 다 기다려야 한다는 점입니다. ..

🚀 React-Query로 검색 기능 구현 처음에 구현을 했을 때는 처음 검색은 되는데, 이후에 다른 검색어로는 검색 결과가 제대로 받아지지 않았었습니다. 그 해결방법으로 쿼리 키를 하나 더 사용하는 방법을 이용했습니다. 📜 Hooks/Queries/get-search.js 파일 const getSearch = async params => { const res = await MovieApi.getSearch(params) return res.data } const useGetSearch = params => { const { data, error, status, isLoading } = useQuery( [QUERY_KEY.GET_SEARCH, params.title], () => getSearch(pa..

🚀 영화 목록 조회 프로젝트를 회고 하기 전에 본 프로젝트는 코리아 it 학원에서 프론트엔드 수업을 하며 과제로 나왔던 주제입니다. 저 포함 4명의 팀원들과 함께 진행했으며, 이번 회고 시리즈에서는 제가 한 부분과 다른 분께서 했지만 다시 정리해 보면 좋을 내용들을 포함해 보려고 합니다 :) 프로젝트 설명 영화 트레일러 오픈 API를 활용한 영화 목록 조회 웹 사이트입니다. 기능 구현 사항 react-query를 사용하여 데이터를 캐싱 로딩 중에는 skeleton UI를 나타낼 것 목록을 불러올 때는 react-query의 useInfinitieQuery를 사용하여 무한 스크롤링으로 불러올 것 페이지 리스트 페이지 각 영화의 평점 및 짧은 미리보기(소개)가 나타나야 함 미리보기는 길이가 길다면 특정 글자..

🚀 Suspense ? Suspense는 컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 렌더링할 수 있습니다. 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알려주는 방법이 되겠습니다. 쉽게 말해서, 우리가 서버에서 데이터를 받아올 때 클라이언트의 상태는 요청 → 대기 → 응답 순이 될 겁니다. 이 대기할 때 Suspense의 fallback이라는 속성에 따로 지정해둔 컴포넌트를 화면에 보여주고 응답이 왔을 때는 원래대로 보여주고 싶었던 데이터를 보여주는 방법이라고 볼 수 있습니다. 기본 문법 컴포넌트를 위와 같이 Suspense로 감싸주면 컴포넌트의 렌더링을 특정 작업 이후(위에서는 데이터를 받아오기 전까지) 미루고, 그 작업이 끝날 때까..

🚀 에러 핸들링 ? 리액트에 오류가 발생했을 때 유저 혹은 개발자에게 어떤 방식으로 표출할지에 대한 내용입니다. 여기서 오류는 api 요청에 대한 오류 메시지일 수도 있고, 리액트에서 캐치한 오류일 수도 있습니다. 또한 에러가 발생할법한 상황들을 생각해보고 유저에게 에러 발생을 알리는 것 뿐만 아니라, 가능하다면 어떻게 대응할지도 전달해주는 것이 사용성 측면에서도 좋다고 볼 수 있습니다. 어떤 식으로 에러를 알리는가 ? 유저에게는 toast UI를 통해 에러 상황을 알려주거나 상황에 따라서는 다시시도 버튼 혹은 로그인 모달을 제공할 수도 있겠습니다. 또한 개발자에게 개발 환경에서는 에러 발생 시 console.error()로 알려주고, 배포 환경에서 에러 발생시 Sentry로 알려주어 대응합니다. 위와 ..

🚀 React-Query ? React-Query는 서버로부터 받은 데이터의 전역 상태 관리를 위한 라이브러리입니다. 서버의 데이터 요청을 캐싱하여 지속적으로 동기화하고 업데이트 하는 작업을 도와줍니다. 사용하는 이유 postList를 get하는 요청을 해서 목록 페이지에 보여준다고 해봅시다. 그러면 우리는 useEffect(() => {}, []) 안에 get 요청을 하는 코드를 작성해서 화면에 렌더링이 되면 get 요청을 보내서 응답을 받고 그걸 다시 useState로 해둔 state로 저장하게 될 것입니다. 그런데 postList가 바뀌지 않았는데 화면이 마운트될 때 마다 요청을 보내고 받고 요청을 보내고 받고 하는 것은 불필요한 요청같아 보입니다. React-Query에서는 이 서버로부터 받은 데..