이 글은 VS Code(Visual Studio Code)와 Git을 연동하여 VS Code로 작성한 소스코드를 GitHub에 반영해보는 작업을 포스팅합니다. 형상관리를 위한 프로그램은 Sourcetree를 사용하고 있습니다. 

맥북에서 VS Code와 Git 연동 후 Sourcetree로 GitHub에 소스코드 반영하기

이번 글은 지난 번 형상관리 환경을 구축한 포스팅에 이어 VS Code와 Git을 연동한 후, 간단하게 수정한 소스코드를 Soucetree를 통해서 GitHub에 반영해보는 작업을 해보려 한다.

지난번 포스팅은 여기 ↓↓↓

 

맥북에서 Git, GitHub, Sourcetree 연동해서 형상관리 환경 구축하기

소프트웨어 개발(프로그래밍)을 할 때 가장 중요한 것이 형상관리입니다. 이 글을 통해 맥북에서 Git, GitHub, Sourcetree를 활용하여 형상관리 환경을 구축하는 방법을 알아봅시다. 맥북에서 Git, GitHub

naramii.tistory.com

 

우선 VS Code 설치 및 Git 연동부터 시작해보자.


반응형

VS Code 설치 및 Git 연동하기

개발을 위한 IDE에 대해 고민이 많았는데, 이클립스는 너무 무겁고, Intellij는 무겁지만 매우 편리해서 사람들에게 유명한데, 다만 상용버전을 써야 그 혜택을 다 누릴수 있다는 점에서 제외했다. 무거운 프로젝트 보다는 우선은 스터디 개념으로 사용할 간단한 IDE가 필요하여 Visual Studio Code를 선택했다.

 

VS Code(Visual Studio Code)의 경우 아래 링크에서 다운로드 받을 수 있다. Download Mac Universal을 클릭하여 가장 안정적인 버전을 다운로드 하자.

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

다운로드

다운로드 하면 zip 파일이 생성되고 압축을 풀면 Visual Studio Code.app 파일이 나온다. 이 파일을 애플리케이션 폴더로 옮겨 사용하면 된다.

Visual Studio Code

VS Code를 열면, 왼쪽에 여러가지 버튼이 보이는데 3번째 버튼이 Git 로컬 저장소를 가져오는 버튼이다. 3번째 버튼을 누르고 폴더 열기를 선택하자.

Git 연동

그리고 지난번 포스팅에서 저장했던 로컬 저장소(repository) 폴더를 열어주면 아래와 같이 트리 형태로 로컬 저장소의 여러 파일들이 보이고, 관리할 수 있게 된다.

로컬 저장소 불러오기

우리는 원격저장소로 업로드를 위해 Sourcetree라는 것을 사용하기 때문에, VS Code에서는 GitHub 원격 저장소와 연동하기 위해 복잡한 작업이 별도로 필요하지 않다. 단순히 로컬 저장소만 불러와 코드를 수정하고 빌드할 수 있으면 된다.


반응형

코드 수정 및 수정 내용 반영(+Sourcetree 사용하기)

그럼 이제 코드를 수정하고 수정한 내용을 GitHub에 반영해보겠다.

README.md 파일이 있어서 다른 소스를 만들지 않고 테스트를 위해 이 파일을 수정해보았다. 파일을 수정하고 저장을 하자마자 위에서 보았던 3번째 아이콘에 1이라는 숫자가 뜨고 커밋(Commit)이라는 버튼이 활성화된다.

커밋

하지만 여기서 커밋을 하더라도 원격 저장소(GitHub)에는 반영되지 않으므로, 아무 것도 하지 않고 우리는 Sourcetree를 켜준다.

Sourcetree를 켜면 Uncommitted changes라는 부분이 있는데, 이걸 클릭하면 대기 중인 파일에 README.md가 보이고, README.md를 클릭하면 오른쪽 하단에 해당 파일이 어떻게 수정되었는지 보여준다. 우리는 이 파일을 커밋해야 하므로 상단 메뉴 중에 커밋을 누른다.

Sourcetree

커밋을 누르면 아래와 같이 커밋 메시지를 적는 부분이 나온다. 커밋 메시지에 커밋할 파일과 관련된 수정 내용을 적은 뒤 커밋 버튼을 누르면 커밋이 완료된다.

커밋

커밋은 파일의 수정 사항을 하나의 단위로 저장한 것으로 커밋만 하더라도 버전 관리가 되는 상황이지만, 원격 저장소에는 반영되지 않았다.

원격 저장소인 GitHub에 반영하기 위해서는 푸시 버튼을 눌러주어야 한다.

반응형

커밋을 하면 푸시를 해야한다는 의미로 푸시 아이콘에 숫자가 뜨기 때문에 푸시 버튼을 눌러 커밋 내용을 확인하고 처리하면 된다.

푸시

푸시 버튼을 누르면 원격 저장소, 브랜치를 선택하는 창이 뜬다. 원하는 원격 저장소와 브랜치를 선택한 후 확인을 누르면 푸시가 완료되고 원격 저장소에도 수정사항이 반영된다.

푸시

 

GitHub에서 확인해보면 아래와 같이 커밋 메시지 확인과 함께 파일이 몇 분 전에 업데이트 된 것을 확인할 수 있다.

GitHub

 

지금까지 VS Code에서 코드를 작성하고, Sourcetree를 통해 GitHub 원격 저장소로 수정 사항을 반영해보았다.

이제 본격적으로 개발을 할 수 있을 것 같다.

 

 

+ Recent posts