레지스트리 아키텍처

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

기존 레지스트리:

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

프론트엔드 아키텍처

컴포넌트 분류

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

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

API와의 통신

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

동시 요청, 로딩 상태 및 사용자 메시지 처리
코드의 유지보수, 특히 작업을 추정하는 데 유용합니다. 페이지나 기능 컴포넌트에 영향을 미치는 경우 더 복잡해질 것으로 예상됩니다.
빠르고 일관된 단위 테스트 작성

최적의 방법

앱 초기화에서 나오는 정적인 반응이 없는 값들을 전달하기 위해 provide 또는 inject을 사용하세요.
데이터를 전달할 때 중첩된 쿼리나 Vuex 바인딩 대신 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와 결합하여 캐싱 레이어가 페이지 성능을 개선하는 데 도움이 됩니다.