프론트엔드 차이 요청 개요
이 문서는 프론트엔드 차이 Vue 애플리케이션이 작동하는 방식과 존재하는 다양한 부분에 대한 개요를 제공합니다. 기여자들이 다음을 돕는 데 도움이 될 것입니다:
- 차이 Vue 앱이 어떻게 설정되었는지 이해하기
- 개선이 필요한 영역을 식별하기
이 문서는 자주 업데이트되는 문서입니다. 차이 애플리케이션에서 중요한 변경 사항이 있을 때마다 업데이트하십시오.
차이 Vue 앱
컴포넌트
차이를 렌더링하는 Vue 앱은 많은 다른 Vue 컴포넌트를 사용하며, 일부는 GitLab 앱의 기타 영역과 공유됩니다. 아래 차트는 컴포넌트가 렌더링되는 방향을 보여줍니다.
이 차트에는 여러 유형의 항목이 포함되어 있습니다:
| 범례 항목 | 해석 |
|---|---|
xxx~~, ee-xxx~~
| 줄인 디렉토리 경로 이름. [ee]/app/assets/javascripts에서 찾을 수 있으며, 0..n 중첩 폴더는 포함하지 않습니다.
|
| 직사각형 노드 | 파일 |
| 타원형 노드 | 깊은 개념을 설명하는 일반어 |
| 이중 직사각형 노드 | 단순화된 코드 브랜치 |
| 다이아몬드 및 원형 노드 | 옵션이 2개 (다이아몬드) 또는 3개 이상 (원형)인 브랜치 |
| 펜던트/배너 노드 (왼쪽 홈, 오른쪽 사각형) | 중첩된 경로를 줄이기 위한 상위 디렉토리 |
./
| 가장 가까운 상위 디렉토리 펜던트 노드와 관련된 경로. 상위 펜던트 노드 아래 중첩된 비상대적 경로는 해당 디렉토리에 없습니다. |
일부 컴포넌트는 기타 컴포넌트보다 더 자주 렌더링되지만, 주요 컴포넌트는 diff_row.vue입니다.
이 컴포넌트는 차이 파일의 모든 차이 행을 렌더링합니다. 성능상의 이유로 이 컴포넌트는 함수형 컴포넌트입니다. 그러나 Vue 3로 업그레이드되면 더 이상 필요하지 않습니다.
주요 차이 앱 컴포넌트는 차이 애플리케이션의 주요 진입점입니다. 이 컴포넌트의 가장 중요한 부분 중 하나는 논의를 차이 행에 할당하는 작업을 디스패치하는 것입니다. 이 작업은 메타데이터 요청이 완료된 후와 일괄 차이 요청이 완료된 후에 디스패치됩니다. 또한 차이 파일 배열과 노트 배열의 변경 사항을 감시하는 워커가 설정되어 있습니다. 여기에 변경 사항이 발생할 때마다 논의 설정 액션이 디스패치됩니다.
DiffRow 컴포넌트는 차이 행 데이터를 하나의 형식으로 저장할 수 있는 방식으로 설정되어 있습니다. 이전에는 인라인 및 사이드바에 대해 두 가지 다른 형식을 요청해야 했습니다. 그런 다음 DiffRow 컴포넌트는 이 표준 형식을 사용하여 차이 행 데이터를 렌더링합니다. 이와 같은 표준 형식을 사용하면 사용자가 데이터를 다시 가져오지 않고 인라인 및 사이드바 간을 전환할 수 있습니다.
참고: 이 컴포넌트에서 사용되고 렌더링되는 데이터 중 많은 부분이 다양한 조건에 따라 기억되고 캐시될 수 있습니다. 때로는 데이터가 각각 다른 컴포넌트 렌더링 사이에 캐시될 수도 있습니다.
Vuex 저장소
Diffs 앱의 Vuex 저장소는 3가지 다른 모듈로 구성됩니다:
- Notes
- Diffs
- 일괄 코멘트
Notes 모듈은 논의를 담당하며, 여기에는 diff 논의도 포함됩니다. 이 모듈에서는 논의가 가져 오기되고, 새 논의를 폴링하는 것이 설정됩니다. 또한 이 모듈은 이슈 앱과도 공유되므로 이곳의 변경 사항은 이슈 및 병합 요청 모두에서 테스트되어야 합니다.
Diffs 모듈은 diff에 관련된 모든 것을 담당합니다. 이에는 diff 가져 오기, diff 논의를 라인에 할당 및 diff 논의를 생성하는 것이 포함됩니다.
마지막으로, 일괄 코멘트 모듈은 복잡하지 않으며, 드래프트 코멘트 기능에만 책임이 있습니다. 그러나이 모듈은 드래프트 코멘트가 발행 될 때마다 Notes 및 Diff 모듈에서 작업을 디스패치합니다.
API 요청
메타데이터
diffs 메타데이터 엔드 포인트는 모든 diff 파일을 가져 오지 않고도 diffs 앱에서 빠르게 필요로 하는 기본 데이터를 가져 오는 데 사용됩니다. 이는 다음을 포함하지만 이에 국한되지 않습니다.
- Diff 파일 이름 및 diff 파일의 일부 추가 메타 데이터
- 추가 된 및 제거 된 라인 번호
- 브랜치 이름
- Diff 버전
메타 데이터 응답의 가장 중요한 부분은 diff 파일 이름입니다. 이 데이터를 사용하여 diffs 앱이 일괄 diff 요청이 모두 완료 될 때까지 기다릴 필요없이 diffs 앱 내에서 파일 브라우저를 렌더링할 수 있습니다.
메타 데이터 응답을 받으면 diff 파일 데이터가 diffs 앱이 파일 브라우저를 트리보기 또는 목록보기로 렌더링하는 데 필요한 올바른 구조로 처리됩니다.
이 파일 객체의 구조는 다음과 같습니다:
{
"key": "",
"path": "",
"name": "",
"type": "",
"tree": [],
"changed": true,
"diffLoaded": false,
"filePaths": {
"old": file.old_path,
"new": file.new_path
},
"tempFile": false,
"deleted": false,
"fileHash": "",
"addedLines": 1,
"removedLines": 1,
"parentPath": "/",
"submodule": false
}
일괄 diffs
diffs 엔드포인트의 응답 크기를 줄이기 위해이 응답을 서로 다른 요청으로 분할하여:
- 각 요청의 응답 크기를 줄입니다.
- 첫 번째 요청이 완료되자마자 diffs 앱을 빠르게 렌더링할 수 있게 합니다.
첫 번째 요청을 빨리하기 위해, 작은 diff 양을 요청하는 요청이 전송됩니다. 그런 다음 요청되는 diff 양이 증가하여 요청 당 최대 diff 수가 30 개가 될 때까지 증가합니다.
요청이 완료되면 diffs 앱이 받은 데이터를 diffs 앱이 diffs 라인을 렌더링하기 쉽게 하는 형식으로 포맷합니다.
이 작업이 완료되면 diffs 앱은 이제 diff 라인을 렌더링하기 시작할 수 있습니다. 그러나 무엇보다 먼저 diffs 앱은 한 가지 더 포맷을 수행합니다. diff 라인 데이터를 가져 와서 인라인 및 사이드바 모드 간에 쉽게 전환하기 위한 형식으로 데이터를 매핑합니다. 이 형식은 diff_content.vue 구성 요소 내의 계산 속성에서 발생합니다.
렌더 큐
참고: 이전에 필요하지 않을 수도 있습니다. 렌더 큐의 미래를 결정하기 위해 일부 조사 작업이 필요합니다. 우리가 만든 가상 스크롤 바는 아마도이 접근 방식에서 얻은 성능 이점을 제거했을지도 모릅니다.
빠르게 diffs를 렌더링하기 위해, diffs가 렌더링되어야 하는 경우에만 diffs가 렌더링되도록 하는 렌더 큐가 있습니다. 이렇게하면 한 번에 많은 큰 diffs를 렌더링 할 때 브라우저가 멈추는 것을 방지하고 총 차단 시간을 줄일 수 있습니다.
이 파일 렌더링의 파이프 라인은 모든 diff 파일의 아래 조건이 모두 true임을 확인할 때만 발생합니다. 이 중 하나라도 false라면이 렌더 큐가 발생하지 않고 diffs가 예상대로 렌더링됩니다.
- 이 파일의 diffs는 이미 렌더링되었습니까? -이 diffs에 뷰어가 있습니까? (다운로드가 아님을 나타냄)
- diff가 확장되었습니까?
이 차트는 해당되는 파이프 라인을 간단히 보여줍니다.
오류가 발생하는 경우:
- 남은 유휴 시간이 5ms 미만입니까?
- 이 파일을 이미 4번 시도하여 렌더링하려고했습니까?
이러한 확인이 발생한 후 파일은 Vuex에서 ‘렌더링 가능’으로 표시되어 diffs 앱이 diff 라인과 논의를 렌더링할 수 있도록 합니다.
도움말