본 포스팅에서는 비주얼 스튜디오 코드에서 원격 저장소인 깃헙과 연동하고 작성한 소스 코드를 간편하게 commit 및 push 하는 방법에 대해 다루어 보겠습니다.
1. git 설치 확인
먼저 vscode를 실행시킨 후 F1 키를 눌러서 명령어 검색창을 띄워줍니다. 그리고 ‘git clone’ 을 검색해줍니다.
![git clone 명령어 체크](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-20-at-8.32.22-PM-1024x831-optimized.png)
만약 여기서 ‘No matching commands’ 등의 메시지가 보인다면, git이 설치되어있지 않은 것이기 때문에 먼저 설치해주셔야 됩니다.
아래 포스팅에서 OS 별 설치방법에 대해 자세히 다루었으니 참고해주세요.
2. 연동하기
설치가 되어있거나 완료했다면, 이제 세번째 ‘Source Control’ 버튼을 눌러주세요.
![Source Control 버튼](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-21-at-11.46.46-PM-1024x911-optimized.png)
버튼을 누르시면, 두가지의 선택지가 보이실텐데요. ‘Open Folder’ 옵션은 이미 로컬 컴퓨터에 존재하는 repository를 여는 것을 의미하고, ‘Clone Repository’ 옵션을 선택하셔야 아직 git clone 하지 않은 repository를 github에서부터 연동할 수 있습니다.
![Clone Repository](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-21-at-11.47.49-PM-1024x911-optimized.png)
이제 이렇게 검색창 같이 뜨는 것을 확인하실텐데요. 여기서 직접 repository URL을 넣어주셔도 되고, Clone from GitHub을 눌러서 로그인하셔도 됩니다.
![Clone from Github](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.05.24-AM-1024x949-optimized.png)
단 하나의 repository만 clone 하시거나 다른 사람의 public repository를 가져오시고 싶은 경우 직접 URL을 넣으시는 걸 추천합니다.
본인의 github 계정을 연동해서 여러 repository를 관리하시고 싶으시면 ‘Clone from Github’ 버튼을 눌러 github 계정 자체를 연동하시는 걸 추천드립니다.
2-1 직접 repository URL 넣기
직접 URL을 넣으시는 경우, github에 로그인 하셔서 해당 repository 페이지에서 URL을 복사 넣어주시면 됩니다.
repository 페이지에서 초록색 ‘<> Code’ 버튼을 누르고 밑에 나오는 주소를 복사하시면 됩니다.
![repository 주소](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.09.45-AM-1024x968-optimized.png)
다시 vscode로 돌아와서 복사한 주소를 ‘Clone Repository’를 누른후 붙여넣어 주시면 됩니다.
![주소 붙여넣기](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.14.33-AM-1024x821-optimized.png)
이후 이렇게 repository를 저장할 곳을 정할 수 있습니다.
![repository 경로 설정](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.16.20-AM-1024x934-optimized.png)
2-2 계정 연동하기 ( Clone from Github )
만약 직접 repository URL을 넣지 않고 ‘Clone from Github’ 버튼을 통해 계정을 연동하시는 경우 로그인 창이 뜨면 github 에 로그인 해주시면 되고, 권한을 부여해주시면 됩니다.
![vscode 계정 연결](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.26.15-AM-1024x934-optimized.png)
github 계정이 성공적으로 연동 되었다면, 계정에 있는 repository 목록들이 뜨고, 선택하셔서 clone 해오시기만 하면 됩니다.
![계정 연결후 repository 선택](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.29.57-AM-1024x825-optimized.png)
![repository 저장 경로 설정](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.16.20-AM-1024x934-optimized.png)
선택하시면, 이렇게 repository를 clone할 위치를 정하실 수 있고, ‘Select as Repository Destination’을 누르면 git clone을 실행합니다.
3. commit, push 하기
vscode에서 git repository 폴더를 여신 후 ‘Source Control’ 패널로 들어가면, 아래와 같은 화면이 보입니다.
임의로 hello_world.txt의 변경사항을 만들고 commit과 push까지 해보겠습니다.
![소스코드 변경사항](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.39.30-AM-1024x825-optimized.png)
이렇게 변경사항을 만들고 저장해주면 왼쪽에 어떤 파일에 변동사항이 있는지 알려줍니다. 파란색 ‘Commit’ 버튼을 눌러줍니다.
![commit](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.43.42-AM-1024x594-optimized.png)
만약 처음 git을 설치하고 첫 commit을 하시는 경우 “Make sure you configure your ‘user.name’ and ‘user.email’ in git” 과 같은 메시지가 보이실 수 있습니다.
이때 터미널이나 CMD를 여시고, name 과 email을 세팅하는 명령어를 실행시켜주시면 됩니다.
git config --global user.email "github 계정 이메일"
git config --global user.name "github에 쓰이는 이름"
다시 돌아가서 버튼을 누르시면 commit을 확인하는 메시지가 뜨는데 그냥 ‘Yes’를 눌러주시면 되고 commit 할때마다 눌러주는게 귀찮으시다면 ‘Always’를 눌러주시면 됩니다.
![commit 확인](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.44.35-AM-1024x928-optimized.png)
이제 첫번째 줄에다가 해당되는 commit message를 적어주시면 됩니다.
![Commit message 작성](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.44.48-AM-1024x928-optimized.png)
다 적으셨다면, 오른쪽 위 체크마크 버튼을 누르시면 commit이 끝납니다.
![commit 완료](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.45.17-AM-1024x485-optimized.png)
이제 ‘Sync Changes’ 버튼을 누르고,
![git push](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.50.57-AM-1024x489-optimized.png)
‘Ok’를 누르면 push가 되고,
![push 확인](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.53.57-AM-1024x837-optimized.png)
Github에서 commit을 확인하실 수 있습니다.
![commit push 후 확인하기](https://junsview.com/wp-content/uploads/2023/08/Screenshot-2023-08-22-at-12.55.17-AM-1024x634-optimized.png)