프론트엔드 목표

이 섹션은 GitLab 프론트엔드의 _원하는 상태_를 정의하고 앞으로 몇 년 동안 어떻게 보이길 원하는지를 설명합니다. 이는 지속적으로 변화하며 기술과 팀 역학이 발전함에 따라 적응될 것입니다.

기술

Vue@latest

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

현재 상태

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

담당팀

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

상태 관리

전역 상태 관리가 필요한 경우, Vuex나 다른 상태 관리 라이브러리 대신 Apollo에서 이루어져야 합니다. 더 자세한 내용은 Vuex에서의 이주를 참조하십시오.

현재 상태

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

담당팀

  • 작업 그룹:

  • 파시리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

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

기본 HAML 사용

적절한 경우에는 계속해서 HAML을 사용할 것입니다. Vue보다는 HAML을 사용할 때의 결정 방법은 Vue 애플리케이션을 추가할 때를 참조하십시오.

현재 상태

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

담당팀

  • 작업 그룹:

  • 파시리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

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

jQuery 완전히 제거

2019년에는 더 이상 jQuery를 사용하지 않기로 했지만, 완전한 제거를 우선 순위로 두지 않았습니다. 여기서의 목표는 주요 GitLab 코드베이스에서 더 이상 이에 대한 참조가 없게 하는 것입니다.

현재 상태

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

담당팀

  • 작업 그룹:

  • 파시리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

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

의존성 관리

Vue의 최신 주요 버전을 유지하는 것과 유사하게, 그들의 이점을 업그레이드하지 않는 것이 더 큰 이점이 있는 경우를 제외하고 가능한 한 최신 버전의 의존성에 가까이 유지해야 합니다. 적어도, 우리는 매년 의존성을 검토하여 업그레이드할 지 여부를 평가할 것입니다.

현재 상태

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

담당팀

  • 작업 그룹:

  • 파시리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

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

최선의 실천 방법

확장성과 성능

클러스터 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 Moduler Monolith for FE을 확인하여 최상위 폴더(예: vue_shared)에서 캡슐화를 어떻게 시행할 것인지에 대한 업데이트를 팔로우하십시오.

현재 상태

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

담당팀

  • 작업 그룹:

  • 파시리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 요소)

성공 지표

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

PostCSS로 마이그레이션하기

SASS 컴파일은 전체 프론트엔드 컴파일 시간의 거의 절반이 소요됩니다. 이는 우리의 파이프라인이 의도한 것보다 더 오랜 시간이 걸리게 만듭니다. PostCSS로 마이그레이션하면 컴파일 시간을 상당히 단축할 수 있을 것으로 예상됩니다.

현재 상황

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

담당 팀

  • 태스크 그룹:

  • 파실리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성과 평가 지표

  • (잠재적인 지표)

협업 및 도구

시각적 테스팅

시각적 테스트 추가 작업이 초기 단계이지만, 이미 구체적인 프레임워크를 마련하고 있습니다. 구현이 결정되면 이 문서를 업데이트하여 구체적인 내용을 포함할 것입니다.

현재 상황

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

담당 팀

  • 태스크 그룹:

  • 파실리테이터:

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성과 평가 지표

  • (잠재적인 지표)

접근성 테스트

2023년에 접근성 테스트를 위한 도구를 결정했습니다. 우리는 기능 테스트에서 사용되는 axe-core gem을 선택하여 컴포넌트가 아닌 전체 뷰를 테스트하기로 결정했습니다. 자세한 내용은 자동화된 접근성 테스트에 대한 문서를 참조하여 언제, 어떻게 포함해야 하는지 알아보세요. 저희의 접근성 스캐너를 통해 Semgrep을 사용하여 테스트가 있는지 확인할 수 있습니다.

현재 상황

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

담당 팀

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성과 평가 지표

  • (잠재적인 지표)