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

프론트엔드 개발 지침

본 문서는 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 경험은 사용자 기반이 자신의 소프트웨어를 보다 빠르고 자신감 있게 출시할 수 있도록 돕는 것을 의미합니다. 이것은 우리 부서의 미래에 대한 선택과 마주쳤을 때, 우리는 항상 이것을 최우선으로 생각해야 한다는 것을 의미합니다.

가치관

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

안정성

속도는 매우 중요하지만, 우리는 GitLab이 이제 기업급 플랫폼이 되어 가장 작은 MVC조차도 안정적이고 테스트되었으며 훌륭한 아키텍처를 갖춰야 하는 것으로 믿습니다. 우리는 사용자 기대치를 낮추거나 혼란을 초래하거나 일반적으로 사용자의 기대를 낮추는 코드라도 함병시키지 않아야 합니다.

이는 우리 사용자가 자신의 소프트웨어에 자신감을 가져야 한다는 핵심 가치의 확장입니다. 이는 우리의 소프트웨어에 대한 우리 자신의 신뢰도가 절대적으로 최대여야 함을 의미합니다.

속도

사용자는 GitLab 응용 프로그램을 쉽게 탐색할 수 있어야 합니다. 이는 빠른로드 시간, 쉽게 찾을 수 있는 페이지, 명확한 UX 및 전반적으로 어떠한 마찰 없이 목표를 달성할 수 있다는 느낌을 함축합니다.

또한 속도가 개발자들에게 느껴지고 그에 대한 감사함을 느끼길 원합니다. 즉, 우리는 성공을 더 빨리 이루기 위한 프로세스, 도구 및 설명에 많은 노력과 고민을 기울여야 합니다. 이는 엔지니어로서의 이점 뿐만 아니라 더 빠른 속도로 품질 있는 기능을 제공하는 최종 사용자에게 이로움을 주게 됩니다.

유지보수성

GitLab은 이제 대규모 기업급 소프트웨어이며, 최상의 경험을 제공하기 위해 때로는 복잡한 코드가 필요합니다. 복잡성은 필수적이지만, 더 이상 커지지 않도록 주의를 기울여야 합니다. 이를 최소화하기 위해 우리는 코드베이스 내에서 복잡성을 캡슐화하는 데 주안점을 두고 싶습니다. 이를 위해 다음을 실시합니다:

• 자주 마주치는 문제를 해결하는 도구 작성 및 이들을 쉽게 찾을 수 있도록 만듭니다.
• 문제 해결 방법에 대해 더 나은 문서 작성.
• 우리 코드베이스에서 쉽게 추가하거나 제거할 수 있는 느슨하게 결합된 구성 요소 작성.
• 더 이상 허용되지 않는 것으로 판단되는 과거 기술이나 패턴 삭제.

이러한 측면에 중점을 두어 엔지니어가 복잡성을 명확히 정의된 경계 내에 포착하고 빠르게 동료들과 공유할 수 있도록 하고자 합니다.

목표

우리의 가치가 정의된 지금, 우리는 이를 기반으로 목표를 설정하고 GitLab에서 이를 기억하여 어떤 목표를 달성하고 싶은지 결정할 수 있습니다.

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

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

처음으로 기여하는 사람들

처음으로 기여하는 경우, GitLab 개발에 기여하기를 참조하십시오.

첫 번째 병합 요청을 생성하거나 GitLab 프론트엔드 워크플로우를 검토해야 하는 경우, 시작하기를 참조하십시오.

GitLab에서 프론트엔드 개발에 대해 안내하는 구조화된 6주 커리큘럼을 제공하는 프론트엔드 온보딩 코스를 시청할 수 있습니다.

유용한 링크

이니셔티브

현재 프론트엔드 이니셔티브 및 교차 기능적 영향을 미치는 에픽을 찾을 수 있습니다. frontend-initiative 라벨이 부착된 이니셔티브입니다.

테스팅

우리가 어떻게 프론트엔드 테스트를 작성하고, GitLab 테스트 스위트를 실행하고, 테스트 관련 문제를 디버깅하는지에 대한 정보입니다.

Pajamas 디자인 시스템

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

프론트엔드 FAQ

일반적인 작은 도움이 되는 정보에 대한 프론트엔드 FAQ를 읽어보십시오.

국제화 (i18n) 및 번역

프론트엔드 국제화 지원에 대한 설명이 포함된 이 문서에서 확인할 수 있습니다. 가이드의 externalization 부분에서 사용 가능한 도우미/메서드에 대해 설명합니다.

문제 해결

프론트엔드 개발 문제가 발생하는 경우, 문제를 해결하는 데 도움이 되는 이 가이드를 확인하십시오.

브라우저 지원

지원되는 브라우저에 대한 정보는 요구 사항에서 확인하십시오.

지원되는 브라우저에서 테스트하려면 BrowserStack를 사용하십시오. 지원되는 브라우저로 테스트하기 위해 GitLab의 Engineering 보안함에 저장된 자격 증명으로 BrowserStack에 로그인하십시오.