[VSCode&Git] VSCode 설치 및 Git 설치하기

안녕하세요.

 

이번에 SeSAC에서 진행하는 풀스택 웹 융합 개발자 양성 과정 교육을 듣고 배운 것에 대하여 정리해보도록 하겠습니다.

우선 컴퓨터에 개발을 위한 환경세팅을 먼저 진행합니다.

 

1. 비주얼 스튜디오 코드 (Visual Studio Code)
2. 비주얼 스튜디오 코드 (Visual Studio Code) 확장 프로그램
3. Git Hub

 

실습환경

운영체제 : Windows 11 Pro 64Bit

RAM : 16GB

 

먼저 코딩할 때 사용할 프로그램을 설치합니다.

여러 가지 프로그램이 있지만 제일 무난하게 사용이 가능한 비주얼 스튜디오 코드를 사용하도록 하겠습니다.

아래 다운로드 링크를 클릭하면 공식 홈페이지로 접속이되며 각 운영체제 및 버전에 맞는 파일로 설치를 진행하시면 됩니다.

1. 비주얼 스튜디오 코드 (Visual Studio Code) 다운로드 링크

 

설치는 어려운 편이 아니라서 Next 만 눌러주셔도 자동으로 설치가 완료됩니다.

설치가 완료된 후 처음 실행하면 영어 버전으로 되어 있는데

자세히는 모르겠는데 사용하다보면 한글 언어 팩을 설치할 수 있다는 메시지가 나옵니다.

메시지를 클릭해서 설치 완료 후 VS Code를 재실행하면 한글 버전으로 사용이 가능합니다.

*만약 관련 메시지가 안나오시는 분은 아래 확장 프로그램 설치메뉴에서 추가로 설치를 진행하시면 됩니다.

 

VS Code를 설치완료하였으면 실습할 때 편리한 확장 프로그램 설치를 진행합니다.

VS Code 실행 후 왼쪽 메뉴에서 빨간색 네모로 표시된 부분을 클릭하여 확장 프로그램 설치를 진행합니다.

 

2. VS Code 확장 프로그램 목록

2-1. Auto Commit Message

• VS Code 확장 관련 스파트 커밋 메시지 생성

 

2-2. GitLens — Git supercharged

• Git 관련 서포터

 

2-3. WakaTime

• 사용 코드 분석 및 시간 확인
• 연동 작업 필요 - 방법 링크

 

2-4. Live Server

• 로컬에서 라이브 서버 생성 및 코드 수정 시 홈페이지 자동 갱신

 

2-5. Korean Language Pack for Visual Studio Code

• VS Code 한글 버전 패치

 

WakaTime은 연동 작업이 필요하여 해당 링크를 통해 확인하고 진행하시면 됩니다.

Live Server 사용 방법은 파일에서 마우스 오른쪽 클릭하면 나오는 메뉴에서

Open with Live Server 버튼을 클릭하면 됩니다.

 

그 외 확장 프로그램은 추가 작업이 필요가 없지만 Git 은 따로 작업을 해줘야합니다.

 

GitHub 홈페이지

먼저 GitHub 홈페이지에 접속해서 계정 생성 및 로그인을 진행한 후에

저장소를 1개 만들어 줍니다.

Repositories 항목으로 이동 후 ⇒ New 버튼 클릭

 

New 버튼을 누르면 Create a new repository 창이 나옵니다.

여기서 해야하는거는 빨간 박스로 체크를 했습니다.

Public or Private 중에서 Public로 선택을 하였는데

이건 공개 or 비공개 항목이라서 편하신거로 선택하시면 됩니다.

 

그리고 Add a README file 를 체크하였는데

Git 저장소를 생성할때 파일 1개를 추가로 생성합니다.

보통 이 저장소가 어떤 거에 대한 내용인지를 적을 때 사용하는 파일이라서

필수로 체크하지 않아도 상관은 없습니다.

그 외 나머지는 안건드리고 Create 버튼을 눌러주면 저장소가 1개 생성됩니다.

 

생성 버튼 클릭 후에 이런식으로 나오면 정상입니다.

 

이제 로컬과 원격 저장소를 연동시키기 위해서

Git Bash 다운로드 링크

해당 링크로 접속하면 Git 공식 홈페이지가 나오는데 해당 버튼을 찾아서 눌러주면 다운로드가 진행됩니다.

 

Next를 계속 눌러서 다운로드를 진행하면 됩니다.

설치가 완료되면 Git Bash 라는 파일이 있는데 실행을 합니다

 

처음 실행하면 이렇게 보입니다.

우선 폴더를 1개 만들어줍니다.

저는 바탕화면에 ‘test’ 이름으로 폴더를 생성하였습니다.

 

폴더 생성 후 다시 Git Bash 창으로 돌아와서 아래 명령어 3개를 입력합니다.

cd ~

cd desktop

cd test

• 폴더 이름이 다른 경우 test 말고 본인이 만든 폴더 이름을 적어주시면 됩니다.)

 

cd 명령어는 폴더를 이동할 때 사용하는 명령어인데 지금은 참고로 알고만 있으시면 됩니다.

 

*작업 하기 전에 꼭 Git Bash 에서 폴더로 이동한 후 진행하셔야 합니다.

 

다시 저장소를 만들었던 git 홈페이지로 돌아가서

Code ⇒ HTTPS 항목을 클릭합니다.

그러면 아래 이미지 처럼 Url 주소가 보이는데 오른쪽 박스를 클릭하면 해당 Url 이 복사가 됩니다.

오른쪽 박스(파란색)을 클릭하여 클립보드에 복사합니다.

 

이제 다시 Git Bash로 돌아와서 아래와 같이 진행합니다.

 

명령어

git config --global init.defaultBranch main

 

개행 문자 관련 처리 (본인 운영체제 맞는 명령어 1개만 입력)

git config --global core.autocrlf true    - 윈도우 버전만 입력 (MAC 입력 X)

git config --global core.autocrlf input   - MAC 버전만 입력 (윈도우 입력 X)

 

git config --global user.name “Go” (Go 대신에 본인이 사용하는 프로필 이름 입력하시면 됩니다) git config --global user.email "abc@gmail.com” (본인이 사용하는 메일 주소 입력하시면 됩니다)

git config --global --list

 

마지막 명령어를 입력하였을 때 아래와 같이 나오면 정상입니다.

 

이제 마지막으로 아까 복사해뒀던 Url 주소를 사용합니다.

 

Git Bash 에서는 Crtl + V 명령어가 안먹히므로 창에서 마우스 오른쪽 클릭하여 Paste를 선택하여 붙여넣기 해줍니다.

 

*git clone 명령어를 치기 전에 Git Bash에서 사용할 폴더가 제대로 설정이 되어 있는지 꼭 확인 후 실행하시기 바랍니다.

아래 url 주소는 본인꺼로 작성하시면 됩니다.

 

git clone https://github.com/user/test.git

명령어 입력 후 아래와 같이 100%, done가 나오면 됩니다.

 

완료 후 폴더에 들어가면 저장소의 같은 이름의 폴더가 만들어져 있고 폴더를 들어가면

.git 폴더, README 파일이 있습니다.

.git 폴더는 숨김 형태라서 폴더 보기 설정을 따로 해줘야 볼 수 있습니다.

README 파일도 처음 저장소 만들 때 ADD 체크를 안했으면 없는 상태로 나올 겁니다.

 

이제 로컬과 원격(git 홈페이지) 저장소가 연동이 완료되었습니다.

로컬에서 파일 작업 후 명령어를 이용해서 등록을 하면 원격 저장소에도 저장이 됩니다.

 

마지막으로 Git Bash에서 생성된 저장소 폴더로 이동하면

cd test

아래와 같이 맨 오른쪽에 (main) 이라는 글씨가 생깁니다.

이렇게 나오면 정상입니다.

 

이 상태에서

code .

명령어를 입력하면 현재 폴더를 기준으로 한 VS Code가 실행됩니다.

 

왼쪽 위에 보면 test 라는 폴더가 기준으로 잡혀있습니다.

처음 실행 시 신뢰 관련 팝업 창이 나오는데

체크박스에 체크 해주고 신뢰버튼을 눌러줍니다.

 

VS Code 에서 README.md 파일을 클릭하여 수정 작업을 해봅니다.

파일 클릭하면 처음 내용에는 저장소의 이름만 입력이 되어 있습니다.

 

아래 내용 처럼 수정 후 파일을 저장합니다. (Ctrl + S)

 

그리고 다시 Git Bash 창으로 돌아가서

git status

명령어를 입력합니다.

 

git status 명령어는 나중에 배울 commit, pull, push 관련 명령어 사용 기준으로 추가로 변경된 내용이 있는지 확인할 때 사용합니다.

 

명령어를 입력하면 여러가지 글자들이 나오는데

결론은 README.md 파일이 수정되었다는 내용입니다.

 

여기서 Git 홈페이지의 원격 저장소로 들어가서 똑같이 변경되었는지 확인해 봅니다.

 

홈페이지의 README.md 파일은 수정이 안되어 있는 것을 볼 수 있습니다.

로컬에서 작업한 내용이 원격 저장소에는 아직 반영이 안된 상태라서 그렇습니다.

 

이제 Git Bash에서 명령어를 이용해서 원격 저장소에 수정한 내용을 반영하도록 합니다.

 

git add ‘파일 또는 폴더 이름’

• 1차로 git에 등록할 파일이나 폴더를 추가합니다.

저희는 전체를 뜻하는 명령어를 사용합니다.

git add .

 

git commit -m “메시지”

• 2차로 git에 등록하는 작업을 합니다.
• 메시지는 원하는시는 내용 작성하면 됩니다.

git commit -m “test 2022-11-23”

 

git push

• commit 까지한 파일들을 원격 저장소에 최종적으로 업데이트 합니다.

마지막 명령어인 git push를 입력합니다.

git push

 

정상적으로 완료되었으면 홈페이지를 새로 고침 합니다.

홈페이지(원격 저장소)의 파일도 수정이 반영되었습니다.

 

추가로 Git Bash에서 log를 볼 수도 있습니다.

git log

밑에서부터

1. 저장소 생성
2. README.md 파일 수정 후 commit & push

• 저 때 메시지는 commit -m “메시지” 에서 입력한 메시지 내용이 들어갑니다.

 

Git은 원래는 이것보다 더 복잡한 내용이 많은 편인데

지금은 간단하게 사용하는 방법에 대해서만 알아보았습니다.

좀 더 자세하게 확인하고 싶은 분은 다른 좋은 글도 많으니 참고하시면 될 것 같습니다.

 

이상으로 VS Code 설정 및 Git에 대하여 알아보았습니다.

감사합니다.