문제의 발단은 이러하다. 개발한 컴포넌트에서 필요 이상의 API 요청이 발생하는 것이 문제이다. 파악한 문제는 2가지 이며 천천히 문제의 원인과 해결 방법에 대한 설명을 작성하겠다. 1. API 요청 방식 이 문제가 가장 근본적인 원인이였다. 기존 코드는 특정 컴포넌트를 클릭하면 그 컴포넌트에 맞는 데이터를 요청하는 방식으로 설계했다. 그로인해 같은 데이터라도 다시 다른 컴포넌트를 클릭했다가 과거의 컴포넌트를 눌러도 같은 API 요청이 발생하게 된다. 이러한 방식은 다른 프로젝트나 컴포넌트 개발시 큰 데이터 혹은 서버의 상태에 따라 원활한 서비스 제공이 어려울 것이라 판단했다. 이 문제는 각각 API 요청을 하던 로직을 초기 렌더링시 다수의 데이터를 병렬로 요청해 처리하도록 했다. 기존 코드 // 해당 ..
react-query
새로운 프로젝트를 진행하며 한 컴포넌트에서 많은 이미지를 사용해야하는 기능 구현을 하게되었다. 각 1번, 2번, 3번, 4번 선택지마다 적게는 5개의 이미지 파일, 많게는 7개의 이미지 파일을 사용자에게 보여주어야 한다. 이미지는 이미지 서버에서 GET 요청으로 가져오는 방식으로 구현하려 한다. 이번 프로젝트에서는 MSW를 이용해 테스트 환경을 구축해서 개발한다. http.get("/champions/duelist", async () => { return HttpResponse.json( { "champions": [ { "id": 1, "imageUrl": "https://대충 이미지 서버 주소/valorant/duelist/ZETT.webp" }, { "id": 2, "imageUrl": "https..
1. React-Query 란? React-Query란 서버의 데이터를 가져오거나, 캐싱, 값 동기화 및 업데이트, 에러 처리 등 비동기 과정을 쉽게 할 수 있도록 도와주는 라이브러리이다. 1.1 사용 이유 기존 상태 관리 라이브러리(redux 등)는 클라이언트 상태 관리에는 용이하지만, 서버 상태를 관리하기는 어렵다. 클라이언트에서 사용하는 상태가 변할 수 있는 서버의 상태와 다를 수 있기 때문이다. 즉, API 요청과 비동기 데이터 관리를 좀더 쉽게 하기위해 등장한 것이다. React-Query는 서버의 상태를 불러오고, 불러온 상태를 캐싱하며, 지속적으로 동기화하고 업데이트 하는 작업을 도와준다. 또한 기존 상태 관리 라이브러리를 이용하면 서버의 데이터와 클라이언트 데이터를 store에 공존하게 될..
어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에 유저가 속한 프로젝트들의 정보를 가져와야 했다. DB에서 프로젝트들의 정보를 가져오기 까지 완료했다. 그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다. 가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자. 내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다. 데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다. 이 의견을 보니.... 흠.... 아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고, 다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다. 그래..
