■ Visual Studio Code(VSCode) 란? 

 

Visual Studio Code(이하 VSCode)는 MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며 IntelliSense, Debugging, Built-in Git, Extensions 등의 기능를 제공 합니다. 

기존에 Front-End 개발에 Sublime Text를 사용하셨던 분들도 최근에는 VSCode를 많이 사용하시는 것 같습니다. (무료, 오픈소스

다운로드는 https://code.visualstudio.com/ 에 접속하셔서 본인의 OS에 맞는 버전을 다운로드 받아 설치 하시면 됩니다. (Window, Linux, Mac 모두 지원)

 

 

 

■ Git 설치

 

Git (https://git-scm.com/) 홈페이지에서 설치 파일을 다운로드합니다. 2019년 2월 9일 기준 최신 안정 버전은 2.20.1입니다. 설치된 Windows 플랫폼 종류에 맞는 파일을 다운로드합니다. 여기서는 64비트를 기준으로 진행합니다. 시스템 종류는 [Windows Pause/Break] 키로 확인할 수 있습니다.

 특별한 언급이 없는 한 기본값 그대로 진행합니다.

 우리는 VSCode를 사용할 것이기에 Use Visual Studio Code as Git's default editor를 선택합니다.

 바탕화면이나 아무 폴더에서 마우스 오른쪽 메뉴를 연 뒤 'Git Bash Here'를 클릭한 후 뜨는 콘솔 창에서 'git'을 입력해봅니다.

 git이 제대로 출력되면 정상적으로 설치된 것입니다.

 

 

■ vsCode 에 Git 설정

 

□ 1. Local Folder 지정

VSCode 에서 프로젝트에서 사용할 특정 폴더를 선택해야 지정합니다. (파일 > 폴더열기)

폴더를 선택하는 방법은 다양한데.. 모르시는 분은 없겠죠?

 

 

□ 2. Git 초기화

좌측 메뉴에서 소스제어 메뉴 선택후 레포지토리 초기화 버튼을 선택합니다. (아래 이미지 참고)

VSCode는 기본적으로 Git이 기본 소스제어로 설정되어 있습니다.

 

초기화 버튼을 선택하면 아래와 같은 화면이 표시되고 원하는 폴더를 선택하시면 됩니다.(기본적으로 최초 열었던 폴더가 표시되어 있음)

윈도우 디렉토리를 확인해 보면 .git 폴더가 생성 된 것을 확인 할 수 있습니다.

.git 폴더가 생성되면 VSCode 또한 아래와 같이 메뉴가 생성 되는 것을 확인 할 수 있습니다.

 

 

□ 3. Git Stage 관리

간단하게 파일을 하나 생성해 보도록 하겠습니다. github에 필요한 README.md 파일을 생성합니다.

아래 그림에 있는 것 처럼 좌측 메뉴의 탐색기 버튼을 누른 후 파일을 추가 해주면 소스제어 아아콘에 1이 표시되는 것을 보실 수 있습니다.

소스제어메뉴를 선택하면 아래와 같이 보여 지며 파일에 마우스를 위치하면 + (변경 내용 스테이징) 아이콘이 보여 집니다.

해당 아이콘을 선택하면 Stage 처리 됩니다.

 

Git Staging 에 대한 내용을 모르시는 분은 Git 문서를 참고 하시길 바랍니다. (https://git-scm.com/book/ko/v2)

간단히 말하면 repository에 반경되기전의 상태 즉, 수정된 파일이 커밋 되기 전의 상태 입니다. 그림으로 보면 아래와 같습니다

추가로 ... 메뉴를 선택하면 스테이징 취소 등의 작업을 진행 할 수 있습니다.

 

 

□ 4. Git commit

Staging 처리 되었으므로 commit 명령어를 통하여 git에 반영 하면 됩니다. VSCode 소스 제어에서 아래의 메뉴를 선택하시면 됩니다.

 

위의 메뉴를 선택하면 아래의 창이 표시됩니다. 명령어로 git commit -m "first commit" 을 입력하는 것과 동일합니다.

 

 

□ 5. Remote Git 추가

저는 이미 github 사이트를 통하여 javascript-study 라는 repository를 생성해 둔 상태이므로 remote repository에 연결 합니다.

글 서두에서도 말씀 드렸지만, 관련 내용에 대한 부분은 다른 글을 참고 하시면 됩니다.

VSCode를 통하여 remote 하는 방법이 메뉴얼에서 확인 되지 않으므로, 터미널을 통하여 아래의 명령어를 입력 해 줍니다.

git remote add origin "github 등에서 생성한 Repository URL"

위의 명령어가 적용되면 생성한 git 로컬 디렉토리에 있는 내용이 github Repository에 push 가능한 상태가 됩니다.

VSCode에서는 아래 쪽에 클라우드 아이콘이 생성 됩니다.

 

 

□ 6. Remote Git Push 하기

클라우드 아이콘을 선택하면 최초 접속이므로 아래와 같이 github 로그인 정보(username, password)를 묻는 창이 생성 됩니다.

 

정보 입력이 완료되면 github 사이트로 반영 됩니다. 반영 완료 후에 github 사이트를 확인해 보았습니다.

아래와 같이 정상적으로 파일이 반영 된것을 확인 하실 수 있습니다.

이후 작업도 동일한 형태로 진행 하시면 됩니다.

 

push 명령어는 ... 메뉴를 통하여 진행 가능 합니다. (git push -u origin master)

 

 

 

 

 



출처: https://promobile.tistory.com/378 [No Fear.]

출처: opentutorials.org/module/3999/24163

 

+ Recent posts