VS Code 로 하는 같은 일 — 버튼 뒤에 뭐가 도는지 알고 누릅니다
Article
세차장에 자동세차 기계가 있습니다. 5천 원 넣고 기다리면 끝납니다. 손세차보다 빠르고 편합니다.
그런데 손으로 한 번도 안 닦아본 사람은 기계가 무엇을 대신해 주고 있는지 모릅니다. 물을 뿌리는 단계와 거품을 묻히는 단계가 왜 나뉘는지, 마른 걸레로 마무리를 왜 하는지 모른 채 그냥 서 있습니다. 그러다 기계가 중간에 멈추면 아무것도 못 합니다.
이 강의를 17강까지 미뤄둔 이유가 그겁니다. 5강부터 손으로 다 쳐봤으니 이제 버튼을 눌러도 됩니다. 오늘 새로 배우는 깃 개념은 하나도 없습니다. 같은 일을 다른 손잡이로 하는 것뿐입니다.
폴더를 엽니다
VS Code 는 코드 편집기지만, 깃을 다루는 화면이 안에 들어 있습니다. 따로 설치할 게 없습니다. 2강에서 깃을 깔았으면 VS Code 가 알아서 찾아 씁니다.
- 01
VS Code 를 켭니다
설치가 안 돼 있으면 공식 사이트에서 받습니다. 무료입니다
- 02
파일→폴더 열기를 고릅니다영문이면
File→Open Folder입니다 - 03
git-study폴더를 고릅니다5강에서 만든 그 폴더입니다
- 04
왼쪽에 파일 목록이 뜨는지 봅니다
README.md가 보이면 제자리입니다
소스 제어 화면이 git status 입니다
왼쪽 세로 막대(활동 표시줄)에 갈래길처럼 생긴 아이콘이 있습니다. 소스 제어입니다. 눌러봅니다.
파일을 하나 고치고 저장해 봅니다. README.md 에 아무 줄이나 하나 더합니다. 그러면 그 아이콘에 숫자 배지가 붙고, 목록에 그 파일 이름이 나타납니다.
터미널
6강에서 하던 것
git status를 친다- 영어 문장으로 읽는다
modified:뒤에 파일 이름이 나온다- 볼 때마다 다시 쳐야 한다
VS Code 소스 제어
오늘 보는 것
- 아이콘을 누른다
- 목록으로 본다
- 파일 이름 옆에 글자 하나가 붙는다
- 고치는 즉시 저절로 갱신된다
파일 이름 옆의 글자가 상태입니다. 6강에서 배운 것과 그대로 연결됩니다.
| 글자 | 뜻 | 터미널에서는 |
|---|---|---|
U | 깃이 처음 보는 파일 | Untracked files 에 있던 것 |
M | 있던 파일을 고쳤다 | modified: |
D | 지웠다 | deleted: |
A | 새 파일을 장바구니에 담았다 | add 한 새 파일 |
+ 가 git add 입니다
파일 이름 위에 마우스를 올리면 오른쪽에 + 가 나옵니다. 누르면 그 파일이 스테이징된 변경 사항 칸으로 올라갑니다.
6강의 장바구니 비유가 여기서 눈에 보입니다. 아래 칸이 매대고, 위 칸이 장바구니입니다. + 는 담는 동작입니다. 잘못 담았으면 - 로 도로 내려놓습니다.
- 변경 사항고쳤지만 아직 안 담은 것 — 매대
+를 누른다=git add- 스테이징된 변경 사항담긴 것 — 장바구니
- 메시지를 쓰고 커밋=
git commit -m "..."— 결제
- 01
담을 파일의
+를 누릅니다여러 개면
변경 사항줄 오른쪽의+로 한 번에 담깁니다 - 02
맨 위 칸에 커밋 메시지를 씁니다
10강에서 배운 대로 씁니다. 도구가 바뀌어도 메시지 쓰는 법은 그대로입니다
- 03
커밋 버튼을 누릅니다
메시지 칸 아래 있습니다
- 04
목록이 비면 성공입니다
장바구니가 비워진 것입니다. 배지 숫자도 사라집니다
커밋했는지 터미널에서 확인해 봅니다
VS Code 에서 커밋한 것이 정말 그 커밋인지 확인해 봅니다. VS Code 안에도 터미널이 있습니다. 상단 메뉴 터미널 → 새 터미널 로 엽니다. 그 창은 지금 연 폴더에서 시작하므로 cd 를 칠 필요가 없습니다.
- $ git log --oneline
- 7b2d4e0 소개 문구 한 줄 추가
- 9f3c1ab README 로 이름 변경
- 34d6227 메모 파일 첫 커밋
7강에서 보던 그 목록에 방금 누른 커밋이 맨 위에 얹혀 있습니다. 버튼이 만든 커밋과 명령어가 만든 커밋은 같은 물건입니다. 깃 입장에서는 누가 시켰는지 구분하지 않습니다.
변경 내용 동기화 가 pull + push 입니다
커밋하고 나면 버튼 이름이 변경 내용 동기화 로 바뀝니다. 아래쪽 상태 표시줄에도 브랜치 이름 옆에 화살표가 뜹니다.
이 버튼이 오늘 유일하게 조심할 자리입니다. 이름이 하나인데 두 가지 일을 순서대로 합니다.
git pull깃허브에 새로 생긴 것을 먼저 받아온다git push그다음 내 커밋을 올린다
받아오는 게 먼저라는 게 중요합니다. 17강에서 순서를 그렇게 잡은 이유가 여기서도 그대로 통합니다. 버튼 하나만 알고 있으면 "왜 올리려고 눌렀는데 남의 수정이 내려오지" 하고 당황하는데, 순서를 알면 당연한 동작입니다.
| 터미널 | VS Code | 몇 강 |
|---|---|---|
git status | 소스 제어 목록 (늘 떠 있다) | 6강 |
git add 파일 | 파일 옆 + | 6강 |
git restore 파일 | 파일 옆 되돌리기 화살표 | 8강 |
git commit -m "..." | 메시지 칸 + 커밋 버튼 | 6강 |
git diff | 파일 이름을 누르면 좌우 비교 화면 | 7강 |
git log | 그래프 · 기록 보기 | 7강 |
git pull + git push | 변경 내용 동기화 버튼 | 17강 |
파일 이름을 한 번 누르면 화면이 좌우로 갈라지면서 왼쪽에 옛것, 오른쪽에 지금 것이 나옵니다. 7강의 git diff 입니다. 터미널에서는 + 와 - 기호로 읽던 것을 색깔로 봅니다. 솔직히 이건 터미널보다 훨씬 편합니다. 고친 줄이 몇 개만 넘어가도 눈으로 따라가기 쉽습니다.
그래도 터미널을 버리지는 않습니다
실무에서도 대부분 이 화면으로 커밋합니다. 빠르니까요. 다만 막혔을 때 빠져나오는 건 여전히 터미널입니다.
버튼을 눌렀는데 아무 반응이 없거나, 빨간 알림이 잠깐 떴다 사라져서 뭐라고 했는지 못 본 경우가 생깁니다. 그때 터미널에서 같은 일을 한 번 쳐보면 에러 원문이 그대로 나옵니다. 16강에서 배운 대로 remote: 줄만 읽으면 됩니다. 15강·16강에서 다룬 인증 문제도 마찬가지입니다. 화면에서는 창이 떴다 닫히기만 하는데, 터미널에서는 이유가 글로 나옵니다.
정리하면
- 오늘 배운 깃 개념은 하나도 없습니다. 5~17강에서 한 일을 다른 손잡이로 했을 뿐입니다
- VS Code 는
폴더 열기로 엽니다. 파일 하나만 열면 소스 제어가 안 잡힙니다 - 소스 제어 화면이 곧
git status입니다. 고치는 즉시 저절로 갱신됩니다 - 파일 옆 글자는 상태입니다 —
U처음 보는 파일 ·M고침 ·D지움 ·A담긴 새 파일 +가git add입니다. 아래 칸이 매대, 위 칸이 장바구니입니다- 메시지를 쓰고 커밋 버튼을 누르면
git commit -m과 같은 커밋이 생깁니다 - 아무것도 안 담고 커밋하면 전부 담아서 커밋할지 물어봅니다. 습관 들 때까지는 하나씩 담습니다
변경 내용 동기화는pull다음push입니다. 두 가지 일을 순서대로 합니다- 파일 이름을 누르면 좌우 비교 화면이 뜹니다.
git diff를 색으로 보는 것입니다 - 막혔을 때는 터미널로 돌아갑니다. 에러 원문은 거기에만 제대로 나옵니다
다음 19강은 잠깐 쉬어가는 강입니다. 깃허브 프로필을 꾸며봅니다. 계정 화면에 자기소개가 뜨게 만들고, 초록색 잔디가 뭘 세는 건지 정확히 봅니다. 명함을 만드는 일이라고 생각하면 됩니다. 여기서 쓰는 도구가 11~13강에서 배운 마크다운입니다. 문법을 배워두고 아직 제대로 써먹지 못했는데, 19강과 20강에서 연달아 회수합니다.