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

GitLab 프론트엔드 팀 전반의 일관성과 품질을 보장하기 위한 다양한 가이드라인을 설명합니다.

이 문서는 GitLab 프론트엔드 팀 전반의 일관성과 품질을 보장하기 위한 다양한 가이드라인을 설명합니다. 소개 # GitLab은 Ruby on Rails 위에 구축되어 있습니다. Haml 과 Vue.js 를 기반으로 한 JavaScript 프론트엔드를 사용합니다. Haml 페이지 위에 Vue를 언제 사용해야 할지 확실하지 않다면, 이 설명 을 읽어 보세요. 자세한 내용은 Hamlit 을 참조하세요. CSS와 관련하여, 우리는 유틸리티 기반 CSS 접근 방식을 사용합니다. 자세한 내용과 CSS 유틸리티가 정의된 위치를 찾으려면 이 가이드의 SCSS 스타일 섹션 을 참조하세요. 또한 SCSS 와 Babel 을 통해 지원되는 최신 ECMAScript 표준의 일반 JavaScript, 그리고 webpack 을 통한 ES 모듈 지원을 사용합니다. API 호출 시, 첫 번째 선택으로 GraphQL 을 사용합니다. 새로운 간단한 Haml 페이지를 만들거나 레거시 코드베이스에서와 같이 GitLab REST API를 사용하는 경우도 여전히 있지만, 가능하면 항상 GraphQL을 기본으로 사용해야 합니다. Vue에서의 클라이언트 측 상태 관리 에는 기능의 특정 요구 사항에 따라 다음을 사용합니다: Apollo ( GraphQL 에 의존하는 애플리케이션의 기본 선택) Pinia 상태 저장 컴포넌트. Vuex는 더 이상 사용되지 않으며 , 가능하면 이를 마이그레이션 해야 합니다. 알아보기: 어떤 상태 관리자를 사용해야 할까요? 복사 문자열과 번역을 위해 프론트엔드 유틸리티를 사용할 수 있습니다. 자세한 내용은 번역을 위한 페이지 준비 의 JavaScript 섹션을 참조하세요. 프론트엔드 에셋을 사용하려면 Node(v12.22.1 이상)와 Yarn(v1.10.0 이상)이 필요합니다. 설치 방법은 설치 가이드 에서 확인할 수 있습니다. 고수준 개요 # GitLab 핵심 프론트엔드 코드는 app/assets/javascripts 아래에 위치합니다. GitLab은 Ruby on Rails 프레임워크를 사용하므로, Haml 을 사용하여 뷰에 Vue 애플리케이션을 주입합니다. 예를 들어, Rails 뷰에서 Vue 앱을 빌드하려면 app/views/projects/pipeline_schedules/index.html.haml 과 같은 뷰를 설정합니다. 이 뷰 내에서 #pipeline-schedules-app 과 같은 id 를 가진 요소를 추가합니다. 이 요소가 프론트엔드 코드의 마운트 포인트 역할을 합니다. 애플리케이션 구조는 일반적으로 app/assets/javascripts/<feature-name> 패턴을 따릅니다. 예를 들어, 특정 기능의 디렉터리는 app/assets/javascripts/ci/pipeline_schedules 처럼 보일 수 있습니다. 이러한 유형의 디렉터리 내에서 코드를 components 나 graphql 과 같은 하위 폴더로 구성하며, 이 폴더들이 기능을 구성하는 코드를 담습니다. 일반적인 구조는 다음과 같습니다. feature_