레지스트리 아키텍처

GitLab에는 여러 레지스트리 응용 프로그램이 있습니다. 모두 유사한 UI, UX 및 비즈니스 로직을 활용하므로 모두 동일한 아키텍처로 구축되었습니다. 또한 사용자 및 개발자 경험을 통합하기 위해 일련의 공유 컴포넌트가 이미 존재합니다.

기존 레지스트리:

패키지 레지스트리
컨테이너 레지스트리
Terraform 모듈 레지스트리
종속성 프록시

프론트엔드 아키텍처

컴포넌트 분류

모든 레지스트리는 네 가지 컴포넌트 유형을 포함하는 아키텍처 패턴을 따릅니다:

페이지: 전체 앱을 나타내거나 vue-router를 사용하는 레지스트리의 경우 하나의 라우터 경로를 나타냅니다.
컨테이너: 단일 기능을 나타내는 컴포넌트입니다. 복잡한 로직을 포함하며 API에 연결될 수 있습니다.
표현: UI의 일부를 나타냅니다. 모든 데이터를 props 또는 inject를 통해 수신하며 API에 연결되지 않습니다.
공유 컴포넌트: 다양한 구성을 수용하며 모든 레지스트리에서 공유되는 표현 컴포넌트입니다.

API와 통신

API와의 복잡성 및 통신은 페이지 컴포넌트 및 필요한 경우 컨테이너 컴포넌트에 집중되어야 합니다. 이로 인해 다음이 더 쉬워집니다:

동시 요청, 로딩 상태 및 사용자 메시지 처리
코드 유지 관리, 특히 작업 추정에 영향을 미칩니다. 페이지 또는 기능 컴포넌트를 건드린다면 더 복잡해질 수 있습니다.
빠르고 일관된 단위 테스트 작성

최선의 접근 방법

앱 초기화에서 정적, 반응이 없는 값들을 전달하기 위해 provide 또는 inject를 사용합니다.
데이터를 전달할 때 상태 및 API 통신에 대해 props를 우선으로 합니다. 페이지 및 컨테이너 컴포넌트만 상태 및 API 통신을 알아야 합니다.
반복하지 마십시오. 한 레지스트리가 기능을 받을 경우 나머지가 필요할 가능성이 높습니다. 재사용 가능하고 상태에 바인딩되지 않은 경우 공유 컴포넌트를 만듭니다.
전용 컴포넌트로 기능 및 로직을 표현하려고 노력합니다. 콜백 및 비동기 코드보다 이벤트 및 속성을 다루는 것이 훨씬 쉽습니다 (참조: delete_package.vue).
GraphQL 호출을 위한 초기 쿼리 실행를 활용합니다.

공유 컴포넌트 라이브러리

vue_shared/components/registry 및 packages_and_registries/shared에는 레지스트리 기능을 구현하는 데 사용할 수 있는 공유 컴포넌트가 있습니다. 이러한 컴포넌트는 레지스트리 페이지의 원하는 UI 및 UX의 주요 부분을 구축합니다. 가장 중요한 컴포넌트는 다음과 같습니다:

code-instruction: 코드를 포함하는 복사 가능한 상자를 나타냅니다. 여러 줄과 한 줄 짜리 코드 상자를 지원합니다. Snowplow는 코드 복사 이벤트를 추적합니다.
details-row: 세부 정보의 행을 나타냅니다. list-item 컴포넌트의 세부 영역에 추가 정보를 추가하는 데 사용됩니다.
history-item: 타임라인을 작성하는 데 사용되는 히스토리 목록 항목을 나타냅니다.
list-item: 레지스트리의 목록 요소를 나타냅니다. 왼쪽 동작, 왼쪽 기본 및 보조 콘텐츠, 오른쪽 기본 및 보조 콘텐츠, 오른쪽 동작 및 세부 정보 슬롯을 지원합니다.
metadata-item: 아이콘 또는 링크와 함께 한 조각의 메타데이터를 나타냅니다. 주로 제목 영역에서 사용됩니다.
persisted-dropdown-selection: 사용자 선택을 localStorage에 저장하는 메뉴를 나타냅니다.
registry-search: 오른쪽에 정렬 섹션을 가진 gl-filtered-search를 구현합니다.
title-area: 레지스트리의 상단 제목 영역을 구현합니다. 주요 제목, 아바타, 부제, 메타데이터 행 및 오른쪽 작업 슬롯을 포함합니다.

새 레지스트리 페이지 추가

새 레지스트리를 추가할 때:

이미 존재하는 공유 컴포넌트를 사용합니다. 컴포넌트가 어떻게 구성되고 더 성숙한 레지스트리(예: 패키지 레지스트리)에서 어떻게 사용되는지 살펴보는 것이 좋습니다.
백엔드 요구 사항과 일치한다면 API에 대해 GraphQL을 사용하는 것이 좋습니다. 이렇게 함으로써 레지스트리의 고유한 성능 문제를 처리하는 데 도움이 됩니다.
가능하다면 Vue Router 및 프론트엔드 라우팅을 사용하는 것이 좋습니다. Apollo와 결합되면 캐싱 레이어가 인식된 페이지 성능에 도움이 됩니다.