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

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

이 문서는 GitLab 프론트엔드 팀 전반에서 일관성과 품질을 보장하기 위한 여러 가이드라인을 설명합니다. 개요 # GitLab은 Ruby on Rails 위에 구축되어 있습니다. Haml 과 Vue.js 기반의 JavaScript 프론트엔드를 사용합니다. Haml 페이지 위에 Vue를 언제 사용해야 할지 확실하지 않다면 이 설명 을 참고합니다. 자세한 내용은 Hamlit 을 참고합니다. CSS에는 유틸리티 기반 CSS 방식을 사용합니다. 자세한 내용과 CSS 유틸리티가 정의된 위치는 이 가이드의 SCSS 스타일 섹션 을 참고합니다. 또한 SCSS 와 일반 JavaScript를 사용하며, 최신 ECMAScript 표준은 Babel 로, ES 모듈 지원은 webpack 으로 처리합니다. API 호출에는 GraphQL 을 첫 번째 선택지로 사용합니다. 새로운 단순 Haml 페이지를 만들 때나 코드베이스의 레거시 영역처럼 GitLab REST API를 사용하는 경우도 여전히 있지만, 가능하면 항상 GraphQL을 기본으로 사용합니다. Vue의 클라이언트 측 상태 관리 에는 기능의 구체적인 요구 사항에 따라 다음을 사용합니다. Apollo ( GraphQL 에 의존하는 애플리케이션의 기본 선택지) Pinia 상태를 가지는 컴포넌트. Vuex는 더 이상 사용되지 않으며 , 가능한 경우 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_name/ components/ (기능을 구성하는 Vue 컴포넌트) graphql/ (쿼리·뮤테이션) utils/