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

기존 레지스트리:

• 패키지 레지스트리

• 컨테이너 레지스트리

• Terraform Module Registry

• Dependency Proxy

프론트엔드 아키텍처#

컴포넌트 분류#

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

• Pages: 전체 앱을 나타내거나, vue-router를 사용하는 레지스트리의 경우 하나의 라우터 경로를 나타냅니다.

• Containers: 단일 기능을 나타냅니다. 복잡한 로직을 포함하며 API에 연결될 수 있습니다.

• Presentationals: UI의 일부를 나타냅니다. 모든 데이터를 props 또는 inject를 통해 수신하며 API에 연결하지 않습니다.

• Shared components: 다양한 구성 배열을 수용하고 모든 레지스트리에서 공유되는 프레젠테이션 컴포넌트입니다.

API와의 통신#

API와의 복잡성 및 통신은 pages 컴포넌트에, 그리고 필요한 경우 container 컴포넌트에 집중되어야 합니다. 이렇게 하면 다음이 더 쉬워집니다:

• 동시 요청, 로딩 상태, 사용자 메시지 처리.

• 코드 유지 관리, 특히 작업량 추정. page 또는 기능 컴포넌트를 다루는 경우 더 복잡할 것으로 예상됩니다.

• 빠르고 일관된 단위 테스트 작성.

모범 사례#

• provide 또는 inject를 사용하여 앱 초기화에서 오는 정적이고 반응형이 아닌 값을 전달합니다.

• 데이터를 전달할 때 중첩된 쿼리나 Vuex 바인딩보다 props를 선호합니다. pages 및 container 컴포넌트만 상태와 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: 레지스트리의 목록 요소를 나타냅니다. 좌측 action, 좌측 기본 및 보조 콘텐츠, 우측 기본 및 보조 콘텐츠, 우측 action, 세부 정보 슬롯을 지원합니다.

• metadata-item: 아이콘 또는 링크가 있는 하나의 메타데이터를 나타냅니다. 주로 타이틀 영역에서 사용됩니다.

• persisted-dropdown-selection: 사용자 선택 항목을 localStorage에 저장하는 메뉴를 나타냅니다.

• registry-search: 오른쪽에 정렬 섹션이 있는 gl-filtered-search를 구현합니다.

• title-area: 레지스트리의 상단 타이틀 영역을 구현합니다. 메인 타이틀, 아바타, 부제목, 메타데이터 행, 우측 actions 슬롯을 포함합니다.

새 레지스트리 페이지 추가#

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

• 이미 존재하는 공유 컴포넌트를 활용하세요. 더 성숙한 레지스트리(예: 패키지 레지스트리)에서 컴포넌트가 어떻게 구성되고 사용되는지 살펴보는 것이 좋습니다.

• 백엔드 요구사항과 일치한다면 API에 GraphQL을 사용하는 것을 권장합니다. 이는 레지스트리의 내재적인 성능 문제를 처리하는 데 도움이 됩니다.

• 가능하다면 Vue Router와 프론트엔드 라우팅을 사용하는 것을 권장합니다. Apollo와 결합하면 캐싱 레이어가 체감 페이지 성능 향상에 도움이 됩니다.