• Frontend FAQ 규칙
• FAQ
  • 1. 페이지에 대한 Rails 경로를 어떻게 찾을 수 있나요?
    • ‘page’ 데이터 속성 확인
    • Rails 경로
  • 2. modal_copy_button 대 clipboard_button
  • 3. Pajamas Design System에 부합하지 않는 gitlab-ui 컴포넌트
  • 4. 제출된 양식 버튼이 제출 후 비활성화됩니다
  • 5. 백엔드 엔드포인트를 참조할 때 전체 URL(예: gon.gitlab_url) 또는 전체 경로(예: gon.relative_url_root)를 사용해야 하나요?
  • 6. 프론트엔드가 백엔드 경로를 어떻게 참조해야 하나요?
  • 7. 로컬에서 프로덕션 빌드를 테스트하는 방법
  • 8. Babel 폴리필
  • 9. 다크 모드에서 페이지가 깨지는 이유는 무엇인가요?
  • 10. GitLab 특화 Markdown을 렌더링하는 방법은 무엇인가요?

Frontend FAQ

Frontend FAQ 규칙

1. Frontend FAQ에 대해 이야기하세요. 적용 가능할 때마다 링크를 공유하여 내용이 오래되었을 때 더 많은 사람이 볼 수 있게 합니다.
2. 짧고 간단하게 유지하세요. 답변이 두 문장 이상이 필요한 경우 여기에 포함되지 않습니다.
3. 가능한 경우 배경 정보를 제공하세요. 관련 소스 코드, 이슈/에픽 또는 다른 문서에 링크하는 것은 답변을 이해하는 데 도움이 됩니다.
4. 문제 발견 시 처리하세요. 오래된 콘텐츠를 발견하면 즉시 제거하거나 업데이트하세요.

FAQ

1. 페이지에 대한 Rails 경로를 어떻게 찾을 수 있나요?

‘page’ 데이터 속성 확인

가장 쉬운 방법은 해당 페이지에 있는 브라우저에서 다음을 입력하는 것입니다:

document.body.dataset.page

여기서 속성을 설정하는 소스 코드를 찾을 수 있습니다.

Rails 경로

rails routes 명령어를 사용하여 응용 프로그램에 있는 모든 경로를 나열할 수 있습니다. 출력 값을 grep에 파이핑하여 사용 가능한 경로를 검색할 수 있습니다. 출력에는 사용 가능한 요청 유형, 경로 매개변수 및 관련 컨트롤러가 포함됩니다.

bundle exec rails routes | grep "issues"

2. modal_copy_button 대 clipboard_button

clipboard_button은 페이지 로드시 초기화되는 copy_to_clipboard.js 동작을 사용합니다. 페이지 로드시 존재하지 않는 Vue 클립보드 버튼(예: GlModal 내의 버튼)은 클릭 핸들러가 클립보드 패키지와 연결되지 않습니다.

modal_copy_button은 해당 컴포넌트의 인스턴스를 관리합니다. 이는 클립보드 이벤트가 마운트될 때 바인딩되고 버튼이 제거될 때 해제되어 위의 문제를 완화합니다. 또한 우리의 GlModal에서 생성된 포커스 트랩과 작업하기 위해 특정 컨테이너 또는 모달 ID에 대한 바인딩이 가능합니다.

3. Pajamas Design System에 부합하지 않는 gitlab-ui 컴포넌트

일부 gitlab-ui에 구현된 Pajamas Design System 컴포넌트는 디자인 시스템 사양과 부합하지 않습니다. 이는 일부 계획된 기능이 누락되었거나 올바르게 스타일이 지정되지 않았기 때문입니다. Pajamas 웹 사이트에서 컴포넌트 예제 상단에 다음과 같은 배너가 나타납니다:

이 컴포넌트는 아직 디자인 시스템에서 정의한 올바른 스타일과 부합하지 않습니다. 이 컴포넌트의 시각적인 참조를 할 때 디자인 시스템 문서를 참조하세요.

예를 들어, 작성 시점에서 이러한 유형의 경고를 모든 양식 컴포넌트(예: checkbox)에 대해 관찰할 수 있습니다. 그러나 이는 컴포넌트를 사용하지 말아야 함을 의미하지는 않습니다.

GitLab은 언제든지 적합한 컴포넌트가 있는 경우 <gl-*> 컴포넌트를 사용하도록 요청합니다. 이는 코드베이스를 통일시키고 미래에 유지/리팩터링하기 더 편리하게 만듭니다.

MR 검토의 일환으로 부합하지 않는 컴포넌트의 사용을 검토하는 제품 디자이너를 확인하십시오. 그리고 Pajamas Design System Epic에서 컴포넌트 구현 에픽을 찾아 후속 이슈를 만들고 첨부하세요.

4. 제출된 양식 버튼이 제출 후 비활성화됩니다

양식 내의 제출 버튼은 양식 요소에 onSubmit 이벤트 리스너를 추가합니다. 이 코드는 양식이 제출될 때 제출 버튼에 disabled 클래스 선택기를 추가합니다. 이 동작을 피하려면 버튼에 js-no-auto-disable 클래스를 추가하세요.

5. 백엔드 엔드포인트를 참조할 때 전체 URL(예: gon.gitlab_url) 또는 전체 경로(예: gon.relative_url_root)를 사용해야 하나요?

백엔드 엔드포인트를 참조할 때 전체 경로를 사용하는 것이 좋습니다. 이는 GitLab에서 구성된 호스트 이름을 사용하여 요청과 일치하지 않을 수 있기 때문입니다. 이로 인해 이와 같은 Web IDE 예제와 같은 교차 출처 리소스 공유 문제가 발생합니다.

예시:

// bad :(
// 만약 gitlab이 `0.0.0.0`로 호스트 이름을 구성한 경우
// `localhost`에서 요청을 보내면 CORS 문제가 발생합니다
axios.get(joinPaths(gon.gitlab_url, '-', 'foo'))

// good :)
axios.get(joinPaths(gon.relative_url_root, '-', 'foo'))

또한 프론트엔드에서 경로를 고정적으로 지정하지 말고 대신 백엔드에서 받아오세요(다음 섹션 참조). 백엔드 Rails 경로를 참조할 때 *_url 대신에 *_path를 사용하세요.

예시:

-# Bad :(
#js-foo{ data: { foo_url: some_rails_foo_url } }

-# Good :)
#js-foo{ data: { foo_path: some_rails_foo_path } }

6. 프론트엔드가 백엔드 경로를 어떻게 참조해야 하나요?

가능한 경우 경로를 하드코딩하여 추가적인 결합을 피하려 합니다. JavaScript에서 참조하는 DOM 요소에 이러한 경로를 데이터 속성으로 추가하십시오.

예시:

// Bad :(
// 경로를 하드코딩하는 Vuex 동작이 여기에 있습니다 :(
export const fetchFoos = ({ state }) => {
  return axios.get(joinPaths(gon.relative_url_root, '-', 'foo'));
};

// Good :)
function initFoo() {
  const el = document.getElementById('js-foo');
  
  // 경로가 초기화할 때 사용되는 루트 엘리먼트의 데이터에서 옵니다 :)
  const store = createStore({
    fooPath: el.dataset.fooPath
  });
  
  Vue.extend({
    store,
    el,
    render(h) {
      return h(Component);
    },
  });
}

// Vuex 동작에서 해당 경로를 상태에서 참조할 수 있습니다 :)
export const fetchFoos = ({ state }) => {
  return axios.get(state.settings.fooPath);
};

7. 로컬에서 프로덕션 빌드를 테스트하는 방법

때로는 프론트엔드 프로덕션 빌드가 생성하는 것을 로컬에서 테스트해야 할 때가 있습니다. 이를 위해 다음 단계를 수행합니다:

1. 웹팩을 중지합니다: gdk stop webpack.
2. gitlab/config 폴더에 있는 gitlab.yaml을 열고 webpack 섹션으로 이동하여 dev_server를 enabled: false로 변경합니다.
3. yarn webpack-prod && gdk restart rails-web를 실행합니다.

프로덕션 빌드가 완료되기까지 몇 분이 소요됩니다. 이 시점에서의 코드 변경사항은 위의 항목 3을 다시 실행한 후에만 표시됩니다.

표준 개발 모드로 돌아가려면:

1. gitlab 설치 폴더에 있는 gitlab.yaml을 열고 webpack 섹션으로 이동하여 다시 dev_server를 enabled: true로 변경합니다.
2. (선택 사항) yarn clean을 실행하여 프로덕션 자산을 제거하고 일부 공간을 확보합니다.
3. 웹팩을 다시 시작합니다: gdk start webpack.
4. GDK를 다시 시작합니다: gdk restart rails-web.

8. Babel 폴리필

GitLab은 Babel preset-env 옵션인 useBuiltIns: 'usage'를 활성화했습니다. 이는 우리의 대상 브라우저에서 지원하지 않는 각 JavaScript 기능에 대해 적절한 core-js 폴리필을 추가합니다. 매뉴얼으로 core-js 폴리필을 추가할 필요가 없습니다.

GitLab은 브라우저 기능을 확장하기 위해 비-core-js 폴리필(예: GitLab SVG 폴리필)을 추가합니다. 이는 <use xlink:href>를 사용하여 SVG를 참조할 수 있도록 합니다. 이러한 폴리필을 app/assets/javascripts/commons/polyfills.js에 추가하세요.

사용 중인 폴리필을 보려면:

1. Merge Request으로 이동합니다.
2. 제목 아래의 보조 메뉴에서 Pipeline을 선택한 다음 볼 파이프라인을 선택하여 해당 파이프라인의 작업을 표시합니다.
3. compile-production-assets 작업을 선택합니다.
4. 오른쪽 사이드바에서 작업 아티팩트로 스크롤하여 찾아보기를 선택합니다.
5. webpack-report 폴더를 선택하고 index.html을 선택합니다.
6. 페이지의 왼쪽 상단에서 오른쪽 화살표를 선택하여 탐색기를 표시합니다.

7. 모듈 검색 필드에 gitlab/node_modules/core-js를 입력하여 로드되는 폴리필과 위치를 확인합니다.

   

9. 다크 모드에서 페이지가 깨지는 이유는 무엇인가요?

다크 모드 문서를 참조하세요.

10. GitLab 특화 Markdown을 렌더링하는 방법은 무엇인가요?

GitLab 특화 Markdown을 렌더링해야 하는 경우, 두 가지를 준비해야 합니다:

• GLFM 콘텐츠를 v-safe-html 지시문과 함께 Vue 컴포넌트 내의 div HTML 요소에 전달합니다.
• 적절한 CSS 스타일을 적용할 root div에 md 클래스를 추가합니다.