프론트엔드 목표

이 섹션은 GitLab 프론트엔드의 _희망 상태_와 앞으로 몇 년 동안 우리가 바라보는 방향을 정의합니다. 이는 살아있는 문서이며, 기술과 팀 역학이 발전함에 따라 조정될 것입니다.

기술

Vue@latest

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

현재 상태

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

책임 팀

주요 이정표 및 일정

  • (주요 이정표, 예상 완료일)

과제 및 의존성

  • (주요 과제)

성공 지표

상태 관리

전역 상태 관리가 필요할 때는 Vuex나 다른 상태 관리 라이브러리 대신 Apollo에서 이루어져야 합니다. 왜 그리고 어떻게 마이그레이션할 계획인지에 대한 자세한 내용은 Vuex에서 마이그레이션을 참조하세요.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 촉진자:

주요 이정표 및 일정

  • (주요 이정표, 예상 완료일)

과제 및 의존성

  • (주요 과제)

성공 지표

  • (잠재적 지표)

기본적으로 HAML 사용

적절할 경우 Vue보다 HAML을 계속 사용할 것입니다. Vue를 선택할 때의 결정 기준에 대해서는 Vue 애플리케이션 추가 시기를 참조하세요.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 촉진자:

주요 이정표 및 일정

  • (주요 이정표, 예상 완료일)

과제 및 의존성

  • (주요 과제)

성공 지표

  • (잠재적 지표)

jQuery의 완전 제거

2019년에 우리는 더 이상 jQuery를 사용하지 않겠다고 약속했지만, 전체 제거를 우선시하지 않았습니다. 우리의 목표는 이제 GitLab 코드베이스의 주요 부분에서 jQuery에 대한 참조가 없도록 하는 것입니다.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 촉진자:

주요 이정표 및 일정

  • (주요 이정표, 예상 완료일)

과제 및 의존성

  • (주요 과제)

성공 지표

  • (잠재적 지표)

의존성 관리

최신 주요 버전의 Vue를 유지하는 것과 유사하게, 우리는 의존성을 가능한 한 최신 버전에 가깝게 유지하려고 노력해야 합니다. 업그레이드를 하지 않는 것이 업그레이드하는 것의 이점보다 큰 경우를 제외하고는 말이죠. 최소한 매년 의존성을 감사하여 업그레이드해야 할지 평가할 것입니다.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 촉진자:

주요 이정표 및 일정

  • (주요 이정표, 예상 완료일)

과제 및 의존성

  • (주요 과제)

성공 지표

  • (잠재적 지표)

모범 사례

확장성 및 성능

클러스터 SPA

현재 GitLab은 대부분 Rails 아키텍처와 Rails 라우팅을 따르고 있습니다. 이는 경로를 변경할 때마다 페이지가 다시 로드됨을 의미합니다. 이러한 이유로 긴 로딩 시간이 발생합니다. 우리는 다음을 수행하고 있습니다:

  • HAML 페이지 렌더링;
  • Vue 애플리케이션 마운트 (있다면);
  • 이 애플리케이션을 위한 데이터 가져오기

이상적으로는 사용자가 이 긴 과정을 여러 번 거치지 않도록 줄여야 합니다. 이를 위해 GitLab을 단일 페이지 애플리케이션으로 전환하는 방법이 있겠지만, 이는 상당한 리팩토링이 필요하며 단기/중기 목표로는 달성하기 어려운 부분입니다.

현실적인 목표는 여러 개의 SPA 경험으로 이동하여 사용자 흐름을 형성하는 클러스터 페이지를 정의하고 이 클러스터를 Rails 라우팅에서 클라이언트 측 라우팅이 있는 단일 페이지 애플리케이션으로 이동하는 것입니다. 이렇게 하면 HAML에서 모든 관련 컨텍스트를 한 번만 로드하고 경로에 따라 API에서 추가 데이터를 가져올 수 있습니다. 클러스터의 예는 다음 페이지일 수 있습니다:

  • 이슈 페이지
  • 이슈 보드 페이지
  • 이슈 세부정보 페이지
  • 새 이슈 페이지
  • 이슈 편집

이 모두는 동일한 컨텍스트(프로젝트 경로, 현재 사용자 등)를 가지고 있으며, 이슈 특정 매개변수(이슈 iid)로 더 많은 데이터를 쉽게 가져오고 클라이언트에 결과를 저장할 수 있습니다(따라서 동일한 이슈를 여는 데 더 많은 API 호출이 필요하지 않습니다). 이는 이슈를 탐색하는 데 원활한 사용자 경험으로 이어집니다.

클러스터 간의 탐색은 여전히 Rails 라우팅에 의존할 수 있습니다. 이러한 경우는 클러스터 내 탐색보다 상대적으로 적어야 합니다.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 조정자:

마일스톤 및 일정

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

문제 및 의존성

  • (주요 문제)

성공 지표

  • (잠재적 지표)

재사용 가능한 구성 요소

현재 우리는 두 개의 주요 위치에 일반적으로 재사용할 수 있는 구성 요소를 보관하고 있습니다:

  • GitLab UI
  • vue_shared 폴더

GitLab UI는 잘 문서화되어 있으며 구성 요소가 Vue 애플리케이션 어디에서나 재사용될 수 있도록 추상화되어 있는 반면, vue_shared 구성 요소는 다소 혼란스럽고, 특정 컨텍스트에서만 사용될 수 있으며(예를 들어, 기존 Vuex 저장소에 바인딩될 수 있음) 중복이 발생합니다(노트를 위한 여러 구성 요소가 있습니다).

vue_shared에 대한 감사를 수행하고 GitLab UI로 이동할 수 있는 것과 없는 것을 파악하며, 중복을 제거하고 재사용성을 높이기 위해 기존 구성 요소를 리팩터링해야 합니다. 이상적인 결과는 애플리케이션 특정 구성 요소가 애플리케이션 폴더로 이동하고, 재사용 가능한 “스마트” 구성 요소를 공유 폴더/라이브러리에 보관하여 모든 재사용 가능한 기능이 _하나의 구현_만 있도록 하는 것입니다.

현재 개발 중입니다. GitLab FE 모듈식 모놀리식을 통해 vue_shared와 같은 최상위 폴더에서 캡슐화를 어떻게 적용할지에 대한 업데이트를 확인하세요.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 조정자:

마일스톤 및 일정

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

문제 및 의존성

  • (주요 문제)

성공 지표

  • (잠재적 지표)

PostCSS로 마이그레이션하기

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

현재 상태

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

책임 팀

  • 작업 그룹:
  • 조정자:

이정표 및 일정

  • (핵심 이정표, 예상 완료 일정)

도전 과제 및 의존성

  • (주요 도전 과제)

성공 지표

  • (잠재적 지표)

협력 및 도구

시각적 테스트

우리는 시각적 테스트를 추가하는 과정 초기 단계에 있으며, 프레임워크를 수립해야 합니다. 구현이 결정되면, 이 문서를 업데이트하여 구체적인 내용을 포함할 것입니다.

현재 상태

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

책임 팀

  • 작업 그룹:
  • 조정자:

이정표 및 일정

  • (핵심 이정표, 예상 완료 일정)

도전 과제 및 의존성

  • (주요 도전 과제)

성공 지표

  • (잠재적 지표)

접근성 테스트

2023년, 우리는 접근성 테스트를 위한 도구를 결정했습니다. 우리는 기능 테스트에서 사용되는 axe-core gem을 선택하여 구성 요소를 개별적으로 테스트하기보다는 전체 뷰를 테스트하기로 했습니다. 자동화된 접근성 테스트 문서를 참조하여 언제, 어떻게 포함할 수 있는지 알아보세요. Semgrep을 사용하여 테스트가 있는지 확인하는 접근성 스캐너에서 우리의 진행 상황을 확인할 수 있습니다.

현재 상태

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

책임 팀

이정표 및 일정

  • (핵심 이정표, 예상 완료 일정)

도전 과제 및 의존성

  • (주요 도전 과제)

성공 지표

  • (잠재적 지표)