(github)깃허브 - 비주얼 스튜디오 코드(Visual Studio Code)에서 깃 활용하기

(github)깃허브 - 비주얼 스튜디오 코드(Visual Studio Code)에서 깃 활용하기

 

이전 포스팅까지는 윈도우의 cmd를 통해 깃과 깃허브를 사용하는 방법에 대해서 포스팅했습니다.

이번 포스팅에서는 비주얼 스튜디오 코드(VS Code)에서 깃을 사용하는 방법에 대해서 포스팅하겠습니다.

 

비주얼 스튜디오 코드에서 깃 시작하기

먼저 git_test 폴더를 만들겠습니다.

 

다음은 비주얼 스튜디오 코드에서 git_test 폴더를 열어줍니다.

 

좌측에 탐색기 아이콘이 선택되어 있고 폴더명이 나오며 아무 파일도 없는 상태입니다.

3번째에 있는 소스제어 아이콘을 클릭합니다.

 

소스제어 버튼을 클릭 후 리포지토리 초기화를 클릭합니다. 이것은 폴더에서 git init 명령어를 실행하는 것과 같습니다.

 

이제 다시 git_test 폴더를 열어보면 깃이 생성된 것이 확인됩니다.

 

비주얼 스튜디오 코드에서 스테이지에 올리기 및 커밋하기

먼저 README.md 파일을 만들겠습니다.

탐색기 아이콘을 클릭하고 폴더명 옆에 새파일 아이콘을 클릭합니다.

 

파일명을 입력하고 우측 편집창에서 내용을 입력하고 저장(Ctrl+S)합니다.

파일명 우측에 U 마크는 untracked 파일이라고 알려주는 표시입니다.

 

이제 만든 파일을 스테이지에 올리겠습니다.

3번째 소스제어 아이콘을 보면 1이라는 숫자가 있습니다. 아이콘을 누르고 소스제어 창에 들어가면 변경 사항에 위에서 만든 README.md 파일이 나타납니다. 변경 내용 스테이징 버튼인 + 아이콘을 클릭합니다.

 

스테이징이 완료되면 스테이징된 변경 사항이 생깁니다.

README.md 파일에 마우스를 올리면 인덱스 추가 되었다고 알려줍니다.

README.md 파일 우측에 - 아이콘은 스테이징을 취소하는 아이콘입니다.

 

이제 스테이지 올린 README.md 파일을 커밋하겠습니다.

소스제어 창 위쪽에 있는 커밋 아이콘을 클릭합니다. (커밋 단축키: Ctrl+Enter)

 

커밋 메세지 입력창에 내용을 입력하고 Enter를 누릅니다.

 

커밋이 완료되면 스테이징된 변경 사항에 있던 README.md 파일이 사라집니다.

커밋 log를 확인하고 싶다면 ctrl+shift+` 키를 눌러 VS Code의 터미널창을 열고 git log 명령어를 입력합니다.

 

만약 스테이징이나 커밋을 취소하고 싶다면 보기 및 기타작업 아이콘을 누르고 원하는 메뉴를 찾아가서 간단히 클릭하여 취소할 수 있습니다.

 

 

원격저장소(Github)에 push 및 pull 하기

먼저 깃허브에 원격저장소를 만듭니다. 자세한 방법은 이전 포스팅을 참조바랍니다.

reddb.tistory.com/151

(github)깃허브 - 깃허브 가입하기 및 원격저장소 이용하기

 

저는 제 계정에 git_test.git으로 원격저장소를 하나 만들었습니다.

주소는 https://github.com/본인계정명/git_test.git 입니다.

 

비주얼 스튜디오 코드에서 터미널을 열어줍니다.(단축키 Ctrl+Shift+`)

터미널창에 git remote add origin https://github.com/본인계정명/git_test.git 명령어를 입력합니다.

그리고 git remote -v 명령어로 원격저장소를 확인합니다.

 

이제 원격저장소(github)로 푸시하겠습니다.

소스제어 창에서 보기 및 기타작업 아이콘을 클릭하고 다음으로 푸시를 클릭합니다.

 

처음 푸시할때는 알림창이 뜹니다. 확인을 클릭합니다.

 

깃허브 계정을 묻는 창이 뜨면 계정과 패스워드를 입력하고 로그인합니다.

 

Visual Studio Code에서 깃허브를 사용하여 로그인하기를 허용합니다.

 

브라우저가 열리고 깃허브사이트에 접속됩니다.

깃버흐에 액세스 할 수 있도록 VS Code에 권한 부여를 할건지를 묻습니다. Continue를 클릭합니다.

 

다음으로 VSCode용 깃허브에서 추가권한 요청을 한다고 나옵니다.

Authorize github 버튼을 클릭합니다.

 

성공했다고 뜹니다. 그리고 VS Code에서 확장 URI를 열도록 허용하는지 물으면 열기를 클릭합니다.

 

브라우저의 원격저장공간(깃허브)을 새로고침하면 README.md 파일이 push 된것이 확인됩니다.

 

두번째 커밋을 위해 편집창에서 README.md 파일에 내용을 추가 입력 및 저장합니다.

내용을 추가 입력 저장하면 소스제어 - 변경 사항 목록에 README.md 파일이 나타나며 파일수정이 있었다는 M 표시가 나타납니다.

 

이제 소스제어에 있는 README.md 파일을 클릭해봅니다.

어떠한 변경사항이 있었는지를 양쪽으로 분활하여 보여줍니다.

 

두번째 커밋을 하기 위해 메세지를 입력하고 커밋 아이콘을 클릭 합니다.

한번 커밋한 파일이라면 두번째 커밋부터는 스테이징과 커밋을 한번에 진행 할 수 있습니다.

 

스테이징을 하고 커밋하겠냐고 묻는 창이 나오면 예를 클릭합니다.

 

이제 변경 사항에 README.md 파일이 사라졌습니다.

원격저장소에 두번째 커밋을 푸시하겠습니다.

 

원격저장소(깃허브)를 새로고침해보면 두번째 커밋이 올라간 것이 확인 됩니다.

 

원격저장소의 커밋을 pull 해보겠습니다.

현재는 지역저장소와 원격저장소가 동기화되어 있어 변경사항을 만들어줘야 합니다.

깃허브 사이트내에서 README.md 파일을 수정하고 커밋을 하나 생성하겠습니다.

자세한 사항은 이전 포스팅을 참조하세요

reddb.tistory.com/151

(github)깃허브 - 깃허브 가입하기 및 원격저장소 이용하기

 

저는 아래와 같이 내용을 수정하고 커밋하였습니다.

 

현재 VS Code 편집창에 README.md 파일을 보면 두번째 커밋에 대한 내용까지 존재합니다.

이제 VS Code에서 풀을 합니다. 

 

풀이 완료 되면 VS Code 편집창에 README.md 파일에 세번째 커밋 내용이 나타납니다.

원격저장소에서 커밋한 3번째 커밋을 pull 한 것입니다.

 

[github]깃허브 전체보기

'(github)깃허브' 카테고리의 글 목록