VSCode 두 코드 파일 비교하기

VSCode에서 한 화면에 두 개의 코드 또는 파일을 동시에 비교할 수 있는 방법 알고 계셨나요?
작업 간 원본 파일과 복사본 파일을 실시간으로 비교할 때 유용한
VSCode 두 코드, 파일 비교하는 방법에 대해서 소개해드리겠습니다.

---

동시에 두 개의 코드, 파일을 봐야 하는 이유 및 장점

코드나 파일을 비교하는 것은 프로그래밍 작업에서 중요한 부분 중 하나입니다.
프로그래밍 작업 간 새로운 시도를 하기 위해 원본 파일과 복사본 파일을 나눠서 작업을 하는 경우가 많은데요.
작업 완료 후 수정 사항이나 디버깅을 위해 두 파일을 실시간으로 비교하는 작업은 필히 요구됩니다.
다음은 두 코드나 파일을 비교할 때 얻을 수 있는 장점 몇 가지입니다

1. 오류 및 버그 식별: 두 코드나 파일을 비교하면 변경된 부분을 쉽게 찾을 수 있습니다. 새로운 기능을 추가하거나 기존 코드를 수정할 때, 변경 사항을 정확히 확인하여 오류 및 버그를 미리 발견할 수 있습니다.
2. 협업과 팀 작업: 여러 명의 개발자가 작업하는 경우, 다른 개발자가 작성한 코드와 비교하여 어떤 부분이 변경되었는지 쉽게 확인할 수 있습니다. 이는 코드 리뷰 프로세스를 보다 효율적으로 만들어줍니다.
3. 버전 관리: 코드 비교는 버전 관리 시스템(예: Git)에서 자주 사용됩니다. 변경 사항을 추적하고, 특정 버전 간의 차이를 파악하여 코드를 안전하게 관리할 수 있습니다.
4. 성능 최적화: 코드의 성능을 향상하기 위해 변경된 부분을 살펴보고, 비효율적인 부분을 수정할 수 있습니다. 코드를 최적화하면 실행 시간이나 자원 사용량을 줄일 수 있습니다.
5. 문제 해결: 코드나 파일을 비교하여 발생한 문제의 원인을 찾을 수 있습니다. 예를 들어, 특정 기능이 예상대로 작동하지 않을 때, 변경된 코드를 살펴보고 문제의 근원을 찾을 수 있습니다.
6. 코드 유지 보수: 비교를 통해 코드 변경 내역을 이해하고 문서화할 수 있습니다. 코드를 유지 보수하는 동안, 어떤 부분이 왜 변경되었는지 이해하면 코드를 보다 효율적으로 유지할 수 있습니다.
7. 테스트 케이스 개발: 코드 비교는 테스트 케이스를 개발하는 데에도 도움이 됩니다. 변경된 코드를 테스트하고, 예상대로 작동하는지 확인할 수 있습니다.

대부분의 통합 개발 환경(IDE)이나 버전 관리 도구는 코드 비교를 쉽게 할 수 있는 도구를 제공합니다.

VSCode에도 역시나 동시에 두 개의 코드를 비교할 수 있는 도구를 제공합니다.

오늘 소개할 방법은 총 두 가지로

첫 번째는 VSCode Source 자체 기능을 사용하는 방법,

두 번째는 VSCode Diff Extension을 활용하는 방법입니다.

1. VSCode Compare

제가 주로 사용하는 방법인데요.

VSCode 자체적으로 제공해 주는 기능이기 때문에 별도의 설치 및 준비 과정이 필요 없습니다.

Step1. 비교할 두 개의 파일 선택하기

비교하고 싶은 두 개의 파일을 Ctrl + 클릭을 통해 한 번에 select 해줍니다.

Step2. 선택항목 비교하기(Source Compare)

두 개의 파일을 클릭하셨다면, 우클릭해줍니다.

VSCode 한글 버전이라면 선택 항목 비교, 영문 버전이라면 Compared Selected를 클릭해 줍니다.

Step3. 코드 비교하기

그럼 다음과 같이 좌측 우측으로 코드 파일이 보입니다.

코드가 같은 경우 별도의 색 영역이 생기지 않고, 코드가 다를 경우 다른 영역의 색상으로 표시됩니다.

 

2. VSCode Diff Extension

VSCode Diff 익스텐션을 활용하는 방법인데요.

VSCode에 무설치로 두 코드를 비교하는 기능이 있기 때문에 해당 익스텐션은 코드 비교 외에도 추가 기능을 목적으로 하는 분들께서 사용하시면 되겠습니다.

Step1. Diff Extension Install

VSCode Extension에서 Diff를 검색 후 Install 해줍니다.

Step2. Diff 실행

Ctrl + Shift + P를 눌러서 명령 팔레트를 활성화해줍니다.

이후 diff라고 입력하신 뒤, Diff: File을 클릭해 줍니다.

(주의사항!!) 이때, 파일이 활성화되어 있어야 합니다.
예시) A, B 두 개의 파일을 비교한다면 A 또는 B라는 파일이 VSCode에 열려있어야 합니다.

Ctrl + Shift + P > Diff: File

Step3. 비교할 파일의 경로 입력

현재 선택되어있는 파일(본 이미지에서는 stack_.ipynb)과 비교할 파일의 경로를 입력해 줍니다.

저는 같은 경로 상에 위치한 test.ipynb 파일을 선택해 보겠습니다.

Diff 파일 비교

다음과 같이 두 개의 파일 코드를 비교하는 창이 활성화됩니다.

위에서 설명한 바와 마찬가지로

코드가 서로 다르면 서로 다른 색 영역으로 표시됩니다.

Coment

VSCode 두 코드, 파일 동시에 비교하는 방법에 대해서 알아보았는데요.

작업 간 정말 많이 활용하는 방법이니 해당 포스팅 참고하셔서 업무에 도움이 되셨으면 좋겠습니다.

긴 글 읽어주셔서 감사합니다.

 

👉👉 VSCode 한글 및 한국어로 설정하는 방법이 궁금하다면??

VSCode 한글 한국어로 설정하는 방법

👉👉 VSCode에 관한 정보가 더 궁금하다면??

'DataScience/VSCode' 카테고리의 글 목록