[Vue] Vue 프로젝트 Git 연동하기

*Gitlab을 기준으로 설명하겠습니다.

1. Git 프로젝트 생성

Gitlab에 로그인한 후, 오른쪽 상단에 있는 New Project를 눌러 새로운 프로젝트를 생성합니다.

 

Project name, Visibility Level를 원하는 대로 설정한 다음,
Initialize repository with a ReadME 체크하고 Create Project를 눌러 프로젝트 생성을 완료합니다.

 

README.md 파일이 포함된 프로젝트가 생성된 것을 확인할 수 있습니다.

 

2. VS Code - Git 연동

Git의 프로젝트 페이지에서 오른쪽 상단의 Clone 버튼을 누르고, Clone with HTTPS를 눌러 Git 프로젝트 url을 복사합니다.

 

VS Code에서 F1을 누른 후, git을 검색해 Git: Clone을 선택합니다. 그다음 뜨는 창에 조금 전에 복사한 url을 붙여 넣어줍니다.

 

그러면 디렉터리 선택 창이 뜨게 되는데, 연동하고자 하는 git 프로젝트를 로컬의 어느 위치에 저장할지 지정해줍니다.
저는 /Users/daseul/git/ 아래에 저장하도록 설정했습니다.
그다음 VS Code의 오른쪽 하단에 뜨는 창에서 Open in new Window를 선택하면 새로운 VS Code 윈도우에 연동한 git 프로젝트가 열립니다.

Finder에서도 조금 전에 지정한 위치에 git 프로젝트를 위한 디렉터리가 생성된 것을 확인할 수 있습니다.

 

3. Commit 테스트

Commit 테스트를 하기 전에 간략하게 로컬 저장소(내 pc)에 존재하는 프로젝트의 변경사항이 원격 저장소(git)에 반영되는 과정을 알아보겠습니다.

이미지 출처:https://rogerdudler.github.io/git-guide/index.ko.html

 

변경사항이 반영되는 과정은 크게 Staging - Commit - Push로 나눠집니다.
내용이 변경된 파일들은 Stage(Index)에 있어야 Commit 될 수 있습니다.
그래서 Stage (All) Changes를 통해 변경된 파일들을 전부(or 반영되길 원하는 파일들만 선택적으로) Staged 상태로 만들어 줍니다.


그다음 commit을 통해 staged 상태의 파일들을 변경 내용을 확정(stage에서 head로 이동)합니다.
commit은 여러 번 할 수 있고 가장 마지막으로 실행한 commit이 반영됩니다.
여기서 commit message를 작성하여 파일에서 변경된 내용이 무엇인지 알 수 있도록 합니다.
commit message는 변경 내용을 직관적으로 알 수 있도록 정확하지만 간결하게 작성하는 것이 좋습니다.
(좋은 git 커밋 메시지를 작성하기 위한 8가지 약속)


commit으로 변경 사항을 확정한 다음엔, Push로 확정 내용을 원격 저장소에 반영합니다.
이 과정들을 거쳐 로컬 저장소의 변경 사항이 원격 저장소에 반영되게 됩니다.



VS Code와 Git 프로젝트가 잘 연동되었는지 확인하기 위해 Commit 테스트를 해보겠습니다.

README.md 파일을 열어 내용을 수정합니다.
3번째 라인에 VS Code - Git 프로젝트 연동 테스트라는 내용을 입력하고 저장하면
왼쪽 메뉴바의 3번째 아이콘에 1이라는 숫자가 표시되고, CHANGES에 README.md 파일이 표시됩니다.
(CHANGES에는 내용이 변경된 모든 파일들의 목록이 보이고, 그 파일들의 개수가 3번째 아이콘에 표시됩니다.)

 

F1을 누르고 git을 검색해 Stage All Changes를 누르면 왼쪽 내비게이터의 모습이 사진과 같이 변경됩니다.

 

commit message를 입력한 후, commit 버튼을 눌러 변경 내용을 확정합니다.
그러면 chages 목록 상태가 사진과 같이 변경됩니다.

 

이제 commit 상태에 있는 변경 사항을 원격 저장소에 반영하기 위해 F1을 누르고, Git:Push를 실행합니다.
그 후 원격 저장소(git)에 들어가 보면,
VS Code에서 입력한 commit message와 함께 README.md의 내용이 변경된 것을 확인할 수 있습니다.

 

기존 Vue 프로젝트 Git에 Push 하기

이전에 만들어둔 Vue 프로젝트를 Push 해서 git으로 관리할 수 있도록 해보겠습니다.
(위의 순서대로 VS Code와 Git을 연동한 후에 그 안에서(로컬 저장소에서) Vue 프로젝트를 생성하는 방법과 git 명령어를 통해 기존 프로젝트를 push 하는 방법도 있습니다.)


Finder에서 vue-workspace가 있는 위치로 이동합니다.
그리고 새로운 Finder에서 git과 연동된 로컬 저장소의 위치로 이동합니다.

 

vue-workspace에 있는 vue 프로젝트의 내부 파일들을 모두 git의 로컬 저장소에 복사합니다.
그다음 VS Code에서 F1-Git:Stage All Changes를 선택 후,
commit message를 입력하고 commit, push를 차례로 실행합니다.
VS Code에서 vue 프로젝트와 동일한 구조를 확인할 수 있고, Git 사이트에서도 commit이 제대로 이루어진 것을 확인할 수 있습니다.

 

이제 로컬 저장소에서 코드를 구현하고 commit과 push를 이용해 git으로 프로젝트를 관리할 수 있습니다.
(복사를 진행하다 보면 VS Code에서 node_modules와 관련해 변경된 파일이 너무 많다는 메시지와 함께 .gitignore에 npde_modules를 포함하겠냐고 묻는 메세지 창이 뜰 수 있습니다. 이 때, yes를 눌러주시면 됩니다.)

 

 

.gitignore 수정하기

.gitignore는 로컬 저장소의 프로젝트에서 원격 저장소에 반영되지 않길 바라는 파일 or폴더들을 명시해두는 파일입니다.
.gitignore에 다음과 같은 내용을 추가합니다.(본인의 필요에 따라 수정해도 OK!)

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debud.log*
yarn-debuf.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?