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

프론트엔드 개발 가이드라인

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

개요

GitLab은 Ruby on Rails 위에 구축되었습니다. Haml과 JavaScript 기반의 프론트엔드(Vue.js)를 사용합니다. Haml 페이지 위에 Vue를 언제 사용해야 할지 확실하지 않다면, 이 설명을 참고하세요.

Hamlit 사용의 한계에 주의하세요.

CSS에 관해서는, 우리는 유틸리티 기반 CSS 접근 방식을 사용합니다. CSS 유틸리티가 정의된 위치에 대한 정보는 이 가이드의 SCSS 스타일 섹션을 참조하세요.

우리는 또한 SCSS와 일반 JavaScript를 사용하며, 현대 ECMAScript 표준은 Babel을 통해 지원되며, webpack을 통해 ES 모듈도 지원됩니다.

API 호출을 할 때는 GraphQL을 첫 번째 선택으로 사용합니다. 새로운 간단한 HAML 페이지를 생성할 때나 코드베이스의 레거시 부분에서는 GitLab REST API가 사용되기도 하지만, 가능할 때는 항상 GraphQL을 기본으로 삼아야 합니다.

Vue에서 클라이언트 사이드 상태 관리를 특정 기능의 요구 사항에 따라 다음을 사용합니다:

• Apollo (신뢰하는 앱의 기본 선택 GraphQL)
• Pinia (파일럿 단계)
• 상태가 있는 컴포넌트.

Vuex는 더 이상 사용되지 않습니다 및 가능하다면 이동해야 합니다.

배열: 어떤 상태 관리자를 사용해야 하는지 어떻게 아나요?

복사 문자열 및 번역에 대해서는 프론트엔드 유틸리티가 제공됩니다. 번역을 위한 페이지 준비의 JavaScript 섹션을 참조하세요: Preparing a page for translation.

프론트엔드 자산 작업에는 Node(버전 12.22.1 이상)와 Yarn(버전 1.10.0 이상)이 필요합니다. 설치 방법에 대한 정보는 설치 가이드에서 확인할 수 있습니다.

비전

프론트엔드 엔지니어로서 우리는 사용자에게 즐거운 경험을 제공하기 위해 노력합니다. 우리는 이것이 GitLab에 구체적으로 어떻게 적용되는지 항상 생각해야 합니다: 훌륭한 GitLab 경험은 우리의 사용자 기반이 자신의 프로젝트를 더 빠르고 자신 있게 발송할 수 있도록 돕는 것을 의미합니다. 이는 우리 부서의 미래에 대한 선택에 직면할 때마다 이를 최우선으로 고려해야 함을 의미합니다.

가치

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

안정성

비록 속도가 매우 중요하지만, 우리는 GitLab이 이제 기업 수준의 플랫폼이며 가장 작은 MVC조차도 안정적이고, 테스트되며, 좋은 아키텍처를 가져야 한다고 믿습니다. 성능 저하, 혼란 또는 일반적으로 사용자 기대치를 낮출 수 있는 코드는 MVC라도 병합해서는 안 됩니다.

이는 사용자가 자신의 소프트웨어에 대한 신뢰를 가지도록 하려는 핵심 가치의 확장입니다. 그렇게 하려면, 그들은 먼저 GitLab에 대한 자신감을 가져야 합니다. 이는 우리의 소프트웨어에 대한 신뢰도가 절대적으로 최대치여야 함을 의미합니다.

속도

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

또한, 우리는 우리의 속도가 개발자들에게 전달되고 감사받길 원합니다. 이는 우리가 우리 부서에서 더 빠르게 성공을 달성하는 데 도움이 되는 프로세스, 도구 및 문서에 많은 노력과 생각을 기울여야 함을 의미합니다. 이는 엔지니어로서 우리에게 이익이 될 뿐만 아니라, 더 빠른 속도로 품질 높은 기능을 받는 사용자들에게도 이익이 됩니다.

유지보수성

GitLab은 이제 대규모의 기업용 소프트웨어로, 최고의 경험을 제공하기 위해 종종 복잡한 코드가 필요합니다. 비록 복잡성이 필수적이긴 하지만, 우리는 그것이 더 이상 자라지 않도록 늘 경계해야 합니다. 이를 최소화하기 위해 우리는 복잡성을 캡슐화하여 코드베이스를 유지 관리 가능하도록 만드는 데 집중하고자 합니다. 이는 다음을 통해 이루어집니다:

• 일반적으로 발생하는 문제를 해결하는 도구를 만들고 이를 쉽게 발견할 수 있도록 합니다.
• 문제를 해결하는 방법에 대한 더 나은 문서를 작성합니다.
• 코드베이스에 쉽게 추가하거나 제거할 수 있는 느슨하게 결합된 구성 요소를 작성합니다.
• 더 이상 수용할 수 없다고 판단되는 오래된 기술이나 패턴을 제거합니다.

이러한 측면에 집중함으로써, 우리는 엔지니어가 복잡성을 잘 정의된 경계 내에서 관리하고 동료들과 신속하게 공유할 수 있도록 목표하고 있습니다.

목표

우리의 가치가 정의되었으므로, 우리는 이러한 가치를 바탕으로 목표를 설정하고 GitLab에서 이루고자 하는 바를 결정할 수 있습니다.

• 가능한 최소한의 FID, LCP 및 교차 페이지 탐색 시간
• UI와 상호작용할 때 최소한의 페이지 새로 고침
• 페이지당 가능한 적은 Vue 애플리케이션을 유지
• 간단한 페이지에 Ruby ViewComponents를 활용하고 가능하면 Vue 오버헤드를 피함
• VueX에서 마이그레이션, 하지만 더욱 시급하게는 Apollo와 VueX를 함께 사용하는 것을 중단
• 코드베이스에서 jQuery 제거
• 시각적 테스트 프레임워크 추가
• CSS 번들 크기를 최소화
• CSS의 인지적 오버헤드를 줄이고 유지보수성 향상
• 파이프라인 속도 개선
• 문서화된 공유 구성 요소의 더 나은 세트 구축

우리는 프론트엔드 목표 섹션에서 GitLab 프론트엔드를 미래에 어떻게 볼 것인지에 대한 자세한 설명을 가지고 있습니다.

첫 기여자

첫 기여자라면, GitLab 개발 기여하기를 참고하세요.

첫 번째 병합 요청을 생성할 준비가 되었거나, GitLab 프론트엔드 워크플로를 검토할 필요가 있다면 시작하기를 참고하세요.

GitLab에서 프론트엔드 개발에 대한 안내된 소개를 원한다면, 프론트엔드 온보딩 과정을 시청할 수 있으며, 이는 6주 구조화된 커리큘럼을 제공합니다.

유용한 링크

이니셔티브

현재의 프론트엔드 이니셔티브는 교차 기능적 영향을 가진 에픽에서 찾을 수 있으며, frontend-initiative라는 레이블이 부착되어 있습니다.

테스트

우리가 프론트엔드 테스트를 작성하고, GitLab 테스트 스위트를 실행하며, 테스트 관련 문제를 디버깅하는 방법입니다.

Pajamas 디자인 시스템

재사용 가능한 구성 요소와 기술 및 사용 지침은 우리의 Pajamas 디자인 시스템에서 찾을 수 있습니다.

프론트엔드 FAQ

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

국제화 (i18n) 및 번역

프론트엔드 국제화 지원은 GitLab을 귀하의 언어로 번역하기에서 설명됩니다.

가이드의 외부화 부분은 사용 가능한 도우미/메서드에 대해 설명합니다.

문제 해결

프론트엔드 개발 문제에 직면하셨나요? 이 문제 해결 가이드를 확인하여 문제를 해결하세요.

브라우저 지원

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

지원되는 브라우저로 테스트하려면 BrowserStack을 사용하세요.

Engineering Vault에 저장된 자격 증명으로 BrowserStack에 로그인하세요.

공유 1Password 계정으로 로그인합니다.