이화마켓 웹어플리케이션 개발 : GITHUB DESKTOP 설치와 VSCODE 연동 가이드

이화마켓 웹어플리케이션 개발 : GITHUB DESKTOP 설치와 VSCODE 연동 가이드

(1) GIT

EWHAMARKET 웹어플리케이션 개발을 하면서 팀원들과 수정 사항을 GIT에 반영함으로써 쉽게 변경 사항들을 파악하고 확인할 수 있다. 무엇보다 여러 브랜치를 생성하고 변경 사항들을 시점별로 확인할 수 있다는 점에서 매우 유용하다.

 

 

---

(2) VSCODE

처음에는 GIT과 연동하기 위해 텍스트 편집기로 goormIDE를 사용했는데, 사용법이 익숙치 않아서인지 많은 어려움을 겪어서 VSCODE로 진행하기로 결정했다. WINDOW/MAC 설치 가이드도 명확하게 제공되어 있어 프로젝트 수행 기간동안 VSOCDE를 사용하기로 결정한건 정말 좋은 선택이었다. VSCODE로 코드를 작성하고 편집하여 COMMIT/PUSH를 하면, GIT에 수정사항이 반영되는 것이다. 

 

---

(3) GIT DESKTOP

처음에는 GIT과 VSCODE를 연동하기 위해 GITLENS를 사용했는데, 프로그램상의 문제인지 변경 사항이 내 컴퓨터에서 보이지 않아서 가장 흔히 쓰이는 GIT DESKTOP을 사용하기 시작했다. 설치 방법도 간단하고, 내가 수정한 부분들도 아래와 같이 명확하게 확인할 수 있어 매우 편리하다. 삭제한 부분/추가한 부분이 표시되기 때문이다. 무엇보다 브랜치 간 이동이 편리하고 PULL/PUSH 기능 수행도 간단하다. 

변경 사항 확인

---

(4) GIT DESKTOP 설치 및 연동

설치 당시 다른 여러 기술 블로그들로부터 받았던 도움을 바탕으로 GIT DESKTOP 설치 및 연동 가이드를 작성해보려 한다. 참고로 설치 전에, GIT과 VSCODE(또는 다른 텍스트 편집기)가 미리 설치되어있어야 한다. 

 

-설치

GIT DESKTOP 설치 링크는 GITHUB 페이지에서 쉽게 찾을 수 있다. 오른쪽 상단의 Code를 누르면 GIT DESKTOP 설치 코드로 이동할 수 있는 Open with GitHub Desktop 표시가 뜬다. 이미 설치가 되어있다면 GIT DESKTOP으로 이동할 것이다.   

 

설치가 안되어있다면, 다음과 같이 바로 설치 가능한 페이지로 이동한다. 

 

설치 후 실행시키면 다음과 같은 화면이 뜬다.  설치는 빠른 시간 내에 완료된다. 

 

-설치 후 로그인 및 연동

설치 후에는 git 계정으로 로그인할 수 있는 화면이 뜬다.

이메일을 따로 설정할 수 있는데, git 가입시 사용한 이메일을 사용하면 더 편리하다.

이미 존재하는 GIT 계정으로 로그인했기 때문에 현재 존재하는 모든 프로젝트 레포지토리가 모두 뜬다. 또한 나의 경우 이미 GIT에서 생성한 프로젝트들이 있기 때문에 열고자 하는 프로젝트를 선택해주기만 하면 된다. 

이제 VSCODE와 GIT을 연동해 사용할 수 있는 환경이 모두 세팅된 것이다.

 

-사용

 

• 코드를 편집한 후에 다른 공동 작업자들에게도 모두 보여지게 하려면 간단한 설명과 함께 commit후 push를 하면 된다.
• 그리고 변경 사항을 가져오려면 fetch/pull을 하면 된다.
• Current Branch를 변경하기 전에는 수정 사항들을 commit하거나 discard 해야한다.

 

---

VSCODE와 GIT을 연동하여 사용할 수 있는 GITDESKTOP 설치 및 사용에 대해 알아보았다. GITDESKTOP 외에도 VSCODE에서 GIT을 가져올 수 있는 방법은 다양하기 때문에, 자신이 편리한 방법을 택해 사용하면 된다.