실시간 뷰 컴포넌트 빌드 및 배포

GitLab에서 WebSocket 기반 GraphQL 구독을 활용하여 실시간 뷰 컴포넌트를 빌드하고 배포하는 방법을 설명합니다.

GitLab은 사용자 입력을 수신하고 상태 변경을 사용자에게 반영하는 개별 뷰 컴포넌트를 통해 대화형 사용자 경험을 제공합니다. 예를 들어, 머지 리퀘스트 페이지에서 사용자는 승인하거나, 댓글을 남기거나, CI/CD 파이프라인과 상호작용하는 등 다양한 작업을 할 수 있습니다. 그러나 GitLab은 상태 업데이트를 적시에 반영하지 못하는 경우가 많습니다. 이는 페이지의 일부가 오래된 데이터를 표시하게 되며, 사용자가 페이지를 새로고침한 후에야 업데이트된다는 것을 의미합니다. 이를 해결하기 위해 GitLab은 뷰 컴포넌트가 WebSocket을 통해 실시간으로 상태 업데이트를 받을 수 있도록 하는 기술과 프로그래밍 API를 도입했습니다. 다음 문서에서는 GitLab Ruby on Rails 서버로부터 실시간으로 업데이트를 수신하는 뷰 컴포넌트를 빌드하고 배포하는 방법을 설명합니다. Action Cable과 GraphQL 구독은 작업 진행 중이며 현재 활발히 개발되고 있습니다. 개발자는 자신의 사용 사례를 평가하여 이 도구들이 적합한지 확인해야 합니다. 확실하지 않은 경우 #f_real-time 내부 Slack 채널 에서 도움을 요청하세요. WebSocket 안전하게 사용하기 # WebSocket은 GitLab에서 비교적 새로운 기술이므로, WebSocket 연결을 사용할 때는 방어적으로 코딩해야 합니다. 하위 호환성 # 연결을 임시(ephemeral)적인 것으로 취급하고, 빌드하는 기능이 하위 호환성을 유지하도록 하세요. WebSocket 연결을 사용할 수 없을 때 중요한 기능이 점진적으로 저하되도록 보장하세요. 필요한 백엔드 코드 없이는 WebSocket을 통한 업데이트를 시뮬레이션하기 어렵기 때문에, 프론트엔드와 백엔드를 동시에 작업할 수 있습니다. 그러나 항상 백엔드 변경 사항을 먼저 배포하세요. 특히 새로운 연결이 도입되는 경우, 백엔드와 프론트엔드 변경 사항을 별도의 릴리즈로 패키징하거나 Feature Flag로 롤아웃을 관리하는 것을 강력히 권장합니다. 이렇게 하면 프론트엔드가 이벤트 구독을 시작할 때 백엔드가 이미 이를 처리할 준비가 된 상태가 됩니다. 대규모에서의 새 연결 # 새로운 WebSocket 연결을 도입하는 것은 대규모 환경에서 특히 위험합니다. 사이트의 새 영역에 연결을 설정해야 하는 경우, 더 진행하기 전에 새 WebSocket 연결 도입 섹션에 설명된 단계를 수행하세요. 실시간 뷰 컴포넌트 빌드 # 전제 조건: 다음을 먼저 읽으세요: GraphQL 개발 가이드 Vue 개발 가이드 GitLab에서 실시간 뷰 컴포넌트를 빌드하려면 다음을 수행해야 합니다: GitLab 프론트엔드에서 Vue 컴포넌트와 Apollo 구독을 통합합니다. GitLab Ruby on Rails 백엔드에서 GraphQL 구독을 추가하고 트리거합니다. Vue 컴포넌트와 Apollo 구독 통합 # 현재 실시간 스택은 클라이언트 코드가 렌더링 레이어로 Vue를, 상태 및 네트워킹 레이어로 Apollo를 사용하여 빌드된다고 가정합니다. 아직 Vue +