머지 리퀘스트 diff 프론트엔드 개요

GitLab diff Vue 애플리케이션의 프론트엔드 구조와 컴포넌트, Vuex 스토어, API 요청 방식, 렌더 큐 동작 원리를 설명합니다.

이 문서는 프론트엔드 diff Vue 애플리케이션이 어떻게 동작하는지, 그리고 존재하는 다양한 구성 요소에 대한 개요를 제공합니다. 기여자들이 다음을 수행하는 데 도움이 됩니다: diff Vue 앱이 어떻게 설정되는지 이해합니다. 개선이 필요한 영역을 파악합니다. 이 문서는 살아있는 문서입니다. diff 애플리케이션에서 중요한 변경 사항이 생길 때마다 업데이트하세요. Diffs Vue 앱 # 컴포넌트 # diff를 렌더링하는 Vue 앱은 다양한 Vue 컴포넌트를 사용하며, 그 중 일부는 GitLab 앱의 다른 영역과 공유됩니다. 아래 차트는 컴포넌트가 렌더링되는 방향을 보여줍니다. 이 차트에는 다음과 같은 여러 유형의 항목이 포함됩니다: 범례 항목 설명 xxx~~, ee-xxx~~ 축약된 디렉터리 경로 이름. [ee]/app/assets/javascripts에서 찾을 수 있으며, 0..n개의 중첩 폴더를 생략합니다. 직사각형 노드 파일. 타원형 노드 더 깊은 개념을 평문으로 설명. 이중 직사각형 노드 단순화된 코드 브랜치. 마름모 및 원형 노드 2개(마름모) 또는 3개 이상(원형) 옵션을 가진 브랜치. 펜던트/배너 노드 (왼쪽 노치, 오른쪽 사각형) 중첩 경로를 단축하기 위한 부모 디렉터리. ./ 가장 가까운 부모 디렉터리 펜던트 노드에 상대적인 경로. 부모 펜던트 노드 아래에 중첩된 비상대적 경로는 해당 디렉터리에 있지 않습니다. %%{init: { "fontFamily": "GitLab Sans" }}%% flowchart TB accTitle: Component rendering accDescr: Flowchart of how components are rendered in the GitLab front end classDef code font-family: monospace; A["diffs~~app.vue"] descVirtualScroller(["Virtual Scroller"]) codeForFiles[["v-for(diffFiles)"]] B["diffs~~diff_file.vue"] C["diffs~~diff_file_header.vue"] D["diffs~~diff_stats.vue"] E["diffs~~diff_content.vue"] boolFileIsText{isTextFile} boolOnlyWhitespace{isWhitespaceOnly} boolNotDiffable{notDiffable} boolNoPreview{noPreview} descShowChanges(["Show button to "Show changes""]) %% Non-text changes dirDiffViewer>"vue_shared~~diff_viewer&#3