GitLab에는 여러 레지스트리 애플리케이션이 있습니다. 이들은 모두 비슷한 UI와 UX, 비즈니스 로직을 사용하므로 동일한 아키텍처로 만들어졌습니다. 또한 사용자 경험과 개발자 경험을 통일하기 위한 공유 컴포넌트 모음도 이미 마련돼 있습니다.

기존 레지스트리는 다음과 같습니다.

• Package registry
• Container registry
• Terraform Module Registry
• Dependency Proxy

프론트엔드 아키텍처#

컴포넌트 분류#

모든 레지스트리는 네 가지 컴포넌트 유형으로 구성된 아키텍처 패턴을 따릅니다.

• Pages: 애플리케이션 전체를 나타냅니다. vue-router를 사용하는 레지스트리에서는 라우터 경로 하나를 나타냅니다.
• Containers: 기능 하나를 나타냅니다. 복잡한 로직을 담고 있으며 API에 연결될 수 있습니다.
• Presentationals: UI의 일부를 나타냅니다. 모든 데이터를 props 또는 inject로 받으며 API에 연결되지 않습니다.
• Shared components: 다양한 설정을 받을 수 있는 프레젠테이션 컴포넌트로, 모든 레지스트리에서 공유해 사용합니다.

API와의 통신#

복잡한 처리와 API 통신은 페이지 컴포넌트에 집중시키고, 필요한 경우 컨테이너 컴포넌트에 둡니다. 이렇게 하면 다음 작업이 쉬워집니다.

• 동시 요청과 로딩 상태, 사용자 메시지 처리.
• 코드 유지 관리, 특히 작업량 산정. 페이지나 기능 컴포넌트를 건드린다면 더 복잡하다고 보면 됩니다.
• 빠르고 일관된 단위 테스트 작성.

모범 사례#

• 애플리케이션 초기화 시점에 전달되는 정적이고 반응형이 아닌 값은 provide 또는 inject로 전달합니다.
• 데이터를 전달할 때는 중첩 쿼리나 Vuex 바인딩보다 props를 우선합니다. 상태와 API 통신을 인지하는 컴포넌트는 페이지와 컨테이너 컴포넌트뿐이어야 합니다.
• 같은 코드를 반복하지 않습니다. 한 레지스트리에 기능이 추가되면 나머지 레지스트리도 나중에 그 기능을 필요로 할 가능성이 큽니다. 재사용할 수 있고 상태에 묶이지 않은 것으로 보인다면 공유 컴포넌트로 만듭니다.
• 기능과 로직은 전용 컴포넌트로 표현합니다. 콜백과 비동기 코드보다 이벤트와 속성을 다루는 편이 훨씬 수월합니다 (delete_package.vue 참고).
• GraphQL 호출의 startup 기능을 활용합니다.

공유 컴포넌트 라이브러리#

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: 레지스트리 상단의 타이틀 영역을 구현합니다. 메인 타이틀, 아바타, 부제, 메타데이터 행, 오른쪽 액션 슬롯이 포함됩니다.

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

새 레지스트리를 추가할 때는 다음을 따릅니다.

• 이미 있는 공유 컴포넌트를 활용합니다. 더 성숙한 레지스트리(예를 들어 Package registry)에서 컴포넌트가 어떻게 구성되고 사용되는지 살펴보는 편이 좋습니다.
• 백엔드 요구 사항에 맞는다면 API로 GraphQL을 사용하기를 권장합니다. 레지스트리가 태생적으로 안고 있는 성능 문제를 다루는 데 도움이 됩니다.
• 가능하다면 Vue Router와 프론트엔드 라우팅을 사용하기를 권장합니다. Apollo와 함께 쓰면 캐싱 계층이 체감 페이지 성능을 높여 줍니다.