Slate 의존 관계와 실행 시간
Dependencies viewer는 위젯, 질의, 함수와 변수의 관계를 그래프로 보여 줍니다. 구성 요소는 노드, 의존 관계는 방향이 있는 간선입니다. 함수 라이브러리와 스타일 정보는 이 그래프에 포함되지 않습니다.
노드 추가와 탐색
목록 항목의 체크박스를 선택하거나 두 번 클릭하여 그래프에 추가합니다. 노드의 왼쪽이나 오른쪽에 있는 꺾쇠 모양 버튼을 선택하면 관련 요소를 펼칩니다. 버튼이 없으면 그 방향으로 펼칠 요소가 없습니다.
노드에 포인터를 올렸을 때 오른쪽 위에 나타나는 그래프 아이콘으로 해당 요소의 편집 위치로 이동할 수 있습니다. 노드나 목록 항목을 선택하면 관련 의존 요소를 강조합니다.
예제의 w_filter2dropdown은 obsYear 질의의 데이터를 사용합니다. 사용자가 그 Dropdown에서 선택한 값은 다른 위젯 두 개와 질의 하나에 전달됩니다.
강조 범위와 배치
| Highlight | 범위 |
|---|---|
| Selected only | 선택한 노드만 강조합니다. |
| Neighbors | 선택한 노드와 바로 연결된 상류 및 하류 노드를 강조합니다. |
| Upstream | 선택한 노드와 그 노드가 의존하는 모든 상류 노드를 강조합니다. |
| Downstream | 선택한 노드와 그 노드에 의존하는 모든 하류 노드를 강조합니다. |
노드는 자동 배치되며 끌어서 위치를 바꿀 수도 있습니다. Upstream 또는 Downstream 강조 상태에서 Hierarchy layout을 선택하면 계층 구조로 표시합니다. Restore auto layout으로 자동 배치로 돌아갑니다.
패널을 연 상태에서 앱을 바꿨다면 Refresh로 그래프를 갱신합니다.
성능 열
Dependencies viewer의 표를 펼치면 성능 열을 볼 수 있습니다.
| 열 | 의미 |
|---|---|
| Time in node | 질의와 함수를 처리하는 시간입니다. 질의는 서버 처리, Slate 서버와 브라우저 사이의 지연 및 요청 대기를 포함합니다. 함수는 준비와 계산 시간을 포함합니다. |
| Server time | 질의에만 적용합니다. Slate 서버가 요청을 받은 때부터 데이터 소스에서 결과를 얻어 브라우저로 응답을 보내는 때까지입니다. |
| Load time | 앱의 첫 노드 계산이 시작된 때부터 해당 노드 계산이 끝난 때까지입니다. |
요청 대기는 브라우저의 연결 관리 등에서도 발생합니다. 예를 들어 Chrome의 HTTP/1.0 또는 HTTP/1.1에서는 같은 origin에 TCP 연결 여섯 개가 이미 열려 있으면 다음 연결이 대기할 수 있습니다. 이 시간은 데이터 소스의 계산 시간과 구분하여 봅니다.
Slate 함수의 실행 큐는 함수를 하나씩 처리하므로 긴 비동기 대기도 뒤의 함수에 영향을 줍니다. Time in node와 Load time을 함께 보아 해당 요소 자체가 오래 걸리는지, 앞선 의존 요소를 기다리는지 구분합니다.