프론트엔드 FAQ

프론트엔드 FAQ 규칙

프론트엔드 FAQ에 대해 이야기하세요. 가능한 경우 링크를 공유하여 컨텐츠의 유효 기간이 지나가더라도 더 많은 사람이 알아차릴 수 있도록 합니다.
간결하고 명확하게 유지하세요. 두 문장 이상이 필요한 답변은 여기에 들어가지 않습니다.
가능한 경우 배경 정보를 제공하세요. 관련 소스 코드, 이슈/에픽 또는 다른 문서에 링크하는 것이 답변을 이해하는 데 도움이 됩니다.
무엇인가를 보면 무언가를 하세요. 만일 더 이상 유효하지 않은 컨텐츠를 보면 즉시 제거하거나 업데이트하세요.

FAQ

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

‘page’ 데이터 속성 확인하기

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

document.body.dataset.page

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

Rails 경로

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

bundle exec rails routes | grep "issues"

2. `modal_copy_button` vs `clipboard_button`

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

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

3. Pajamas Design System에 적합하지 않은 `gitlab-ui` 컴포넌트

gitlab-ui에 구현된 Pajamas Design System 컴포넌트 중 일부는 디자인 시스템 사양에 부합하지 않습니다. 이는 계획된 기능이 부족하거나 올바르게 스타일이 지정되지 않은 경우입니다. Pajamas 웹 사이트에서 해당 컴포넌트 예제 상단에 다음과 같은 배너가 표시됩니다.

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

예를 들어, 작성 시점에서 모든 양식 컴포넌트(예: 체크박스)에 대해 이 유형의 경고가 관찰될 수 있지만, 이는 해당 컴포넌트를 사용해서는 안 된다는 것을 의미하지는 않습니다.

GitLab은 항상 적합한 컴포넌트가 존재할 때 <gl-*> 컴포넌트를 사용하도록 요청합니다. 이로써 코드베이스를 통일시키고 나중에 유지/리펙터를 더욱 수월하게 만듭니다.

비-부합 컴포넌트의 사용은 MR 리뷰의 일환으로 제품 디자이너가 검토하도록 하세요. 그리고 Pajamas Design System epic에서 해당 컴포넌트 구현 에픽을 찾아 후속 이슈를 만들어 첨부하세요.

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

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

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

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

예시:

// 나쁨 :(
// 만일 gitlab이 호스트 이름 `0.0.0.0`로 구성된다면
// 이것은 `localhost`에서 요청할 때 CORS 문제를 일으킵니다
axios.get(joinPaths(gon.gitlab_url, '-', 'foo'))

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

또한 프론트엔드에서 경로를 하드코딩하는 것보다는 백엔드에서 받아오는 것이 좋습니다(다음 섹션 참조). 백엔드 레일즈 경로를 참조할 때 *_url을 사용하는 것보다는 *_path를 사용하세요.

예시:

-# 나쁨 :(
#js-foo{ data: { foo_url: some_rails_foo_url } }

-# 좋음 :)
#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. 어떻게 로컬에서 프로덕션 빌드를 테스트할 수 있나요?

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

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

프로덕션 빌드는 몇 분이 소요됩니다. 이 시점에서의 코드 변경사항은 항상 항목 3을 다시 실행한 후에만 표시됩니다.

기본 개발 모드로 돌아가려면:

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

8. Babel 폴리필

GitLab 12.8에서 도입됨.

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에 추가하세요.

사용되는 폴리필을 확인하려면:

병합 요청으로 이동합니다.
제목 아래의 보조 메뉴에서 Pipelines을 선택한 다음, 볼 파이프라인을 선택하여 해당 파이프라인의 작업을 표시합니다.
compile-production-assets 작업을 선택합니다.
오른쪽 사이드바에서 Job Artifacts로 스크롤하여 Browse를 선택합니다.
webpack-report 폴더를 선택하여 엽니다. 그리고 index.html을 선택합니다.
페이지 상단 왼쪽 모서리에서 오른쪽 화살표 ()를 선택하여 탐색기를 표시합니다.
Search modules 필드에 gitlab/node_modules/core-js를 입력하여 로드되는 폴리필을 확인하세요:

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

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

10. GitLab 플레이버드 마크다운을 렌더링하는 방법은 무엇인가요?

만약 GitLab 플레이버드 마크다운을 렌더링해야 한다면, 다음 두 가지가 필요합니다:

v-safe-html 지시문을 사용하여 Vue 구성 요소 내의 div HTML 요소에 GLFM 컨텐츠를 전달합니다.
적절한 CSS 스타일을 적용할 수 있도록 루트 div에 md 클래스를 추가합니다.

프론트엔드 FAQ