# Diff

Diff 기능은 구름 ide에서 연동된 Git 계정에 커밋하기 전, 어떤 부분들이 변경되었는지 미리 확인할 수 있습니다.

### Diff 사용방법

**\[Git] > \[파일 변화]** 탭에서 파일을 누르면 에디터에 소스 코드의 변경 사항을 확인할 수 있는 Diff Tool이 열립니다.

<figure><img src="/files/sL7eItjpM3vCoYfdTCAs" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**<참고>** \[Git] 탭을 열었을 때 **\[`저장소 불러오기]`** 버튼만 있다면 [Github 저장소 불러오기](https://help.goorm.io/ko/goormide/workspace/import-github-repos)에서 먼저저장소를 연결합니다.
{% endhint %}

Diff Tool에는 두 가지 영역이 존재합니다.

1. 소스 코드의 변경 사항을 확인할 수 있는 **에디터** 영역
2. Diff Tool에서 사용할 수 있는 편의 기능을 제공하는 **버튼** 영역

####

#### 에디터 영역

<figure><img src="/files/mUyFzKl7tpqb8tZHzVM8" alt=""><figcaption><p><strong>변경 전 소스 코드(왼쪽)</strong>와 <strong>변경 후 소스 코드(오른쪽)</strong></p></figcaption></figure>

**변경 전 소스 코드(왼쪽)**&#xC640; **변경 후 소스 코드(오른쪽)**&#xB97C; 비교할 수 있습니다.

**변경 전 소스 코드는 삭제된 코드 라인에&#x20;**<mark style="color:red;">**빨간색 하이라이트**</mark>가 되어 있고 라인 번호 옆에 - 표시가 되어 있습니다. \
반대로, **변경 후 소스 코드는 추가된 코드 라인에&#x20;**<mark style="color:green;">**초록색 하이라이트**</mark>가 되어 있고 라인 번호 옆에 + 표시가 되어 있습니다. 또한, 실제로 변경된 코드는 더 진하게 하이라이트 되어 있습니다.

{% hint style="info" %}
**Tip: 파일의 상태에 따라 비교되는 소스 코드가 달라집니다.**

**`스테이지에서 제외된 파일`**&#xC5D0;서 Diff Tool을 열면 변경 전 소스 코드에는 마지막 커밋 시점의 소스 코드가, 변경 후 소스 코드에는 현재 작업 중인 소스 코드가 적용되며, 원본 파일을 수정하면 Diff Tool의 소스 코드도 같이 수정됩니다.

**`스테이지에 추가된 파일`**&#xC5D0;서 Diff Tool을 열면 변경 전 소스 코드에는 마지막 커밋 시점의 소스 코드가, 변경 후 소스 코드에는 스테이지에 추가된 시점의 소스 코드가 적용되며, 원본 파일을 수정해도 Diff Tool의 소스 코드는 같이 수정되지 않습니다.

어떤 상태일 때 연 Diff Tool인지는 에디터 탭에서 구분할 수 있습니다. \
\&#xNAN;**`스테이지에서 제외된 파일`**&#xC5D0;서 연 Diff Tool은 원본 파일명 뒤에 *(Working Tree)*&#xAC00; 붙고, \
\&#xNAN;**`스테이지에 추가된 파일`**&#xC5D0;서 연 Diff Tool은 원본 파일명 뒤에 *(Index)*&#xAC00; 붙습니다.\ <img src="/files/JVfrW61PotX9iSpG8RZV" alt="" data-size="original"><img src="/files/oEounwkpCUXkdAxi3D6N" alt="" data-size="original">
{% endhint %}

#### 버튼 영역

화면 오른쪽 상단에 있는 버튼 영역에서는 네 가지 기능을 제공합니다.

<figure><img src="/files/MyEg4EfeBagQUhyKvuji" alt="" width="375"><figcaption></figcaption></figure>

1. **원본 파일 보기** : 지금 보고 있는 Diff Tool의 원본 파일 에디터를 엽니다.
2. **이전 변경 사항, 다음 변경 사항으로 이동하기 :** 변경 후 소스 코드 영역에서 현재 커서의 이전, 다음 변경 사항으로 커서가 이동합니다.
3. **변경된 코드 영역만 보기 :** 변경되지 않은 소스 코드 영역이 숨겨집니다. 변경되지 않은 소스 코드 영역이 작으면 숨겨지지 않을 수 있습니다. 버튼을 한 번 더 클릭하면 다시 전체 소스 코드를 볼 수 있습니다.
4. **에디터 영역의 보기 방식 변경하기 :** 변경 전 소스 코드와 변경 후 소스 코드의 배치를 변경할 수 있습니다. `Split` 버튼을 클릭하면 좌우 방향으로, `Inline` 버튼을 클릭하면 상하 방향으로 변경됩니다.

<figure><img src="/files/MagFls718BDIbZ37V1uc" alt=""><figcaption></figcaption></figure>

* **버튼 영역 참고 이미지**

<figure><img src="/files/pg6pZJsaslHrxD2gBOFR" alt=""><figcaption><p>변경된 코드 영역만 보기 버튼을 클릭한 경우</p></figcaption></figure>

<figure><img src="/files/iiB1FlceVu8Z2xGibOIF" alt=""><figcaption><p>Inline 버튼을 클릭한 경우</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.goorm.io/ko/goormide/workspace/source-code-management-git/diff.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.