레지스트리 아키텍처

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에는 레지스트리 기능을 구현하는 데 사용할 수 있는 공유 컴포넌트가 있습니다. 이러한 컴포넌트는 레지스트리 페이지의 주요 구성 요소를 구축합니다. 가장 중요한 컴포넌트는 다음과 같습니다:

  • 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와 함께 사용하는 것이 좋습니다.