프론트엔드 FAQ

GitLab 프론트엔드 개발 시 자주 묻는 질문과 답변을 설명합니다.

프론트엔드 FAQ 규칙 # 프론트엔드 FAQ에 대해 이야기합니다. 해당 내용이 오래되었을 때 더 많은 사람이 파악할 수 있도록, 해당되는 경우 언제든지 링크를 공유하세요. 간결하고 단순하게 유지합니다. 답변이 두 문장 이상 필요한 경우 이 문서에 포함하지 않습니다. 가능한 경우 배경 정보를 제공합니다. 관련 소스 코드, 이슈/에픽, 또는 다른 문서에 링크를 연결하면 답변을 이해하는 데 도움이 됩니다. 무언가를 발견하면 즉시 조치합니다. 오래된 콘텐츠를 발견하는 즉시 삭제하거나 업데이트하세요. FAQ # 1. 페이지의 Rails 라우트를 어떻게 찾나요? # 'page' 데이터 속성 확인 # 가장 쉬운 방법은 해당 페이지를 열어 브라우저에서 다음을 입력하는 것입니다: document.body.dataset.page 해당 속성을 설정하는 소스 코드 에서 확인하세요. Rails 라우트 # rails routes 명령을 사용하면 애플리케이션에서 사용 가능한 모든 라우트를 나열할 수 있습니다. 출력 결과를 grep 으로 파이프하면 사용 가능한 라우트 목록에서 검색을 수행할 수 있습니다. 출력에는 사용 가능한 요청 타입, 라우트 파라미터, 관련 컨트롤러가 포함됩니다. bundle exec rails routes | grep "issues" 2. clipboard_button과 simple_copy_button # clipboard_button 은 페이지 로드 시 초기화되는 copy_to_clipboard.js 동작을 사용합니다. 페이지 로드 시 존재하지 않는 Vue 클립보드 버튼(예: GlModal 안의 버튼)에는 클립보드 패키지와 연결된 클릭 핸들러가 없습니다. simple_copy_button.vue 는 해당 동작을 사용하지 않으므로 모달(및 다른 곳)에서 안전하게 사용할 수 있습니다. 3. Pajamas Design System을 준수하지 않는 gitlab-ui 컴포넌트 # gitlab-ui 에 구현된 일부 Pajamas Design System 컴포넌트는 디자인 시스템 사양을 준수하지 않습니다. 이는 계획된 일부 기능이 누락되어 있거나 아직 올바르게 스타일링되지 않았기 때문입니다. Pajamas 웹사이트에서는 컴포넌트 예제 상단의 배너가 다음을 나타냅니다: 이 컴포넌트는 아직 디자인 시스템에서 정의한 올바른 스타일링을 준수하지 않습니다. 이 컴포넌트의 시각적 참조 시 디자인 시스템 문서를 참고하세요. 예를 들어, 이 글을 작성하는 시점에서 이러한 유형의 경고는 checkbox 와 같은 모든 폼 컴포넌트에서 확인할 수 있습니다. 그러나 이것이 해당 컴포넌트를 사용하지 말아야 한다는 의미는 아닙니다. GitLab은 적합한 컴포넌트가 존재하는 경우 항상 <gl-*> 컴포넌트를 사용하도록 요청합니다. 이는 코드베이스를 통일하고 앞으로 유지보수/리팩토링을 더 편리하게 만듭니다. Product Designer 가 머지 리퀘스트 리뷰의 일부로 비준수 컴포넌트 사용을 검토하도록 하세요. 후속 이슈를 생성하고 Components of Pajamas