> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 컴피 오브젝트

## LiteGraph

Comfy UI는 [LiteGraph](https://github.com/jagenjo/litegraph.js)를 기반으로 구축되었습니다.\
Comfy의 많은 기능은 LiteGraph에 의해 제공되므로, 보다 복잡한 노드를 개발하는 경우 해당 리포지토리를 클론하고 `doc/index.html`에서 찾을 수 있는 문서를 살펴보는 것이 유용할 것입니다.

## ComfyApp

`app` 객체(항상 `import { app } from "../../scripts/app.js";`로 접근 가능)는 브라우저에서 실행 중인 Comfy 애플리케이션을 나타내며, 아래에 나열된 몇 가지 유용한 속성과 함수를 포함하고 있습니다.

<Note>
  **사용 중단됨:** `app`나 프로토타입에 대한 함수 훅킹/몽키패치는 사용 중단되었으며 가까운 시일 내에 변경될 수 있습니다. 대신 공식 [확장 훅](/ko/custom-nodes/js/javascript_hooks) 및 [컨텍스트 메뉴 API](/ko/custom-nodes/js/context-menu-migration)를 사용하세요.
</Note>

<Warning>`app`에 대한 함수 훅킹은 권장되지 않습니다. Comfy는 지속적으로 개발되고 있으며 핵심 동작이 변경될 수 있습니다.</Warning>

### 속성

`app`의 중요한 속성에는 다음이 포함됩니다(전체 목록은 아닙니다):

| 속성              | 내용                                                                                                      |
| --------------- | ------------------------------------------------------------------------------------------------------- |
| `canvas`        | 현재 사용자 인터페이스를 나타내는 LGraphCanvas 객체입니다. 여기에는 `node_over` 및 `selected_nodes`와 같은 흥미로울 수 있는 속성이 포함되어 있습니다. |
| `canvasEl`      | DOM `<canvas>` 요소                                                                                       |
| `graph`         | 현재 그래프를 설명하는 LGraph 객체에 대한 참조입니다                                                                        |
| `runningNodeId` | 실행 중에 현재 실행 중인 노드입니다                                                                                    |
| `ui`            | 큐, 메뉴, 대화상자와 같은 일부 UI 요소에 대한 접근을 제공합니다                                                                  |

가장 자주 접근하게 될 것은 아마도 `canvas`(그래픽 요소)와 `graph`(논리적 연결)일 것입니다.

### 함수

다시 한번 말씀드리지만, 매우 많습니다. 그중 몇 가지 주요 함수는 다음과 같습니다:

| 함수                | 참고사항                              |
| ----------------- | --------------------------------- |
| graphToPrompt     | 그래프를 파이썬 서버로 전송할 수 있는 프롬프트로 변환합니다 |
| loadGraphData     | 그래프를 로드합니다                        |
| queuePrompt       | 프롬프트를 큐에 제출합니다                    |
| registerExtension | 이 함수는 이미 보셨죠—확장을 추가하는 데 사용됩니다     |

## LGraph

`LGraph` 객체는 LiteGraph 프레임워크의 일부이며, 현재 그래프의 논리적 상태(노드 및 링크)를 나타냅니다.\
그래프를 조작하려면 LiteGraph 문서(`doc/index.html`에 있으니 `https://github.com/jagenjo/litegraph.js`를 클론했다면)에 나와 있는 함수들을 참고하세요.

`graph`를 사용해 노드와 링크의 세부 정보를 얻을 수 있습니다. 예를 들어:

```Javascript theme={null}
const ComfyNode_object_for_my_node = app.graph._nodes_by_id(my_node_id) 
ComfyNode_object_for_my_node.inputs.forEach(input => {
    const link_id = input.link;
    if (link_id) {
        const LLink_object = app.graph.links[link_id]
        const id_of_upstream_node = LLink_object.origin_id
        // 등등
    }
});
```

## LLink

`LLink` 객체는 `graph.links`를 통해 접근할 수 있으며, 노드 `link.origin_id` 출력 슬롯 `link.origin_slot`에서 노드 `link.target_id` 슬롯 `link.target_slot`까지의 그래프 내 단일 링크를 나타냅니다. 또한 `link.type`에 데이터 유형을 나타내는 문자열과 `link.id`를 가지고 있습니다.

`LLink`는 `LGraphNode`의 `connect` 메서드에서 생성됩니다(여기서 `ComfyNode`는 하위 클래스입니다).

<Tip>직접 LLink 객체를 생성하지 마세요—대신 LiteGraph 함수를 사용하세요.</Tip>

## ComfyNode

`ComfyNode`는 `LGraphNode`의 하위 클래스이며, 따라서 LiteGraph 문서는 더 일반적인 작업에 도움이 됩니다. 그러나 Comfy는 LiteGraph 핵심 동작을 상당히 확장했으며, 모든 LiteGraph 기능을 사용하지도 않습니다.

<Tip>다음 설명은 일반 노드에 적용됩니다.\
그룹 노드, 원시 노드, 노트, 리디렉션 노드는 다른 속성을 가집니다.</Tip>

`ComfyNode` 객체는 현재 워크플로우의 노드를 나타냅니다. 이를 활용하고 싶은 중요한 속성들이 있으며, 사용하거나 동작을 수정하기 위해 훅킹하고 싶은 함수들도 매우 많습니다.

<Note>
  **사용 중단됨:** `ComfyNode`나 `LGraphNode`의 프로토타입 메서드 훅킹은 사용 중단되었으며 가까운 시일 내에 변경될 수 있습니다. 가능한 경우 공식 [확장 훅](/ko/custom-nodes/js/javascript_hooks)을 사용하세요. 예를 들어 컨텍스트 메뉴의 경우 `getNodeMenuItems`를 사용하세요. 예제는 [컨텍스트 메뉴 마이그레이션 가이드](/ko/custom-nodes/js/context-menu-migration)를 참조하세요.
</Note>

노드 객체에 대한 더 완벽한 이해를 위해 다음 코드를 확장에 삽입하고 `console.log` 명령어에 브레이크포인트를 설정하는 것이 도움이 될 수 있습니다. 이후 새 노드를 생성하면 좋아하는 디버거를 사용해 노드를 탐색할 수 있습니다.

```Javascript theme={null}
async nodeCreated(node) {
    console.log("nodeCreated")
}
```

### 속성

| 속성                | 내용                                                                         |
| ----------------- | -------------------------------------------------------------------------- |
| `bgcolor`         | 노드의 배경색 또는 기본값인 undefined                                                  |
| `comfyClass`      | 노드를 나타내는 파이썬 클래스                                                           |
| `flags`           | 노드의 상태와 관련된 플래그를 포함할 수 있는 사전입니다. 특히 `flags.collapsed`는 접혀진 노드에 대해 true입니다. |
| `graph`           | LGraph 객체에 대한 참조입니다                                                        |
| `id`              | 고유한 ID                                                                     |
| `input_type`      | 입력 유형의 리스트(예: "STRING", "MODEL", "CLIP" 등). 일반적으로 파이썬 INPUT\_TYPES와 일치합니다  |
| `inputs`          | 입력 리스트(아래에서 설명)                                                            |
| `mode`            | 일반적으로 0이며, 노드가 음소거되면 2로 설정되고, 바이패스되면 4로 설정됩니다. 값 1과 3은 Comfy에서 사용되지 않습니다   |
| `order`           | 실행 순서에서 노드의 위치입니다. 프롬프트가 제출될 때 `LGraph.computeExecutionOrder()`에 의해 설정됩니다  |
| `pos`             | 캔버스 상의 노드의 \[x,y] 위치                                                       |
| `properties`      | `"S&R용 노드 이름"`을 포함한 사전이며, LiteGraph에서 사용됩니다                                |
| `properties_info` | `properties`에 있는 항목들의 유형과 기본값입니다                                           |
| `size`            | 캔버스 상의 노드의 너비와 높이                                                          |
| `title`           | 표시 제목                                                                      |
| `type`            | 노드 클래스의 고유한 이름(파이썬에서 가져온)                                                  |
| `widgets`         | 위젯 리스트(아래에서 설명)                                                            |
| `widgets_values`  | 위젯의 현재 값을 담은 리스트                                                           |

### 함수

매우 많은 함수가 있습니다(마지막으로 세어봤을 때 85개). 아래에 일부를 나열했습니다. 대부분의 함수는 LiteGraph 핵심 코드에서 수정되지 않았습니다.

#### 입력, 출력, 위젯

| 함수                     | 참고사항                                                                    |
| ---------------------- | ----------------------------------------------------------------------- |
| 입력 / 출력                | 대부분의 함수는 동일한 이름의 출력 메서드를 가지고 있습니다: s/In/Out/                            |
| `addInput`             | 이름과 유형으로 새로운 입력을 생성합니다                                                  |
| `addInputs`            | `addInput`의 배열 버전                                                       |
| `findInputSlot`        | 입력 이름으로부터 슬롯 인덱스를 찾습니다                                                  |
| `findInputSlotByType`  | 유형과 일치하는 입력을 찾습니다. 우선순위 옵션을 지정하거나 무료 슬롯만 사용할 수도 있습니다                    |
| `removeInput`          | 슬롯 인덱스로 삭제합니다                                                           |
| `getInputNode`         | 이 입력에 연결된 노드를 가져옵니다. 출력 equivalent는 `getOutputNodes`이며 리스트를 반환합니다       |
| `getInputLink`         | 이 입력에 연결된 LLink을 가져옵니다. 출력 equivalent는 없습니다                             |
| 위젯                     |                                                                         |
| `addWidget`            | 표준 Comfy 위젯을 추가합니다                                                      |
| `addCustomWidget`      | 맞춤형 위젯을 추가합니다(‘getComfyWidgets’ 훅에서 정의됨)                                |
| `addDOMWidget`         | DOM 요소로 정의된 위젯을 추가합니다                                                   |
| `convertWidgetToInput` | ‘isConvertableWidget’(‘widgetInputs.js’에 있음)에 의해 허용되는 경우 위젯을 입력으로 변환합니다 |

#### 연결

| 함수                    | 참고사항                                                |
| --------------------- | --------------------------------------------------- |
| `connect`             | 이 노드의 출력을 다른 노드의 입력에 연결합니다                          |
| `connectByType`       | 출력을 다른 노드에 유형을 지정해 연결합니다 - 첫 번째 일치하는 슬롯에 연결됩니다      |
| `connectByTypeOutput` | 입력을 다른 노드 출력에 유형별로 연결합니다                            |
| `disconnectInput`     | 입력에 연결된 링크를 제거합니다(이름이나 인덱스로 지정)                     |
| `disconnectOutput`    | 특정 노드의 입력에서 출력을 연결 해제합니다                            |
| `onConnectionChange`  | 각 노드에서 호출됩니다. `side==1`일 경우 이 노드의 입력입니다             |
| `onConnectInput`      | 연결이 이루어지기 *전* 호출됩니다. 만약 이 함수가 false를 반환하면 연결이 거부됩니다 |

#### 표시

| 함수                 | 참고사항                                                                           |
| ------------------ | ------------------------------------------------------------------------------ |
| `setDirtyCanvas`   | 포그라운드(노드) 및/또는 백그라운드(링크 및 이미지)가 다시 그려져야 한다고 지정합니다                              |
| `onDrawBackground` | 배경을 그리기 위해 `CanvasRenderingContext2D` 객체와 함께 호출됩니다. Comfy에서 이미지를 렌더링하는 데 사용됩니다 |
| `onDrawForeground` | 노드를 그리기 위해 `CanvasRenderingContext2D` 객체와 함께 호출됩니다.                            |
| `getTitle`         | 표시될 제목입니다.                                                                     |
| `collapse`         | 노드의 접힌 상태를 전환합니다.                                                              |

<Warning>`collapse`는 이름이 잘못 지어졌습니다. 접힌 상태를 \_전환\_합니다.\
불린 매개변수를 받아 `node.collapsable === false`를 무시할 수 있습니다.</Warning>

#### 기타

| 함수           | 참고사항                                                      |
| ------------ | --------------------------------------------------------- |
| `changeMode` | 노드를 바이패스(`mode == 4`) 또는 비바이패스(`mode == 0`)로 설정하는 데 사용됩니다 |

## 입력과 위젯

입력과 위젯은 데이터를 노드에 입력하는 두 가지 방법을 나타냅니다. 일반적으로 위젯은 입력으로 변환될 수 있지만, 모든 입력이 위젯으로 변환될 수 있는 것은 아닙니다(많은 데이터 유형은 UI 요소를 통해 입력될 수 없기 때문입니다).

`node.inputs`는 현재 입력의 리스트이며(노드 왼쪽에 색깔 있는 점들), `.name`, `.type`, `.link`(연결된 `LLink`에 대한 참조, `app.graph.links`에 있음)를 지정합니다.

입력이 변환된 위젯인 경우, `.widget`에 이제 비활성화된 위젯에 대한 참조도 보관됩니다.

`node.widgets`는 위젯의 전체 리스트이며, 입력으로 변환되었는지 여부와 관계없이 포함됩니다. 위젯에는 다음 속성이 있습니다:

| 속성/함수      | 참고사항                                       |
| ---------- | ------------------------------------------ |
| `callback` | 위젯 값이 변경될 때 호출되는 함수                        |
| `last_y`   | 노드 내 위젯의 수직 위치                             |
| `name`     | 노드 내에서 고유한 위젯 이름                           |
| `options`  | 파이썬 코드에서 지정된 대로(기본값, 최소값, 최대값 등)           |
| `type`     | 위젯 유형의 이름(아래 참조)을 소문자로 표기합니다               |
| `value`    | 현재 위젯 값입니다. 이는 `get` 및 `set` 메서드를 갖는 속성입니다 |

### 위젯 유형

`app.widgets`는 현재 등록된 위젯 유형의 사전이며, 유형의 이름을 대문자로 키로 사용합니다. Comfy에 내장된 위젯 유형에는 직관적인 `BOOLEAN`, `INT`, `FLOAT`뿐만 아니라 `STRING`(단일 줄과 다중 줄 두 가지 형태), 드롭다운 선택을 위한 `COMBO`, 이미지 로드 노드에 사용되는 `IMAGEUPLOAD`가 있습니다.

맞춤형 위젯 유형은 확장에서 `getCustomWidgets` 메서드를 제공하여 추가할 수 있습니다. {/* TODO 링크 추가 */}

### 연결된 위젯

위젯은 연결될 수도 있습니다—예를 들어 `seed`와 `control_after_generate`의 내장 동작입니다. 연결된 위젯은 `.type = 'base_widget_type:base_widget_name'`를 가집니다; 따라서 `control_after_generate`는 유형이 `int:seed`일 수 있습니다.

## 프롬프트

Comfy에서 `큐 프롬프트` 버튼을 누르면 `app.graphToPrompt()` 메서드가 호출되어 현재 그래프를 서버로 전송할 수 있는 프롬프트로 변환합니다.

`app.graphToPrompt`는 두 가지 속성인 `output`와 `workflow`를 가진 객체를 반환합니다.

### output

`prompt.output`는 그래프의 각 노드의 `node_id`에서 두 가지 속성을 가진 객체로 매핑됩니다.

* `prompt.output[node_id].class_type`, 파이썬 코드에서 정의된 커스텀 노드 클래스의 고유한 이름
* `prompt.output[node_id].inputs`, 각 입력(또는 위젯)의 값을 입력 이름에서 다음으로 매핑한 객체로 포함합니다:
  * 선택된 값이 위젯인 경우, 또는
  * 입력에 연결된 링크가 있는 경우 (`upstream_node_id`, `upstream_node_output_slot`)를 포함한 배열, 또는
  * 위젯이 입력으로 변환되었으나 연결되지 않은 경우 undefined
  * 기타 연결되지 않은 입력은 `.inputs`에 포함되지 않습니다

<Tip>연결된 입력을 설명하는 배열의 `upstream_node_id`는 정수 대신 문자열로 표현됩니다.</Tip>

### workflow

`prompt.workflow`에는 다음 속성이 포함됩니다:

* `config` - 추가 구성 옵션의 사전(기본값은 비어있음)
* `extra` - 워크플로우에 대한 추가 정보를 포함한 사전. 기본적으로 다음을 포함합니다:
  * `extra.ds` - 현재 그래프의 뷰를 설명합니다(`scale` 및 `offset`)
* `groups` - 워크플로우의 모든 그룹
* `last_link_id` - 마지막으로 추가된 링크의 ID
* `last_node_id` - 마지막으로 추가된 노드의 ID
* `links` - 그래프의 모든 링크 리스트. 각 항목은 다섯 개의 정수와 하나의 문자열로 구성된 배열입니다:
  * (`link_id`, `upstream_node_id`, `upstream_node_output_slot`, `downstream_node_id`, `downstream_node_input_slot`, `데이터 유형`)
* `nodes` - 그래프의 모든 노드 리스트. 각 항목은 위에서 설명한 노드 속성의 부분 집합을 매핑한 객체입니다:
  * 다음 속성 포함: `flags`, `id`, `inputs`, `mode`, `order`, `pos`, `properties`, `size`, `type`, `widgets_values`
  * 또한, 출력이 없는 노드를 제외하고 `outputs` 속성이 있으며, 각 출력은 다음을 포함합니다:
    * `name` - 출력의 이름
    * `type` - 출력의 데이터 유형
    * `links` - 이 출력에서 나오는 모든 링크의 `link_id` 리스트(연결이 없으면 빈 리스트 또는 null일 수 있음)
    * `shape` - 출력을 그리는 데 사용되는 도형(기본값은 점인 3)
    * `slot_index` - 출력의 슬롯 번호
* `version` - LiteGraph 버전 번호(작성 당시 `0.4`)

<Tip>`nodes.output`는 출력이 없는 노드에서는 존재하지 않으며, 빈 리스트가 아닙니다.</Tip>