IT/Vue

Javascript object list 비교.

bepuri 2022. 5. 9. 12:32
728x90
const i = that.initial_listing_items.find((_item) => _item.id == item.id);
const is_same = JSON.stringify(i) == JSON.stringify(item);

 

서비스가 방대해질 수록 고민해야할 것들이 늘어난다.

근래 들어서 고민하던것 중 frontend에 약간의 과부하가 걸리더라도,

불필요한 업데이트를 하지 않도록 하려면 어떻게 해야할까라는 고민이 생겼다.

 

https://stackoverflow.com/questions/65280254/what-would-be-the-most-efficient-way-of-tracking-deleted-objects-on-the-front-en

 

What would be the most efficient way of tracking deleted objects on the front-end and save these changes on server?

I am working on an application where the user(teacher) needs to update students enrolled in the class. On the front-end, the user can remove/add students and as well as update properties of the class(

stackoverflow.com

 

이글을 참고하여 비슷하게 작성했으나, 한가지 궁금증이 생겼다.

모든 데이터를 전송하고 id가 없는 경우에는 새로 생성한다면, id가 있는 경우에 업데이트가 필요하다는건 어떻게 알 수 있을까?

 

1. 업데이트 유무를 서버쪽에서 체크한다면 매번 데이터 전송때마다 DB 쿼리가 추가로 수행되어야 할 것이다.

2. 업데이트 유무를 체크하지 않는다면 id가 있는 데이터는 모두 업데이트 해줘야한다는건데,, 둘다 매우 비효율적으로 들렸다.

 

그래서 frontend 단에서 최종 데이터 전송시 id가 있는 것들은 초기 데이터와 달라진 것들만 보내도록 했다.

그외의 것들은 답변과 댓글의 내용과 거의 동일하게 짰다.

728x90