레지스트리 아키텍처

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와 결합하여, 캐싱 계층은 인지된 페이지 성능을 향상시킵니다.