5. Vue와 Firebase로 나만의 사이트 만들기 - git 사용해보기

 

VF - 5강

 

 

 

---

• 이번 강에서는 git의 사용법을 알아볼 것이다.
• 먼저 vscode 좌측에 3번째 아이콘을 누르면 변경사항이라는 목록이 보이며 변경사항에 마우스를 올려 [+]를 누르면 올릴 상태가 된 것이다.

• 그리고 위에 소스제어 줄에 오른쪽에 체크 표시는 커밋버튼이다. 이 버튼을 누르게 되면 아래의 창이 뜨게 된다.

• 여기서 master를 입력하면 git에 커밋되어 변경사항 목록이 비워지게 된다.
• 커밋이 되었지만 서버에 올라간 것은 아니다. 서버 정보도 없기 때문이다.

 

• 먼저 github에 가입하고 로그인하여 repository(저장공간)를 만든다.
  • github 공식 사이트 : https://github.com/

GitHub · Build and ship software on a single, collaborative platform

• 필자의 입력내용은 아래와 같다.

• repository를 만들고 나면 아래와 같이 화면이 뜨게 된다.

• 여기서 상단에 HTTPS로 체크 후 아래의 코드를 복사한다.

git remote add origin https://github.com/github아이디/저장소명.git
git branch -M master
git push -u origin master

• 그리고 vscode powershell에 붙여넣기 후 실행한다.
• 정상적으로 올라갔다면 아래와 같이 뜰 것이다.

• 필자는 이미 git을 사용한 적이 있어서 뜨지 않았지만 처음 시도시 github 로그인 창이 뜰 것이며, 로그인을 해주면 된다.
• 결과적으로 github에 올라간 것을 아래처럼 확인할 수 있다.

• 참고로 vscode에서 보이는 node_modules 폴더는 .gitignore파일에서 제외 설정이 되어있어 github에는 올라가지 않는다.

 

• 그리고 혹여 다른 PC에서 작업을 해야할 경우 아래와 같은 명령어를 실행한다. 

git clone https://github.com/github아이디/저장소명.git

• 그러나 github에는 node_modules 폴더가 없기 때문에 npm run serve가 동작하지 않는다.
• 그렇기 때문에 아래의 명령어를 실행한다.

npm i

• 실행이 되면 package.json을 기반으로 node_modules가 생성되게 된다.
• 그리고 npm run serve를 실행하면 작업을 계속 진행할 수 있다.

 

• 만약 수정 후 다시 git에 올릴 경우 예를 들어 App.vue을 아래와 같이 수정할 경우를 보자.

<!-- App.vue -->
<template>
  <nav>
    title 수정<br>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

• 수정 후 vscode의 git 관리 탭(왼쪽 3번째 아이콘)을 누르고 변경사항에서 [+]버튼을 눌러준 후 바로 위에 commit 설명을 적고 소스제어 라인에 commit 체크 버튼을 클릭한다.
• 그리고 중간에 뜨는 창에 master라고 작성하면 commit이 되지만 아직 서버에 올라간 상태는 아니다.
• 그래서 소스제어 라인에 [···] 버튼을 눌러 push(푸시)를 눌러주면 github 서버에 올라가게 된다.
• 만약 다른 PC에서 작업 후 현재 PC에 동기화하고 싶은 경우 소스제어 라인에 [···] 버튼을 눌러 pull[풀]을 하거나 왼쪽 아래에 master 바로 오른쪽에 회전 화살표 아이콘을 클릭하면 서버와 동기화된다.

 

• 추가로 커밋 후 추가로 수정하다가 commit 상태로 돌아가고 싶다면 git 관리 탭에서 전체를 바꿀려면 변경사항에 마우스를 올리고 갈고리모양의 화살표를 누르거나 해당 폴더를 바꿀려면 해당 폴더에 마우스를 올려 갈고리모양의 화살표를 누르면 변경이전으로 돌아갈 수 있다.

 

• 이렇게 해서 혼자서 git을 사용할 때에 대하여 알아보았다. 만약 협업을 한다고 하면 조금 더 복잡하니 그럴 경우 따로 공부하길 바란다.

 

• memi dev 유튜브 강의 보기
  • https://memi.dev/board/lecture/1597405241428
  • https://www.youtube.com/watch?v=DNX5_px9ulo 

5 git 사용해보기 : memi

 

 

 

---

해당 글은 [memi dev] 유튜브 채널을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---