프론트엔드 개발자가 트래픽 제어에 관여할 수 있는 부분은 무엇일까요?

Question

안녕하세요. 항상 커리어리를 통해서 선배 개발자분들에게 멀리서나마 많은 지식과 경험을 쌓고 있는 이상원입니다 :)

금일은 다름이 아니라, 이전에 면접 시에 프론트엔드 개발자가 트래픽 제어에 관여할 수 있는 부분은 무엇인지에 대한 질문을 받았었는데, 당시에 기억났었던 것은 디바운싱이나 쓰로틀링을 구현하여 한 시간내에 유저의 Interaction을 잘게 초단위로 나누어 서버에 전송하면 해결할 수 있다고 했던 것 같은데, 이외에도 방법들이 여럿 있다고 들어서 그 방법에 대하여 조사를 진행하게 되었습니다.

그러던 와중에 쿠팡 엔지니어 분께서 적용하신 글을 찾게 되었는데, 해당 글이 서버 측에서 할 수 있는 캐시를 활용한 트래픽 처리라는 것을 알게 되었습니다.

그렇다면 프론트엔드에서 트래픽 제어에 기여할 수 있는 부분은 무엇이 있는지 궁금합니다 !
서버개발진들처럼 캐싱을 활용하여 제어가 가능할 것 같긴한데 구체적인 사례들이 잘 보이지 않아서 인사이트를 얻고 싶습니다.

쿠팡 관련 medium은 아래와 같습니다.
https://medium.com/coupang-engineering/%EC%BA%90%EC%8B%9C%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%EB%8C%80%EC%9A%A9%EB%9F%89-%ED%8A%B8%EB%9E%98%ED%94%BD-%EC%B2%98%EB%A6%AC-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81-a274f4731d07

손정현 · Accepted Answer

안녕하세요!

흥미로운 주제네요 :)
저도 깊게 생각해본 적 없는 주제지만 리서치를 조금 해보니 여러가지 방법이 있는거 같아요.
말씀하신 throttle, debounce 기법들도 물론 트래픽 제어에 도움이 되고 캐싱도 당연히 도움이 되는 것 같아요. 중복 요청 제거도 도움이 되는 것 같습니다. request deduping 이라고 하네요. 그리고 Connection Pool을 일정 수준으로 유지하는 것도 트래픽 제어에 도움이 됩니다.

요즘 많이 사용하는 Next.js, React.js 같은 툴들도 캐싱 및 중복 요청 제거 기능이 제공되기도 하고 상태 관리하는 툴인 swr이나 react-query 등도 캐싱 매커니즘을 제공하기도 해요.

그 외에도 네트워크 패킷의 용량을 줄이는 여러가지 압축 방법도 트래픽 제어에 도움이 될 것 같아요.
 
지금 생각나는 것은 요정도인데, 아마 더 있을 것 같습니다. 참고했던 자료들 첨부할게요 :)
- https://medium.com/swlh/connection-pooling-3-things-you-need-to-know-to-build-a-connection-pool-from-scratch-9d9d4d5ff396
- https://nextjs.org/docs/app/building-your-application/data-fetching/caching