[React/TypeScript] 최종프로젝트 - Mango(환경오염 줄이기 / 지구 살리기 프로젝트!) (진행 중) - 효율적으로 데이터를 가져오기

 

다양한 query-key를 사용하고 있는데, 최적화를 위해 코드를 다시 살펴보았다.

 

mypage에서 사용하는 것은

MyProfile.tsx에서 내 게시물 수, 유저랭킹 /  HabitCalendar.tsx에서 날짜별로 게시물 수 / MyPosts.tsx에서 내 게시물 보여주기 / LikePosts.tsx에서 내가 누른 좋아요 게시물 보여주기가 있다.

 

하지만 Firebase에서 사용하는 컬렉션은 posts와 users 단 두 개 뿐이다.

데이터를 불러올 때, 여기저기 많이 사용해서 무분별하게 데이터를 많이 불러온다고 생각해서

전체 데이터를 우선적으로 가져온 뒤, 하나의 쿼리키를 사용하고

로컬 로직에서 가공하여 사용하면 어떨까를 생각했다.

 

하지만 분명 장단점이 있기에 정리를 해보면서 어떻게 사용해야 할지 생각해보았다

 

 

여러 쿼리키를 사용하여 필요한 값의 데이터를 가져오는 방식:
장점: 필요한 값에 대한 쿼리키를 따로 만들어 사용하므로 필요한 데이터만 가져올 수 있다. 데이터 전송량이 작아지고, 필요한 데이터에 집중하여 처리할 수 있다.
단점: 여러 쿼리를 실행해야 하므로 네트워크 비용이 증가할 수 있고, 여러 쿼리의 응답을 기다려야 하므로 전체적인 처리 시간이 늘어날 수 있다.

 

한 번에 전체 데이터를 가져와서 로컬에서 가공하는 방식:
장점: 한 번의 쿼리로 전체 데이터를 가져오므로 네트워크 비용이 절약되고, 로컬에서 필요한 로직을 적용하여 데이터를 가공할 수 있다. 필요한 데이터를 한 번에 가지고 있으므로 데이터 접근이 빠르고 효율적일 수 있다.
단점: 필요하지 않은 데이터까지 가져오므로 데이터 전송량이 크고, 로컬에서 데이터를 가공하는 로직을 작성해야 하므로 추가적인 개발 비용이 발생할 수 있다.

 

 

결론 :

어떤 방식이 좋을지는 데이터의 양과 쓰임새, 네트워크 상황, 애플리케이션의 요구사항 등을 고려해야 한다고 생각한다.

만약 데이터 양이 많고 필요한 데이터가 제한되어 있다면, 여러 쿼리키를 사용하여 필요한 데이터만 가져오는 방식이 효율적일 것이다. 반면에 데이터 양이 적고 로컬에서 데이터를 자세히 가공해야 한다면, 한 번에 전체 데이터를 가져와서 로컬에서 가공하는 방식이 효율적일 것이다.

 

나는 성능 속도를 생각해서 전체 데이터를 가져온 뒤, 가공하기로 했다.

 

 

 

 

 

---