FRONT-END/VS & GITHUB

Visual Studio 깃 활용 - 커밋 하는 방법: 2022 Ver

서근 2022. 8. 8. 03:42
반응형

Visual Studio

Visual Studio를 사용해서 Github에 쉽게 소스를 커밋할 수 있습니다. 오늘은 새 폴더를 만들고 깃 환경을 구성 후, 커밋하는 방법까지 알아보도록 하겠습니다. 

깃 환경 구성

새 폴더를 작업 폴더로 추가했을 때, Visual Studio에서 바로 초기화하고 깃허브에 연결하는 방법은 다음과 같습니다.

 

1. 파일 탐색기 또는 Finder에서 소스를 저장할 새 폴더를 생성합니다.

2. Visual Studio 를 실행 후  맥북 기준 Command ⌘ + O 를 눌러 생성한 폴더를 선택해줍니다.

3.Visual Studio 의 왼쪽 사이드바에 생성한 폴더 (필자는 GITTEST 폴더)가 나와있는 것을 확인하고, 아래 화살표로 표시한 아이콘을 눌러 줍니다.

4. 아직 깃을 사용할 준비가 되어있지 않아 소스 제어 부분에 '현재 열린 폴더에 Git 리포지토리가 없습니다.'라는 문구를 확인할 수 있습니다. 아래 리포지토리 초기화를 눌러주겠습니다.

5. 다시 사이드바의 탐색기로 돌아와 파일을 생성해줍니다. 어떤 종류의 파일이든 상관없지만, 저는index.html 이라는 파일을 생성해줬습니다.

스테이지에 올리고 커밋 하기

6. 이제, 만든 파일을 스테이지에 올려줘야 합니다. 왼쪽의 소스 제어 탭으로 이동해주고 스테이지에 올리기 위해 '변경 내용 스테이징' 아이콘 ✚ 를 눌러줍니다. 참고로 파일 이름 위로 마우스를 가져가면 문자 U 또는 M이 나타나는데 이는 파일의 상태를 나타내는 문자입니다.

7. 스테이징이 완료되었다면, '스테이징 된 변경 내용' 항목이 생기면서 파일 이름 오른쪽 텍스트가 A로 변경됩니다. 마찬가지로 파일 이름 위로 마우스를 가져가면 '인덱스 추가됨'이라는 메시지를 확인할 수 있습니다.

8. 스테이지에 있는 파일을 커밋하기 위해 소스 제어창 오른쪽에 '커밋' 아이콘을 눌러줍니다.

9. 원하는 커밋 메시지를 1번 칸에 입력 후 2번 체크 박스를 눌러 줍니다.

10. 커밋이 끝났다면 '변경 내용'에 있던 파일이 사라지게 되고, 성공적으로 스테이지에 파일을 커밋하게 됩니다.

GitHub 원격 저장소 연결하기

이제 스테이지에 커밋한 파일을 GitHub 원격 저장소에 연결하기만 하면 됩니다. 깃허브에 새로운 저장소를 생성했다는 가정 하에 진행하도록 하겠습니다.

 

1. 처음 생성한 폴더를 GitHub와 연결하기 위해서 깃허브 주소가 필요합니다. 생성한 저장소의 주소를 복사해줍니다.

2. 지역 저장소를 GitHub에 연결하기 위해선 터미널이 필요한데, Visual Studio에서 터미널을 실행해주겠습니다. [viewterminal] 을 눌러 주거나, Control + ` 를 눌러 터미널을 켜줍니다.

 

3. 이제 터미널 창에 git remote add origin까지 입력 후, 복사한 경로를 뒤에 추가해주고 엔터를 눌러줍니다.

git remote add origin
#예시
git remote add origin https://github.com/Seogun95/gittest.git

4. Visual Studio 하단 상태 표시줄 왼쪽 아래에 main과 클라우드 아이콘이 나타났다면 원격 저장소에 연결되었다는 의미입니다.

GitHub 푸시

작업 폴더를 GitHub에 연결해줬으니, 이제 지역 저장소의 커밋을 GitHubPush 하도록 하겠습니다.

 

1. 소스 제어 창의 상단부의 ··· 아이콘을 누른 후 풀, 푸시다음으로 푸시를 선택합니다.

2. 커밋을 푸시할 원격 저장소를 선택해줍니다.

3. Visual Studio 하단 왼쪽 상단 표시줄에서 main 오른쪽 아이콘이 로딩 아이콘으로 변경되었다가 클라우드로 바뀌면 푸시가 끝났다는 의미입니다.

 

푸시 확인

이제 GitHub로 돌아가서 정상적으로 소스가 커밋되었다면 완료입니다.


오늘은 이렇게 Visual Studio를 사용해서 새 폴더를 만들고 깃 환경을 구성 후, GitHub에 커밋하는 방법까지 알아보았습니다.

 

읽어주셔서 감사합니다🤟