프론트엔드 목표
이 섹션은 GitLab 프론트엔드의 원하는 상태 를 정의하고 앞으로 몇 년 동안 어떻게 보게 될지에 대해 설명합니다. 이는 동적으로 변화하며 기술과 팀 역학이 진화함에 따라 적응될 것입니다.
기술
Vue@latest
Vue의 최신 버전을 유지함으로써, GitLab 프론트엔드는 가장 효율적이고 안전하며 기능이 풍부한 프레임워크 능력을 활용합니다. Vue의 최신 버전(3)은 향상된 성능과 더 직관적인 API를 제공하여 개발자 경험과 애플리케이션 성능을 향상시킵니다.
현재 상태
- 2023년 12월 현재: GitLab은 현재 Vue 2.x를 사용 중입니다.
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹: Vue.js 3 마이그레이션 작업 그룹
- 운영자: Sam Beckham, Engineering Manager, Manage:Foundations
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- Monolith에서 @vue/compat 사용
상태 관리
전역 상태 관리가 필요할 때는 다른 상태 관리 라이브러리 대신에 Apollo에서 이루어져야 합니다. 자세한 내용은 Vuex에서 마이그레이션을 참조하세요.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹:
- 운영자:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (잠재적인 지표)
기본 활용
적당한 경우에는 여전히 HAML을 Vue 대신 사용할 것입니다. 언제 Vue 애플리케이션을 추가해야 하는지에 대한 자세한 내용은 Vue 애플리케이션을 추가해야 하는 경우를 참조하세요.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹:
- 운영자:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (잠재적인 지표)
jQuery 완전히 제거
2019년에는 더 이상 jQuery를 사용하지 않기로 하였지만, 완전히 제거를 우선 순위로 두지 않았습니다. 여기서의 목표는 주요 GitLab 코드베이스에서 더 이상 어떠한 참조도 갖지 않게 하는 것입니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹:
- 운영자:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (잠재적인 지표)
종속성 관리
Vue의 최신 주요 버전을 유지하는 것과 유사하게, 가능한 한 종속성의 최신 버전에 가깝게 유지해야 합니다. 업그레이드의 이점이 업그레이드를 하지 않을 이점보다 크지 않은 경우를 제외하고, 최소한 매년 종속성을 심사하여 업그레이드해야 할 지 여부를 평가할 것입니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹:
- 운영자:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (잠재적인 지표)
최선의 실행 방법
확장성과 성능
클러스터 SPA
현재 GitLab은 주로 Rails 아키텍처와 Rails 라우팅을 따르고 있는데, 이는 우리가 경로를 변경할 때마다 페이지를 다시로드해야 한다는 것을 의미합니다. 이로 인해 오랜 로딩 시간이 소요되는데, 그 이유는:
- HAML 페이지를 렌더링하는 것;
- Vue 애플리케이션을 마운트하는 것(있는 경우);
- 이러한 애플리케이션의 데이터를 가져오는 것
이 과정이 너무 자주 반복됩니다. 이러한 긴 과정을 사용자가 통과하는 횟수를 줄이는 것이 이상적일 것입니다. GitLab을 단일 페이지 애플리케이션으로 변환하면 가능할 것입니다. 그러나 이것은 상당한 리팩터링이 필요하기 때문에 단기/중기적 목표로 달성하기 어렵습니다.
실제적인 목표는 여러 개의 SPAs 경험으로 이동하는 것입니다. 우리는 사용자 흐름을 형성하는 페이지 클러스터 를 정의하고, 이 클러스터를 Rails 라우팅에서 클라이언트 측 라우팅으로 이동하는 것입니다. 이렇게 하면 HAML에서 모든 관련 컨텍스트를 한 번에 로드하고 경로에 따라 API에서 추가 데이터를 모두 가져올 수 있습니다. 클러스터의 예시로는 다음과 같은 페이지가 있을 수 있습니다:
- 이슈 목록
- 이슈 보드
- 이슈 상세 페이지
- 새로운 이슈
- 이슈 편집
모든 페이지는 동일한 컨텍스트(프로젝트 경로, 현재 사용자 등)를 갖고 있습니다. 이슈별 매개변수(이슈 iid)로 더 많은 데이터를 손쉽게 가져와 클라이언트에 결과를 저장할 수 있습니다(따라서 동일한 이슈를 여는 것은 더 많은 API 호출이 필요하지 않습니다). 이것은 이슈를 탐색하는 데 사용자 경험을 향상시킵니다.
클러스터 간 탐색에 대해서는 여전히 Rails 라우팅을 의존할 수 있습니다. 이러한 경우는 클러스터 내에서 탐색하는 것보다 비교적 희소해야 합니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간략한 설명)
책임 있는 팀
- 작업 그룹:
- 운영자:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (잠재적인 지표)
재사용 가능한 구성 요소
현재, 일반적으로 재사용할 수 있는 구성 요소는 두 곳에 유지됩니다.
- GitLab UI
-
vue_shared폴더
GitLab UI는 잘 문서화되어 있고 구성 요소는 Vue 애플리케이션 어디에서나 재사용할 수 있는 충분히 추상화된 상태이지만, vue_shared 구성 요소는 다소 혼돈스럽고 종종 특정 컨텍스트에서만 사용될 수 있으며(예: 기존 Vuex 스토어에 바인딩할 수 있음) 중복이 있습니다(노트에 대해 여러 구성 요소가 있음).
우리는 vue_shared를 심사해야 하며 GitLab UI로 옮길 수 있는 것과 옮길 수 없는 것을 찾아내고, 기존 구성 요소를 리팩토링하여 중복을 제거하고 재사용성을 높여야 합니다. 이상적인 결과는 애플리케이션별 구성 요소를 애플리케이션 폴더로 이동시키고 재사용 가능한 “스마트” 구성 요소를 공유 폴더/라이브러리에 유지하여 재사용 가능한 기능이 하나의 구현만 가지도록 하는 것입니다.
현재 이 내용은 개발 중입니다. vue_shared와 같은 최상위 폴더에서 캡슐화를 어떻게 강화할지에 대한 업데이트는 GitLab Moduler Monolith for FE에서 확인하세요.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간단한 설명)
책임 있는 팀
- 작업 그룹:
- 패실리테이터:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (가능한 지표)
PostCSS로 마이그레이션
SASS 컴파일은 전체 프론트엔드 컴파일 시간의 거의 절반을 차지합니다. 이로 인해 파이프라인이 예상보다 더 오랫동안 실행됩니다. PostCSS로 마이그레이션하면 컴파일 시간을 크게 개선할 수 있습니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간단한 설명)
책임 있는 팀
- 작업 그룹:
- 패실리테이터:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (가능한 지표)
협업 및 도구
시각적 테스팅
시각적 테스팅을 추가하는 과정은 초기 단계입니다만, 우리는 이미 테스트를 수행할 수 있는 프레임워크를 갖추어야 합니다. 구현 방법이 결정되면 이 문서를 업데이트하여 구체적인 내용을 포함할 것입니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간단한 설명)
책임 있는 팀
- 작업 그룹:
- 패실리테이터:
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (가능한 지표)
접근성 테스팅
2023년에 접근성 테스팅의 도구를 결정했습니다. 우리는 기능 테스트에서 사용되는 axe-core gem을 선택하여 구성 요소가 아니라 전체 뷰를 테스트하는 것으로 결정했습니다. 이를 알아보려면 자동화된 접근성 테스팅에 대한 문서를 확인하세요. Semgrep를 사용하여 테스트가 있는지 여부를 확인하는 접근성 스캐너로 진행 상황을 확인할 수 있습니다.
현재 상태
- 2023년 12월 현재: (상태)
- 진행 상황: (진행 상황에 대한 간단한 설명)
책임 있는 팀
- 작업 그룹: 제품 접근성 그룹
- 패실리테이터: Paulina Sędłak-Jakubowska
마일스톤 및 일정
- (주요 마일스톤, 예상 완료일)
도전과 의존성
- (주요 도전 요소)
성공 지표
- (가능한 지표)
도움말