프론트엔드 목표

이 섹션은 희망하는 상태(desired state)를 정의하고 GitLab 프론트엔드가 앞으로 몇 년 동안 어떻게 변화할 것으로 예상하는지를 설명합니다. 이 문서는 계속 변화하여 기술 및 팀 역학이 발전함에 따라 적응할 것입니다.

기술

Vue@latest

Vue의 최신 버전을 유지함으로써 GitLab 프론트엔드는 가장 효율적이고 안전하며 기능이 풍부한 프레임워크 기능을 활용합니다. 최신 Vue(3)는 향상된 성능과 더 직관적인 API를 제공하여 개발자 경험과 애플리케이션 성능을 향상시킵니다.

현재 상태

  • 2023년 12월 기준: GitLab은 현재 Vue 2.x를 사용 중입니다.
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

상태 관리

글로벌 상태 관리가 필요할 때는 다른 상태 관리 라이브러리 대신에 Apollo에서 처리해야 합니다. 자세한 내용은 Vuex 이주를 참조하십시오.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

기본 HAML

적절한 경우에는 계속해서 HAML을 Vue보다 사용할 것입니다. Vue를 선택해야 하는 경우에 대한 자세한 내용은 Vue 애플리케이션을 추가하는 경우를 참조하십시오.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

jQuery 완전 제거

2019년부터 더 이상 jQuery를 사용하지 않겠다고 했지만, 완전히 제거하는 것을 우선 순위로 두지는 않았습니다. 이곳의 목표는 주요 GitLab 코드베이스에서 더 이상 jQuery에 대한 어떠한 참조도 없게 하는 것입니다.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

의존성 관리

Vue의 최신 주요 버전을 유지하는 것과 유사하게, 가능한 한 의존성의 최신 버전에 가까이 유지해야 합니다. 업그레이드의 이점이 무시될 정도로 중요하지 않은 경우를 제외하고, 최소한 한 번씩 연간 의존성을 심사하여 업그레이드해야 합니다.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

Best Practices

확장성 및 성능

클러스터 SPA

현재 GitLab은 대부분 Rails 아키텍처와 Rails 라우팅을 따르기 때문에 라우트를 변경할 때마다 페이지가 다시로드됩니다. 이로 인해 긴로딩 시간이 발생하는데, 이는 다음과 같은 작업을 수행하게 됨을 의미합니다.

  • HAML 페이지 렌더링
  • Vue 애플리케이션을 마운트(적용)하는 경우
  • 이러한 애플리케이션의 데이터 가져오기

이 기간이 긴 프로세스를 사용자가 거쳐야 하는 횟수를 줄이고자 합니다. GitLab을 단일 페이지 애플리케이션으로 변환하면 가능하지만, 이것은 상당한 리팩터링이 필요하며 단기/중기적인 목표로 이루기 어려운 목표입니다.

현실적으로, 사용자 흐름을 형성하는 페이지의 클러스터를 정의하고, 이 클러스터를 Rails 라우팅에서 사용자의 브라우저 라우팅으로 이동할 수 있도록 이동하는 것이 가능할 것입니다. 이렇게 하면 HAML에서 관련 컨텍스트를 한 번에 모두 로드하고, 라우트에 따라 API에서 추가 데이터를 모두 가져올 수 있습니다. 클러스터의 예는 다음과 같을 수 있습니다:

  • 이슈 디렉터리
  • 이슈 보드
  • 이슈 세부 페이지
  • 새 이슈
  • 이슈 수정

모든 이슈에 대한 같은 컨텍스트(프로젝트 경로, 현재 사용자 등)를 가지고 있으므로, 이슈별 매개변수 (이슈 ‘iid’)로 더 많은 데이터를 쉽게 가져올 수 있으며 결과를 클라이언트에 저장할 수 있습니다(따라서 같은 이슈를 여는 것은 더 많은 API 호출이 필요하지 않게 됩니다). 이는 이슈를 탐색하는 사용자 경험을 원활하게 만듭니다.

클러스터 간 탐색에 대해서는 여전히 Rails 라우팅에 의존할 수 있습니다. 이러한 경우 클러스터 내 탐색보다는 비교적 빈번할 것입니다.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

재사용 가능한 컴포넌트

현재, 우리는 보편적으로 재사용 가능한 컴포넌트를 두 가지 주요 위치에 유지합니다.

  • GitLab UI
  • vue_shared 폴더

GitLab UI는 잘 문서화되어 있으며, 컴포넌트는 어디서나 재사용되기 충분히 추상적입니다. 그러나 vue_shared 컴포넌트는 다소 혼돈스럽고 종종 특정 맥락에서만 사용할 수 있고(예: 기존 Vuex 스토어에 바인딩할 수 있음), 중복이 있습니다(노트용으로 여러 개의 컴포넌트가 있음).

vue_shared를 심사하고 GitLab UI로 이동할 수 있는 것과 할 수 없는 것을 찾아내며, 중복을 제거하고 재사용성을 높이기 위해 기존 컴포넌트를 리팩터링해야 합니다. 이상적인 결과는 애플리케이션별 컴포넌트를 애플리케이션 폴더로 이동시키고, 재사용 가능한 “스마트” 컴포넌트는 공유 폴더/라이브러리에 유지하여 재사용할 수 있는 기능이 _하나의 구현_만 있도록 하는 것입니다.

현재 이것은 개발 중입니다. GitLab FE를 위한 모듈화된 단일 대형 시스템을 팔로우하여 상위 레벨 폴더에서 캡슐화를 어떻게 시행할 것인지에 대한 업데이트를 확인하십시오.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

PostCSS로 마이그레이션

SASS 컴파일은 전체 프론트엔드 컴파일 시간의 거의 절반을 차지합니다. 이로 인해 파이프라인이 예상보다 더 오랜 시간 실행됩니다. PostCSS로 마이그레이션하면 컴파일 시간을 크게 줄일 수 있게 됩니다.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

협업 및 도구

시각적 테스팅

시각적 테스팅 추가 프로세스는 초기 단계에 있으나, 이미 틀이 확립되어 있어야 합니다. 구현 방법이 결정되면, 특정 정보를 포함할 수 있도록 이 문서를 업데이트할 것입니다.

현재 상태

  • 2023년 12월 기준: (상태)
  • 진행 상황: (진행 상황에 대한 간략한 설명)

책임 있는 팀

  • 태스크 그룹:

  • 운영자:

마일스톤 및 타임라인

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (가능한 지표)

접근성 테스트

2023년에는 접근성 테스트용 도구 구성을 결정했습니다. 저희는 독립적인 구성요소가 아닌 전체 뷰를 테스트하기 위해 기능 테스트에서 사용되는 axe-core gem을 선택했습니다. 자세한 내용은 자동화된 접근성 테스트 문서에서 언제 및 어떻게 포함해야 하는지 확인하세요. Semgrep를 사용하여 테스트가 있는지 확인하기 위해 접근성 스캐너로 진행 상황을 확인할 수 있습니다.

현재 상황

  • 2023년 12월 현재: (상태)
  • 진행 사항: (진행 상황에 대한 간단한 설명)

책임 있는 팀

마일스톤 및 일정

  • (주요 마일스톤, 예상 완료일)

도전과 의존성

  • (중요한 도전 요소)

성과 메트릭 지표

  • (잠재적인 메트릭 지표)