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

이 문서는 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을 통해 ES 모듈 지원이 이루어집니다.

API 호출 시 GraphQL을 첫 번째 선택으로 사용합니다. GitLab REST API를 사용해야 하는 경우도 있지만(예: 새로운 단순 HAML 페이지를 만들거나 코드베이스의 레거시 부분인 경우), 가능하면 항상 GraphQL을 기본으로 사용해야 합니다.

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

문자열 및 번역에 대해서는 프런트엔드 유틸리티를 사용할 수 있습니다. 자바스크립트 섹션에서 페이지 번역 준비를 확인하세요.

프런트엔드 자산을 다루기 위해서는 Node (v12.22.1 이상) 및 Yarn (v1.10.0 이상)이 필요합니다. 이를 설치하는 방법은 설치 가이드에서 확인할 수 있습니다.

비전

프런트엔드 엔지니어로서, 우리는 사용자에게 기쁨을 주는 경험을 추구합니다. 항상 GitLab에 특히 적용되는 방법에 대해 생각해야 합니다: 훌륭한 GitLab 경험은 사용자 기반의 프로젝트를 보다 빠르고 더 자신 있게 배포할 수 있는 것을 의미합니다. 우리 부서의 미래에 대한 선택과 마주할 때마다 항상 이를 먼저 생각하려고 해야 합니다.

가치

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

안정성

속도가 매우 중요하긴 하지만, GitLab이 이제 기업급 플랫폼이 되었으며, 가장 작은 MVC조차 안정적이고 테스트되었으며 훌륭한 아키텍처를 갖추어야 한다고 믿습니다. 우리는 심지어 MVC로서도 코드를 Merge해서는 안 되며, 이로 인해 저하, 성능 저하, 혼란 또는 사용자 기대치가 일반적으로 낮아지는 것을 초래할 수 있는 코드를 Merge해서는 안 됩니다.

이것은 우리가 사용자가 자신의 소프트웨어에 대한 신뢰를 가져야 한다는 핵심 가치의 확장입니다. 즉, 우리의 소프트웨어에 대한 자신감은 절대 최대한으로 유지되어야 한다는 것을 의미합니다.

속도

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

또한, 우리는 개발자들이 우리의 속도를 체감하고 이를 극찬하는 것을 원합니다. 이것은 우리가 부서 전반에 걸쳐 성공을 더 빨리 이룰 수 있도록 하는 프로세스, 도구 및 문서 작업에 많은 노력과 생각을 기울여야 한다는 것을 의미합니다. 이것은 엔지니어에게 이익을 주지만 더 빠른 속도로 품질 있는 기능을 제공받는 우리 사용자에게도 이로운 것입니다.

유지 가능성

GitLab은 이제 대규모 기업급 소프트웨어이며, 때로는 최상의 경험을 제공하기 위해 복잡한 코드가 필요합니다. 복잡성은 필수적인 부분이지만, 우리는 그것이 성장해선 안 된다는 것을 주시해야 합니다. 이를 최소화하기 위해 우리는 복잡성을 캡슐화하여 코드베이스를 유지 가능하게 만들기를 희망합니다. 이는 다음과 같은 방법으로 이루어집니다:

  • 일반적으로 직면하는 문제를 해결하는 도구를 구축하고 이를 쉽게 발견할 수 있도록 만듭니다.
  • 우리가 문제를 어떻게 해결하는지에 대한 더 나은 문서 작성
  • 우리 코드베이스에서 쉽게 추가하거나 제거할 수 있는 느슨하게 결합된 컴포넌트 작성
  • 더 이상 허용할 수 없다고 판단한 이전 기술 또는 패턴 제거

이러한 측면에 초점을 맞추어 엔지니어들이 복잡성을 명확히 정의된 경계 내에서 포함시키고 빨리 동료들과 공유할 수 있도록 하는 것을 목표로 합니다.

목표

가치가 정의된 후, 이를 기반으로 목표를 세우고 GitLab에서 이를 목표로 하는 내용을 결정할 수 있습니다.

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

처음으로 기여하는 사람들

처음으로 기여하는 경우 GitLab 개발에 기여하기를 참조하세요.

첫 번째 Merge Request을 만들거나 GitLab 프런트엔드 워크플로우를 검토해야 할 때는 시작하기를 참조하세요.

GitLab에서 프런트엔드 개발에 대한 안내를 받기 원하는 경우 프런트엔드 온보딩 코스를 추천합니다. 이 코스는 6주간의 구조화된 커리큘럼을 제공합니다.

유용한 링크

이니셔티브

프런트엔드 이니셔티브 레이블이 있는 현재의 프런트엔드 이니셔티브를 찾을 수 있습니다.

테스트

우리가 프런트엔드 테스트를 작성하고 GitLab 테스트 스위트를 실행하며 테스트 관련 문제를 해결하는 방법을 확인할 수 있습니다.

Pajamas 디자인 시스템

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

프런트엔드 FAQ

일반적인 작은 도움이 되는 정보에 대한 프런트엔드 FAQ를 읽어보세요.

국제화 (i18n) 및 번역

프런트엔드 국제화 지원에 대해 이 문서에서 확인할 수 있습니다. 가이드의 외부화 부분에서 사용 가능한 도우미/방법에 대해 설명합니다.

문제 해결

프런트엔드 개발 문제가 발생했습니까? 이 가이드를 확인하여 문제를 해결하세요.

브라우저 지원

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

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