프론트엔드 목표

이 섹션은 GitLab 프론트엔드의 _희망하는 상태_와 앞으로 몇 년 동안의 전망에 대해 정의합니다. 이것은 계속 변화할 생생한 문서이며 기술과 팀의 역학이 발전함에 따라 적응합니다.

기술

Vue@latest

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

현재 상태

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

책임 있는 팀

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

상태 관리

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

현재 상태

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

책임 있는 팀

  • Task 그룹:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

기본으로 HAML 사용

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

현재 상태

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

책임 있는 팀

  • Task Group:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

jQuery 완전히 제거

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

현재 상태

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

책임 있는 팀

  • Task 그룹:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

종속성 관리

Vue의 최신 주요 버전과 유사하게, 가능한 한 종속성의 최신 버전을 유지하려고 해야 합니다. 업그레이드의 이점이 업그레이드의 단점을 상쇄하지 않는 한, 최소한 매년 종속성을 심사하여 업그레이드할지 여부를 평가할 것입니다.

현재 상태

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

책임 있는 팀

  • Task 그룹:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

베스트 프랙티스

확장성과 성능

클러스터 SPA

현재 GitLab은 대부분 Rails 아키텍처와 Rails 라우팅을 따르기 때문에 라우팅을 변경할 때마다 페이지를 다시로드해야 합니다. 이로 인해 긴로딩 시간이 소요되는데, 이는 다음을 수반합니다.

  • HAML 페이지 렌더링
  • Vue 애플리케이션 마운트(필요 시)
  • 이러한 애플리케이션의 데이터 가져오기

이러한 긴 프로세스를 사용자가 겪어야 하는 횟수를 줄이는 것이 이상적입니다. GitLab을 단일 페이지 애플리케이션으로 변환함으로써 가능하지만, 이것은 중요한 재구성이 필요하며 단기/중기적인 목표로 달성하기 어려운 것입니다.

현실적인 목표는 클러스터에서 사용자 흐름을 형성하는 페이지를 정의하고, 라우팅을 클라이언트 측 라우팅으로 변경하여 이 클러스터를 페이지에서 렌더링하도록 하는 것입니다. 이렇게 하면 HAML에서 모든 관련 컨텍스트를 한 번에 불러오고, 라우트에 따라 API에서 추가 데이터를 모두 가져올 수 있습니다. 클러스터의 예로는 다음 페이지가 있을 수 있습니다.

  • 이슈 페이지
  • 이슈 보드 페이지
  • 이슈 상세 페이지
  • 새 이슈 페이지
  • 이슈 편집

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

클러스터 간 탐색에 대해서는 여전히 Rails 라우팅을 사용할 수 있습니다. 이러한 경우는 클러스터 내 탐색보다 상대적으로 덜 발생해야 합니다.

현재 상태

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

책임 있는 팀

  • Task 그룹:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

재사용 가능한 컴포넌트

현재, 우리는 일반적으로 재사용 가능한 컴포넌트를 두 곳에 유지합니다.

  • GitLab UI
  • vue_shared 폴더

GitLab UI는 잘 문서화되어 있고 컴포넌트가 어디서든 재사용될 수 있을 만큼 충분히 추상화되어 있지만, vue_shared 컴포넌트는 다소 혼란스럽고 종종 특정 맥락에서만 사용할 수 있으며(예를 들어 기존 Vuex 저장소에 바인딩될 수 있음) 중복이 있습니다(notes를 위한 여러 컴포넌트가 있습니다).

우리는 vue_shared를 심사하고 GitLab UI로 이동할 수 있는 것과 할 수 없는 것을 찾아내고, 중복을 제거하고 재사용성을 높이기 위해 기존 컴포넌트를 리팩터링해야 합니다. 이상적인 결과는 응용프로그램별 컴포넌트를 응용프로그램 폴더로 이동시키고, 재사용 가능한 “스마트” 컴포넌트를 공유 폴더/라이브러리에 유지함으로써 모든 재사용 기능의 단일 구현만 갖도록 하는 것입니다.

현재 이것은 개발 중입니다. GitLab Modul Monolith for FE를 참조하여 최상위 폴더(예: vue_shared)에 캡슐화를 어떻게 강요할 것인지에 대한 업데이트를 확인하십시오.

현재 상태

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

책임 있는 팀

  • Task 그룹:
  • Facilitator:

마일스톤 및 일정

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

도전과 의존성

  • (중요한 도전 사항)

성공 지표

  • (잠재적인 지표)

PostCSS로 이주하기

SASS 컴파일은 총 프론트엔드 컴파일 시간의 거의 절반을 차지합니다. 이는 우리의 파이프라인이 원래보다 더 오래 실행되게 만듭니다. PostCSS로 마이그레이션하면 컴파일 시간을 중요한 수준으로 개선할 것으로 예상됩니다.

현재 상황

  • 2023년 12월 현재: (상태)
  • 진행 상황: (진행 상세 설명)

책임 있는 팀

  • 작업 그룹:
  • 용이성 제공자:

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (잠재적인 지표)

협업 및 도구

시각적 테스팅

시각적 테스팅 추가 프로세스는 초기 단계입니다. 그러나 프레임워크가 구축되어야 합니다. 구현 방법이 결정되면 구체적인 내용을 포함하여 이 문서를 업데이트할 것입니다.

현재 상황

  • 2023년 12월 현재: (상태)
  • 진행 상황: (진행 상세 설명)

책임 있는 팀

  • 작업 그룹:
  • 용이성 제공자:

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (잠재적인 지표)

접근성 테스팅

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

현재 상황

  • 2023년 12월 현재: (상태)
  • 진행 상황: (진행 상세 설명)

책임 있는 팀

마일스톤 및 일정

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

도전과 의존성

  • (주요 도전 요소)

성공 지표

  • (잠재적인 지표)