프론트에서 리스트 검색 기능 구현시 로직처리 위치 프론트백

Question

안녕하세요!MUI DataGrid를 이용해서 프론트 엔드 작업을 하고있습니다.사용중인 MUI DataGrid는 무료버전으로 Filter 기능은 무료버전에서 하나의 컬럼에 대해서만 지원을 하고 있어서, 별도로 구현을 하려고합니다.페이지 로딩시 React Query 라이브러리를 이용하여 Rows Data를 Get요청을 해서 받아서 DataGrid에 띄워주는데,검색 조건이 10개 정도 됩니다. 제 생각에는 이미 모든 데이터를 가져왔으니, 백엔드에서 검색조건에 맞는 데이터를 또 요청하는 것 자체가 비효율적으로 생각이 되어 로직도 간단하니 프론트에서 처리를 하려고 합니다.모든 측면을 고려했을때 어떤식으로 처리하는게 효율적인지 잘 몰라서 여쭤봅니다.어떠한 방식으로 처리를 하는게 효율적이며, 각각의 장단점이 무엇인지 궁금합니다

Clickin · Answer

네트워크 비용 생각해보면 애초에 검색할 때 벡엔드에 필터 조건 다 넘겨주고 해당하는 결과만 가져오는게 낫지 않나요혹시 사용자 편의기능 부류로 엑셀 필터같은 개념이면 이야기가 전혀 다르지만요

하얀뼈 · Answer

정말로 수많은 케바케가 있어서;;케이스1: 예를 들어 데이터가 작은 객체의 50개 배열이면, 그냥 다가져와서 프론트에서만 처리하면 될 것이고,케이스2: 데이터가 복잡하고 긴 객체의 10억개의 배열이면, 페이징 단위로 계속 백엔드에 요청 해야겠죠.케이스3: 근데 케이스1인데 실시간 동기화가 중요한 데이터면, 페이징 단위로 백엔드에 계속 데이터 요청하는게 낫겠죠.그냥 효율만 따지자면, 데이터가 많지 않다는 가정하에 요청은 초기 한 번만 해두는게 나을겁니다.

프론트에서 리스트 검색 기능 구현시 로직처리 위치 프론트백

2개의 답변

Q&A 목록