이 가이드는 Rails 경로, 컨트롤러 액션, HAML 뷰, 페이지별 JavaScript 및 페이지별 CSS를 포함하여 GitLab에 새 페이지를 추가하는 방법을 설명합니다.

새 페이지 만들기#

GitLab은 Ruby on Rails 애플리케이션입니다. 새 페이지를 추가하려면 경로, 컨트롤러 액션 및 HAML 뷰가 필요합니다.

• config/routes/ 또는 관련 경로 파일에 경로를 추가합니다. 자세한 내용은 Rails 라우팅 가이드를 참조하세요.

• app/controllers/ 아래의 적절한 컨트롤러에 컨트롤러 액션을 추가합니다. 자세한 내용은 Rails 컨트롤러 가이드를 참조하세요.

• app/views/<controller_path>/<action>.html.haml에 HAML 뷰를 추가합니다. 자세한 내용은 HAML 문서를 참조하세요.

예를 들어, /-/projects/:id/pages/new에서 접근 가능한 페이지를 만들려면:

• 경로: config/routes/project.rb에 정의.
• 컨트롤러: def new 액션이 있는 app/controllers/projects/pages_controller.rb.
• 뷰: app/views/projects/pages/new.html.haml.

페이지별 JavaScript 추가#

GitLab은 Rails 컨트롤러 경로와 액션 이름을 기반으로 JavaScript 엔트리포인트를 자동으로 로드합니다.

엔트리포인트 로딩#

번들러(Webpack 또는 Vite)는 캐스케이딩 규칙을 사용하여 app/assets/javascripts/pages/에서 엔트리포인트 파일을 찾습니다. projects/pages/new와 같은 컨트롤러 액션의 경우 존재하면 다음 파일을 순서대로 로드합니다:

1. pages/projects/index.js
2. pages/projects/pages/index.js
3. pages/projects/pages/new/index.js

계층 구조의 각 파일이 로드되므로 부모 엔트리포인트의 코드는 모든 자식 경로에서 실행됩니다. 관련 페이지 간에 초기화 로직을 공유하는 데 사용합니다.

새 페이지에 JavaScript를 추가하려면:

• app/assets/javascripts/pages/ 아래에 컨트롤러 경로와 일치하는 디렉토리를 만듭니다.

• 해당 디렉토리에 index.js 파일을 추가합니다.

• 엔트리포인트 파일을 경량으로 유지합니다. 엔트리포인트 외부의 모듈에 정의된 함수를 임포트하고 호출합니다. 엔트리포인트에 직접 비즈니스 로직을 추가하지 마세요.

예를 들어, projects/pages/new 액션의 경우:

// app/assets/javascripts/pages/projects/pages/new/index.js
import initMyFeature from '~/my_feature';

initMyFeature();

자세한 내용은 페이지별 JavaScript를 참조하세요.

Enterprise Edition 엔트리포인트#

GitLab Enterprise Edition의 경우 ee/app/assets/javascripts/pages/의 페이지별 엔트리포인트가 동일한 경로의 Community Edition 엔트리포인트보다 우선합니다. 두 버전 간에 코드를 공유하려면 Enterprise Edition 엔트리포인트에서 Community Edition 엔트리포인트를 임포트합니다.

페이지별 CSS 추가#

가능한 경우 커스텀 CSS보다 유틸리티 클래스를 선호합니다. 커스텀 스타일이 필요한 경우 GitLab은 스타일이 많은 페이지에 적용되는지 특정 페이지에 적용되는지에 따라 페이지별 CSS에 대한 두 가지 접근 방식이 있습니다. SCSS 규칙에 대한 자세한 내용은 SCSS 스타일 가이드를 참조하세요.

전역 페이지 스타일#

여러 페이지에 공유되는 스타일의 경우 app/assets/stylesheets/pages/ 아래에 SCSS 파일을 추가하고 app/assets/stylesheets/_page_specific_files.scss에서 임포트합니다:

// app/assets/stylesheets/_page_specific_files.scss
@import './pages/my_feature';

이 스타일은 메인 스타일시트 번들에 포함되어 모든 페이지에 로드됩니다. 스타일이 진정으로 여러 페이지에 적용될 때만 이 접근 방식을 사용하세요.

페이지 번들 스타일#

하나 또는 몇 개의 페이지에 사용되는 스타일의 경우 app/assets/stylesheets/page_bundles/ 아래에 SCSS 파일을 만들고 add_page_specific_style을 사용하여 HAML 뷰에서 로드합니다:

-# app/views/projects/my_feature/index.html.haml
- add_page_specific_style 'page_bundles/my_feature'

// app/assets/stylesheets/page_bundles/my_feature.scss
@import 'mixins_and_variables_and_functions';

.my-feature-class {
  // ...
}

페이지 번들 스타일시트는 요청하는 페이지에서만 로드되어 해당 페이지를 방문하지 않는 사용자의 CSS 페이로드를 줄입니다. 가능한 경우 전역 페이지 스타일보다 이 접근 방식을 선호합니다.