프론트엔드 개발 가이드

이 문서는 GitLab 프론트엔드 팀 전반에 걸쳐 일관성과 품질을 보장하기 위한 다양한 지침을 설명합니다.

개요

GitLab은 Ruby on Rails 위에 구축되었습니다. Haml 및 Vue.js를 사용한 JavaScript 기반 프론트엔드를 사용합니다. Haml 페이지 위에 Vue를 사용할 때 확신이 없다면 이 설명을 참조하세요.

Hamlit 사용에 따른 제한사항을 주의해야 합니다.

CSS의 경우, 유틸리티 기반 CSS 접근 방식을 사용합니다. GitLab은 gitlab-ui 프로젝트 내에 포장된 자체 CSS 유틸리티를 사용하며, 리포지터리나 UNPKG에서 확인할 수 있습니다. SCSS 클래스를 추가하거나 사용하기 전에 이를 우선 사용하는 것을 권장합니다.

또한 SCSS 및 현대적인 ECMAScript 표준을 지원하는 단순 JavaScript를 Babel 및 webpack을 통해 사용합니다.

API 호출 시, GraphQL을 첫 번째 선택으로 사용합니다. GitLab REST API를 사용하는 경우도 있지만, 가능한 경우 항상 GraphQL을 기본으로 사용해야 합니다.

전역 상태 관리자로 Apollo와 GraphQL 클라이언트를 사용합니다. VueX는 여전히 코드베이스 전반에 걸쳐 사용 중이지만, 권장 전역 상태 관리자는 아닙니다. VueX 및 Apollo을 함께 사용해서는 안 되며 가능한 경우 새로운 VueX 리포지터리를 추가하는 것을 피해야 합니다.

문자열과 번역을 사용하려면 프론트엔드 유틸리티를 사용할 수 있습니다. 자세한 정보는 페이지를 번역하는 방법의 JavaScript 섹션을 참조하세요.

프론트엔드 자산 작업에는 Node (v12.22.1 이상) 및 Yarn (v1.10.0 이상)이 필요합니다. 이를 설치하는 방법은 설치 가이드에서 찾을 수 있습니다.

비전

프론트엔드 엔지니어로서, 우리는 사용자에게 기쁨을 주는 경험을 제공하기 위해 노력합니다. 우리는 항상 GitLab에서 특히 이것이 어떻게 적용되는지를 생각해야 합니다. 훌륭한 GitLab 경험은 우리 사용자들이 자신의 소프트웨어를 더 빨리 그리고 더 확신을 가지고 출시하는 데 도움이 됨을 의미합니다. 이는 우리 부서의 미래에 대한 선택을 직면했을 때 항상 이를 최우선으로 두어야 한다는 것을 의미합니다.

가치

우리는 안정성, 속도 및 유지보수성 (SSM)이라는 세 가지 핵심 가치를 정의합니다.

안정성

속도는 매우 중요하지만, GitLab은 이제 기업급 플랫폼으로, 가장 작은 MVC라도 안정적이고 테스트된 양호한 아키텍처와 함께여야 한다고 믿습니다. 우리는 우리 사용자가 자신의 소프트웨어에 대한 확신을 가질 수 있기를 원하기 때문에 우리 소프트웨어에 대한 우리 자신의 확신은 절대적으로 최대여야 합니다.

속도

사용자는 GitLab 애플리케이션을 쉽게 탐색할 수 있어야 합니다. 이는 빠른 로드 시간, 쉽게 찾을 수 있는 페이지, 명확한 UX 및 마침내 마찰 없이 목표를 달성할 수 있다는 전반적인 느낌을 의미합니다.

게다가, 우리는 속도가 우리 개발자들에 의해 느껴지고 감사해져야 한다고 믿습니다. 이는 우리가 우리 부서 전반에서 성공을 더 빨리 이룰 수 있도록 하는 프로세스, 도구 및 문서에 많은 노력과 생각을 담아야 함을 의미합니다. 이는 엔지니어들에게 이점을 제공할 뿐만 아니라 품질 기능을 더 빠른 속도로 받게 되는 우리 사용자들에게도 혜택이 됩니다.

유지보수성

GitLab은 이제 크고 기업급 소프트웨어로, 최상의 경험을 제공하기 위해 복잡한 코드가 종종 필요합니다. 복잡성은 필수적이지만, 너무 더 크게 자라나지 않도록 주의해야 합니다. 이를 최소화하기 위해 복잡성을 캡슐화하는 데 초점을 맞출 것입니다. 이를 위해 우리는 다음을 수행합니다:

자주 어려움을 겪는 문제를 해결하는 도구를 개발하고 이를 쉽게 찾아볼 수 있도록 함.
문제 해결 방법에 대한 더 나은 문서 작성.
우리 코드베이스에서 쉽게 추가하거나 제거할 수 있는 느슨하게 결합된 컴포넌트 작성.
우리가 더 이상 사용할 수 없다고 생각하는 오래된 기술이나 패턴 제거.

이러한 측면에 중점을 두어 엔지니어들이 복잡성을 잘 정해진 경계 내에서 견딜 수 있도록 하고 빠르게 동료들과 공유할 수 있도록 하고자 합니다.

목표

가치가 정의되었으므로 이를 기반으로 목표를 설정하고 GitLab에서 이를 어떻게 달성하고자 하는지를 결정할 수 있습니다.

가능한 한 낮은 FID, LCP 및 크로스 페이지 탐색 시간
UI와 상호 작용할 때 최소한의 페이지 새로 고침
페이지 당 가능한 Vue 애플리케이션 수를 최소화
간단한 페이지에 대해 Ruby ViewComponents 사용하며 가능한 경우 Vue 오버헤드 피하기
VueX에서 이동, 하지만 더 중요한 것은 Apollo와 VueX를 함께 사용 중지하기
코드베이스에서 jQuery 제거
시각적 테스트 프레임워크 추가
CSS 번들 크기 최소화
CSS의 인지 부담 줄이기 및 유지보수성 향상
파이프라인 속도 개선
문서화된 더 나은 일련의 공유 컴포넌트 구축

우리는 프론트엔드 목표 섹션에서 향후의 GitLab 프론트엔드를 어떻게 볼지에 대해 자세한 설명이 되어 있습니다.

초보 기여자

첫 번째 기여자라면 GitLab 개발에 기여하기를 참조하세요.

첫 번째 Merge Request을 생성하거나 GitLab 프론트엔드 워크플로우를 검토해야 하는 경우 시작하기를 참조하세요.

GitLab에서 프론트엔드 개발을 실습하고 싶다면 구조화된 6주 교육과정을 제공하는 프론트엔드 온보딩 코스를 시청하세요.

유용한 링크

이니셔티브

현재의 프론트엔드 이니셔티브를 찾으려면 교차 기능 영향을 미치는 에픽에 라벨 frontend-initiative을 확인하세요.

테스팅

우리가 어떻게 프론트엔드 테스트를 작성하고, GitLab 테스트 스위트를 실행하며, 테스트와 관련된 문제를 디버그하는지에 대해 알아봅니다.

Pajamas 디자인 시스템

기술적 사용 및 가이드라인을 가진 재사용 가능한 컴포넌트는 Pajamas 디자인 시스템에서 찾을 수 있습니다.

프론트엔드 FAQ

일반적인 작은 유용한 정보에 대한 프론트엔드 FAQ를 읽어보세요.

다국어화 (i18n) 및 번역

프론트엔드 다국어화 지원은 이 문서에 설명되어 있습니다. 가이드의 externalization 부분에서 사용 가능한 도우미/메소드에 대해 설명합니다.

문제 해결

프론트엔드 개발 문제에 직면했나요? 문제를 해결하는 데 도움이 되는 이 가이드를 확인하세요.

브라우저 지원

지원되는 브라우저에 대해 자세히 알아보려면 요구 사항을 참조하세요.

지원되는 브라우저에서 테스트하려면 BrowserStack을 사용하세요. 지원되는 브라우저로 테스트하려면 GitLab의 Engineering 보안을 위해 저장된 자격 증명을 사용하여 공유 1Password 계정에 로그인하세요.