React 연산이 브라우저에 미치는 영향

Question

안녕하세요. 백엔드 개발자 입니다.프론트에 배열 사이즈 만개 짜리를 전달하고 있습니다.value1, value2 가 있는데 서버에서 value 1 &#43; &#64; / value2 연산을 리스트에 해서 value3 이라는값으로 변경해서 주고 있습니다.리액트에서는 만개의 값을 가지고 화면에 렌더링을 해줘야 하는 상황입니다.웹소켓으로 해당값을 주기적으로 전달해 준다고 했을시 value1, value2 를 전달하여 value3 을 프론트에서 계산하여 렌더링하는게사이트가 많이 버벅될까요?응답 사이즈는 80kb 정도 되고 응답속도는 100ms 이내입니다. 유저 사용에 문제가 생길정도의 로직과 데이터 크기가 어느정도 인지 감이 안잡혀서 질문드립니다.

장독깨기 · Accepted Answer

만건을 단순 사칙연산 하는 것은 브라우저에 부담이 되는 것이 아닙니다.또한, 꽤 복잡한 연산이 있을 경우, 서버에서 하는 것 보단 클라이언트로 분산하는 것이 더 효율적일 수 있습니다.근데, 윗 댓글에 추가로 말씀하신 부분을 보면요,...폴링 vs 웹소켓의 결정은, 실시간으로 반영이 되어야 하는지, 지연이 되도 괜찮은지,이 부분으로 결정하는 것 입니다.그니까, 폴링이든 웹소켓이든 이 와 상관없이 연산된 값을 받을 수도 있고 받아서 연산할 수도 있는거죠.그리고, 웹소켓일 경우 value1 값을 받지 못한다 하고 있는데요,그럼 브라우저에서 어케 value 1 + @ / value2 이 연산을 할 수 있는거죠? 댓글에 절차가 생략 된 건지 어떤지, 이 부분이 좀 이상합니다.

basscraft · Answer

요즘 클라이언트들 사양이 많이 좋아져서 만개 정도는 큰 문제가 없을 것 같은데...사용자가 많을 수록 클라이언트에서 처리하는게 서버에 부담일 수 있을 것 같습니다.큰 배열이 차지하는 메모리의 문제이지 연산(CPU)의 문제는 아닐 것 같습니다.여러가지 고려해야 할 상황이 많지만저라면 브라우저에서 처리하도록 구현 할 것 같습니다.

brian55 · Answer

무엇보다도 작성자분이 문제해결하려는 함에 있어서 태도가 저는 조금 문제가 있다고 보는게...사실 지금 팀원을 못믿으시는거잖아요? 최소한의 존중도 밑받침되어있지 못한 상태에서 어떻게 협업이 가능한가요..?어찌되었든 그쪽 분야를 나보다 더 많이 알고있는사람이 하는 말도 못믿고 이렇게 글쓰시면서 검증하려드시는데...누가 같이 일하고싶어할까요..? 막말로 FE가 그렇게 말하는데 작성자분이 거짓말하지마라 내가 더미로 돌려보니 랜더링에 문제없지않냐너네가 고쳐라 라는 스탠스가..과연... 그쪽에 먹힐까요?

장독깨기 · Answer

프런트 개발자 한 분이 프런트 입장에서 말씀하시네요. ㅎㅎㅎ프런트든 백앤드든 본인 일 하는 입장에서 좀 번거롭거나 까다롭다 해서,본인들 입장에서 얘기를 하면 안 됩니다. 이럼 논의가 협의가 안 되는거에요.어케 하는 것이 효율적인지 합리적인지 유연하게 확장 가능한지,사용자에게 서비스하는데 있어 성능 문제는 없는지 등등시스템 관점에서 바라 보고 협의를 논의를 해야 하는거죠.그러나, 시스템 관점에서 별 차이점이 없다면 굳이 번거롭게 할 필요도 없긴하죠.적당한 선에서 협의하면 될 일 인데요, 사실 이 부분이 쉽지 않습니다. ㅎ저 시스템의 구조나 상황을 살펴봐야 뭔 가 좀 상세히 얘기할 수 있겠지만,...일단, 프런트에서 api 호출해서 결과를 받든 실시간으로 받아 연산을 하든,랜더링은 둘 다 해당되니 상관없습니다.그리고, api 호출해서 하는 방식은 이미 지금하고 있습니다.그니까, 글쓴이는 일이 번거로워서 이런 문제 제기를 하는 것이 아니죠.뭔 가 효율적인 방식으로 시스템을 개선해보고 싶은 거라 생각할 수 있습니다.근데, 프런트는 이를 거절하는 이유가 만 번의 연산에 대한 부담입니다.이건 누가 봐도 핑계 거리 밖에 안 되는 거죠. 이렇게 하면 안 되구요...폴링을 하면 지연 시간이란게 생깁니다. 실시간 반영이 안되는거죠.그리고, 이를 모니터링 하는 클라이언트가 얼마나 될 지 모르겠지만,웹소켓으로 한다면 별도의 세션을 유지해야 합니다.그리고, 간단하게 할 수 있는 부분인데, 웹소켓으로 한다면 좀 번거롭고 까다로운것도 사실이죠.그래서, 실시간으로 처리 부분이 그렇게 중요하냐,그렇지 않으면, 굳이 번거롭게 하지 말자 이 정도는 괜찮겠죠. ㅎ근데, 실시간으로 보여주는 부분이 사용자 입장에서 중요한데,만번의 부담때문에 사용자에게 참아라는 얘기는 말이 안되는거겠죠.그리고, 서버의 반복적인 연산에 대한 부담도 고려할 수 있습니다.이 외에도 여러 상황이 있을 수 있고 고려해야 할 수 있습니다.제가 여기 오키에서 늘 말씀드리는 부분인데요,프런트든 백앤드든 둘 다 해야 하고, 둘 다 잘 알 수록 좋습니다.그래야, 본인의 입장이 아니라, 시스템 관점에서 통찰 할 수 있는 겁니다.근데, 참 쉽지가 않죠. ㅎㅎㅎ오지랖 길게 한 번 더 부려봤습니다. :)

톰소여 · Answer

크게 문제 없어보이는데요.진행해보세요.finance.yahoo.com에서도 websocket을 이용해서 데이터 계산해서 렌더링 해주고 있습니다.

pr0 · Answer

저라면 사용자 타겟과 접속환경을 고려하고 결정할 것 같습니다. 글만 봐서는 데이터 받아와서 사칙연산만 해주면 된다로 보이는데 개발환경에서 일단 해보고 조율하면 되는거 아닌가요? 개발환경과 소스관리가 어떻게 되어있는진 모르겠지만 프론트 브랜치 따서 돌려보세요. 기본적으로 사용자 이탈 방지를 위해 로딩이나 이런거 프론트에서 해놓은거 아닌가요? 개발자 도구에서 네트워크 속도 낮춰도 보고 하면서 사용자 경험을 해치는 선은 아닐거라고 어필하세요

React 연산이 브라우저에 미치는 영향

6개의 답변

Q&A 목록