• 개요
• 비전
  • 가치
    • 안정성
    • 속도
    • 유지 가능성
  • 목표
  • 처음 참여하는 사람들
  • 유용한 링크
    • 계획
    • 테스팅
    • Pajamas 디자인 시스템
    • 프론트엔드 FAQ
    • 국제화 (i18n) 및 번역
    • 문제 해결
    • 브라우저 지원

프런트엔드 개발 지침

이 문서는 GitLab 프런트엔드 팀 전체에서 일관성과 품질을 보장하기 위한 다양한 가이드라인을 설명합니다.

개요

GitLab은 Ruby on Rails 위에 구축되었습니다. Haml 및 Vue.js를 사용하는 JavaScript 기반 프런트엔드를 사용합니다. Haml 페이지 위에 Vue를 사용해야 하는 시점이 분명하지 않다면, 이 설명을 읽어보세요.

Hamlit 사용에 따라 오는 제한 사항을 조심하세요.

CSS에 대해서는 유틸리티 기반 CSS 접근 방식을 사용합니다. CSS 유틸리티가 정의된 위치를 찾으려면 이 안내서의 SCSS 스타일 섹션을 참조하세요.

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

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

Vue에서 클라이언트 측 상태 관리를 할 때, 특정 기능의 필요에 따라 다음을 사용합니다.

• Apollo (GraphQL에 의존하는 애플리케이션의 기본 선택)
• Pinia (파일럿 단계)
• 상태를 가지는 컴포넌트.

Vuex는 더 이상 사용되지 않습니다 and 할 수 있는 한 멀어져 나가야 합니다.

앞으로 사용할 상태 관리자를 어떻게 선택할지 알아보세요: 어떻게 상태 관리자를 선택할지.

문자열 및 번역 복사에 대해서는 프런트엔드 유틸리티를 사용할 수 있습니다. 자세한 내용은 페이지를 번역 준비하기의 JavaScript 섹션을 참조하세요.

프런트엔드 자산을 사용하려면 Node (v12.22.1 이상)와 Yarn (v1.10.0 이상)이 필요합니다. 이들을 설치하는 방법은 설치 안내서에서 찾을 수 있습니다.

비전

프런트엔드 엔지니어로서, 우리는 사용자에게 기쁨을 주는 경험을 제공하기 위해 노력합니다. 우리는 항상 GitLab에 특히 적용되는 방법에 대해 생각해야 합니다: 훌륭한 GitLab 경험은 사용자 기반이 자신의 프로젝트를 보다 빠르고 확신을 가지고 출시하는 데 도움을 주는 것을 의미합니다. 즉, 우리 부서의 미래에 대한 선택을 할 때에는 항상 이를 우선시하려고 노력해야 합니다.

가치

우리는 세 가지 핵심 가치, 안정성, 속도 및 유지 가능성(SSM)을 정의합니다.

안정성

속도가 극히 중요하지만, 우리는 GitLab이 이제 기업급 플랫폼이 되어 더 작은 MVC조차도 안정적이고 테스트가 완료되었으며 좋은 아키텍처를 가진 것을 요구한다고 믿습니다. 우리는 사용자가 각자의 소프트웨어에 대한 확신을 품을 수 있기를 바라는 핵심 가치의 연장선 상에 있습니다. 이를 위해 우리 소프트웨어에 대한 확신은 절대적으로 최대화되어야 합니다.

속도

사용자는 GitLab 응용프로그램을 쉽게 탐색할 수 있어야 합니다. 이것은 빠른 로드 시간, 찾기 쉬운 페이지, 명확한 UX 및 무마할 때에도 목표를 쉽게 달성할 수 있다는 전반적인 감각을 의미합니다.

또한, 우리는 우리의 속도가 개발자들에게 느껴지고 감사받기를 원합니다. 이는 우리 부서 전체적으로 성공을 빠르게 달성할 수 있도록 하는 프로세스, 도구 및 문서에 많은 노력과 생각을 기울이는 것을 의미합니다. 이것은 엔지니어들에게 이점을 주지만, 또한 품질이 높은 기능을 더 빠른 속도로 제공받을 수 있는 사용자에게도 혜택을 주는 것입니다.

유지 가능성

GitLab은 이제 대규모 기업급 소프트웨어이며 종종 최상의 경험을 제공하기 위해 복잡한 코드가 필요합니다. 복잡성은 필수적이지만, 우리는 그것이 지나치게 커지지 않도록 경계를 지켜야 합니다. 이를 최소화하기 위해 우리는 코드베이스를 유지 가능하도록 중점을 두려고 합니다. 이를 위해 다음을 수행합니다.

• 자주 마주치는 문제를 해결하는 도구를 만들고 이를 쉽게 찾을 수 있도록 함.
• 문제 해결 방법에 대한 더 나은 문서 작성.
• 코드베이스에서 쉽게 추가하거나 제거할 수 있는 느슨하게 결합된 구성 요소 작성.
• 더 이상 허용할 수 없다고 판단되는 오래된 기술이나 패턴을 제거함.

이러한 측면에 중점을 두어 엔지니어들이 복잡성을 잘 정의된 범위 내에서 포함하고 빨리 동료들과 공유할 수 있도록 할 것입니다.

목표

우리의 가치가 정의된 이제 우리의 목표를 이러한 가치에 기반하여 결정하고 GitLab에서 무엇을 달성하고 싶은지 결정할 수 있습니다.

• 가능한 낮은 FID, LCP 및 페이지 간 탐색 시간
• UI와 상호 작용 시 최소한의 페이지 다시로드
• 페이지 당 가능한 적은 수의 Vue 애플리케이션 사용하기 (vue.md#avoid-multiple-vue-applications-on-the-page)
• Ruby ViewComponents를 사용하여 간단한 페이지를 만들고 가능한 경우 Vue 오버헤드를 피하기
• VueX에서 멀어져 나가기, 그리고 더 중요한 것은 Apollo와 VueX를 함께 사용 중단하기
• 코드베이스에서 jQuery 제거
• 시각적 테스트 프레임워크 추가
• CSS 번들 크기 최소화
• CSS의 인지적 부담을 줄이고 유지 관리성 개선
• 파이프라인 속도 개선
• 문서화된 더 나은 공유 구성 요소 집합 작성

우리는 프런트엔드 목표 섹션에서 GitLab 프런트엔드의 미래를 어떻게 바라보는지에 대한 상세한 설명을 가지고 있습니다.

처음 참여하는 사람들

처음 참여하는 분들이라면, GitLab 개발에 기여하기를 참조하세요.

첫 번째 병합 요청을 생성하려거나 GitLab 프런트엔드 작업흐름을 검토해야 하는 경우, 시작하기를 참조하세요.

GitLab 프런트엔드 개발에 대한 안내를 받으려면 프런트엔드 입문 과정을 시청할 수 있으며, 이는 구조화된 6주 교육 과정을 제공합니다.

유용한 링크

계획

현재 프론트엔드 기획들을 찾을 수 있는데, 이것은 교차 기능적인 영향을 미치는 에픽들로 이루어져 있습니다. 라벨 frontend-initiative로 표시된 것을 찾아보세요.

테스팅

우리가 어떻게 프론트엔드 테스트를 작성하고, GitLab 테스트 스위트를 실행하며, 테스트와 관련된 문제를 해결하는 방법입니다.

Pajamas 디자인 시스템

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

프론트엔드 FAQ

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

국제화 (i18n) 및 번역

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

문제 해결

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

브라우저 지원

지원되는 브라우저에 대해서는 요구 사항을 참조하세요.

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