토스ㅣSLASH 24 - N개의 탭, 단 하나의 웹소켓: SharedWorker
SLASH 토스 · YouTube
AI 핵심 요약
토스증권 PC에서는 여러 탭을 열면 탭마다 WebSocket 연결이 생겨 서버 연결 수와 트래픽이 늘어날 수 있었습니다. 이를 줄이기 위해 여러 탭이 공유하는 SharedWorker 안에 WebSocket을 두고, 메시지 포트를 통해 탭의 요청과 서버 데이터를 중계하도록 구성했습니다. SharedWorker 미지원 브라우저에는 DedicatedWorker를 대체 경로로 두어 워커 로직을 재사용했고, 번들러의 워커 경로 처리와 탭 종료 시 리소스 정리도 함께 다뤘습니다. 그 결과 지원 브라우저에서는 연결을 탭당 하나에서 브라우저당 하나로 줄일 수 있었으며, 워커의 생명주기와 브라우저 지원 범위를 고려해야 한다는 점을 공유했습니다.
- SharedWorker는 같은 오리진과 같은 스크립트 경로를 사용하는 탭끼리 공유됩니다.
- 탭과 워커 사이의 통신은 메시지 포트로 구성하고, 워커가 받은 서버 데이터를 연결된 탭들에 전달할 수 있습니다.
- SharedWorker를 지원하지 않는 브라우저에는 DedicatedWorker를 대체 경로로 두면 워커 기반 로직을 재사용할 수 있습니다.
- 번들러가 워커 스크립트 경로를 빌드 결과에 맞게 처리하도록 URL 기반 워커 생성 방식을 활용할 수 있습니다.
- 탭 종료 이벤트에만 의존하면 정리가 누락될 수 있으므로, WeakRef와 주기적인 참조 확인으로 메시지 포트와 관련 리소스를 정리할 수 있습니다.
소개
동시에 띄워진 여러 탭이 리소스를 공유할 수 있을까요? 토스증권 PC에서 SharedWorker로 WebSocket 연결을 최적화한 방식을 소개합니다. 박건영 / 토스증권 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #sharedworker #websocket #토스증권 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루...
비슷한 학습 자료
컨퍼런스 SLASH
비대면으로 더 똑똑하게 대출 서류를 발급할 수 없을까요? 웹뷰에서 Nest.js 서버를 띄워 토스뱅크의 대출 서비스에 적용한 사례를 나눕니다. 박진수 / Node.js Platform Team Leader 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #nodejs #nestjs #토스뱅크 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를...
백엔드 모바일 앱 개발
컨퍼런스 SLASH
업무를 더 효율적으로, 최대의 성과를 낼 수 있는 법은 무엇일까요? 클러스터 운영부터 서비스 라이프사이클 관리까지, 데브옵스 업무 효율화 사례를 소개합니다. 양석준 / DevOps Engineer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #devops #cluster 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를 받은 후에 처리...
데브옵스 · 인프라
컨퍼런스 SLASH
토스ㅣSLASH 24 - 보상 트랜잭션으로 분산 환경에서도 안전하게 환전하기
컨퍼런스 SLASH
거대한 은행 계정계 시스템과 새로운 MSA 서비스는 어떻게 협력할 수 있을까요? 계정계 시스템의 원화 계좌와 분리된 외화 계좌를 오가는 환전 트랜잭션 구현법을 소개합니다. 이신동 / Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #transaction #토스뱅크 #backend 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보...
백엔드 데이터베이스 로드맵 1개에 담김
컨퍼런스 SLASH
토스ㅣSLASH 24 - SSE 이벤트 푸쉬로 불필요한 Polling 제거하기
컨퍼런스 SLASH
'실시간' 업데이트가 중요한 증권 서비스! 이를 위해 서버에서 클라이언트까지 푸쉬 구조를 구축하고, SSE로 안정적이고 신속한 데이터 업데이트를 구현한 방법을 소개합니다. 전연빈 / 토스증권 Server Platform Team Leader 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #server #sse #backend #토스증권 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
백엔드 네트워크
컨퍼런스 SLASH
토스ㅣSLASH 24 - 오프닝 세션
컨퍼런스 SLASH
새로운 문제를 찾고 또 끊임없이 도전하여, 결국엔 새로운 혁신을 만드는 토스팀의 치열한 도전기를 소개합니다. NO LIMIT, 우리에게 풀지 못할 문제는 없습니다. 이형석 / 토스 CTO 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #토스 #개발자컨퍼런스 #SLASH #SLASH24 #CTO #keynote 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다. *토스가 다루는 모든 개인정보는 고객에게 동의를 받은 후에 처리되고 있으며, 접...
컨퍼런스 SLASH
토스ㅣSLASH 23 - 퍼널: 쏟아지는 페이지 한 방에 관리하기
컨퍼런스 SLASH
매끄럽고 우아한 사용자 경험을 위한 개발자의 경험도 우아할 수 있을까요? 수많은 화면과 쏟아지는 분기를 효과적으로 관리하는 ‘퍼널’ 설계에 대해 소개합니다. 진유림 / 토스 Frontend Developer 발표 자료 👉🏻 https://bit.ly/3WZip27 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://bit.ly/43kW3tO 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs #퍼널 #라이브러리 #frontenddeveloper #토스 #개발자컨퍼런스 #SLASH *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해당 자료를 복제하여 SLASH 행사 홈페이지를 제외한 온라인상에 게재하는 행위는 연사가 동의한 저작권 및 배포전송권에 위배됩니다....
프론트엔드