3강 깃(Git)을 이용해 소스코드 관리하기 [React와 Node.js로 만드는 고객 관리 시스템 개발 강좌]
지난 시간까지 해서 리액트(React) 프로젝트를 생성하고 비주얼 스튜디오 코드(VSC)를 이용해서 개발 환경을 구축하는 시간을 가졌습니다. 이번 시간에는 깃(Git)을 이용해서 소스코드를 관리하는 방법에 대해서 알아보도록 하겠습니다. 우리는 향후 프로젝트의 효과적인 관리를 위해서 Git 저장소(Repository)를 생성한 뒤에 해당 저장소에 소스코드를 올리게 될 것입니다.
일단 깃에 소스코드를 올리기 전에 전체 소스코드의 윤곽을 잡고 나서 올리는 것이 좋습니다.
따라서 간단히 소스코드를 수정하며 프로젝트의 윤곽을 이해하는 시간을 가져보도록 하겠습니다.
※ App.js ※
App.js는 실질적인 웹 사이트 화면에 대한 내용 출력을 담당하는 부분입니다.
※ App.css ※
App.css 파일은 App.js와 연동되어 웹 사이트의 메인 부분에 해당하는 내용의 디자인(Design)을 담당합니다. 저는 간단히 기존의 내용을 지운 뒤에 .gray-background라는 이름의 클래스(Class)를 만들어 보았습니다. 클래스는 웹 문서 내 각 요소의 디자인을 구분하기 위한 문법입니다.
※ index.html ※
이후에 index.html을 수정합니다. 기존의 index.html 파일은 온갖 주석으로 가득 차 있었을 거예요. 그러한 주석을 모두 지워주시면 됩니다. 참고로 index.html 소스코드 내에는 <div id="root"></div>라는 부분이 있는데, 이 root 영역에 실제로 App.js의 내용이 출력됩니다.
※ README.md ※
이어서 README.md 파일을 수정합니다. 이것은 깃 허브(Git Hub)에 올라가 출력될 내용입니다. 프로젝트의 소개, 설치 방법, 레퍼런스 등의 문구가 들어가는 공간이라고 이해하시면 돼요.
모든 소스코드를 저장해주신 뒤에 웹 사이트를 새로고침(F5) 해보시면 정상적으로 적용된 것을 확인할 수 있습니다.
※ 깃으로 프로젝트 관리하기 ※
이제 깃 허브에 저장소를 생성하여 우리 프로젝트를 관리해 봅시다.
▶ 깃 허브(Git Hub) 주소: https://github.com/
깃 허브에 회원가입 및 로그인을 해주신 뒤에 [Create Repository]를 진행해주시면 됩니다. 말 그대로 소스코드가 올라갈 수 있는 하나의 저장 공간을 만들어 준다고 이해하시면 됩니다.
위와 같이 프로젝트의 이름만 지어 주신 뒤에 생성 버튼을 눌러주시면 다음과 같이 저장소가 생성됩니다.
이후에 저장소의 주소를 복사해서 가지고 있어주세요. 이제 VSC로 돌아와서 깃(Git) 탭으로 가보시면 우리가 수정한 소스코드의 내용이 모두 왼쪽 화면에 드러나는 것을 확인할 수 있습니다.
먼저 우리가 수정한 소스코드의 내역을 우리 컴퓨터의 로컬 저장소에 반영하기 위해서는 커밋(Commit)을 해주시면 됩니다. 따라서 커밋을 하고자 하는 소스코드를 먼저 추가해주세요.
그리고 커밋을 진행하시면 됩니다. 저는 커밋 메시지로 'Create React Project'라고 지어주었어요.
이후에 우리가 만든 깃 허브(Git Hub)의 저장소로 푸시(Push)하기 위해서 터미널을 열어줍시다.
이제 아까 복사했던 저장소의 주소를 원격지 주소로 설정한 뒤에 푸시(Push)를 진행해주시면, 소스코드가 깃 허브에 업로드 됩니다.
▶ 깃 허브 원격지 설정: git remote add origin https://github.com/ndb796/React-Management-System.git
▶ 깃 허브 원격지로 푸시: git push --set-upstream origin master
푸시 이후에 깃 허브 저장소를 새로고침 해보시면 다음과 같이 소스코드가 모두 업로드 되어 있는 것을 확인할 수 있습니다.
'React와 Node.js로 만드는 고객 관리 시스템 개발 강좌' 카테고리의 다른 글
Git 프로젝트 소개글(README.md) 작성하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 11강]
깃(Git) 프로젝트에서는 README.md 파일을 이용해 소개글을 작성할 수 있습니다. md는 마크 다운(Markdown)의 약자이며 최근 굉장히 다양한 분야에서 사용되고 있는 텍스트 양식입니다. 매우 빠르게 핵심적인 내용을 작성하는 편집 양식이라는 점에서 깃 허브(Git Hub) 또한 공식적으로 이를 채택하고 있습니다.
이번 시간에는 우리의 깃 저장소에서 README.md 파일을 생성하여 프로젝트 소개글을 작성하는 방법에 대해서 소개하고자 합니다.
위와 같이 README.md 파일을 작성하여 간단히 샵(#)을 붙여 글머리를 작성해 봅시다. #은 글머리를 작성할 때 사용합니다.
이제 이러한 내용을 푸시(Push)해서 확인해보도록 합시다.
성공적으로 소개글 정보가 깃 허브(Git Hub)에 들어간 것을 확인할 수 있습니다.
마크 다운은 정말 편집(Edit)을 쉽게 할 수 있는 도구입니다. 다음과 같은 예제들도 확인해 봅시다.
# 글머리
소스코드 블록은 다음과 같이 작성할 수 있습니다.
```c
#include <stdio.h>
int main(void) {
printf("Hello World!");
}
```
링크는 다음과 같이 작성할 수 있습니다.
[블로그 주소](https://blog.naver.com/ndb796)
순서 없는 목록은 다음과 같이 작성할 수 있습니다.
* 깃 강좌
* 깃 Clone
* 깃 Pull
* 깃 Commit
* 깃 Commit ①
* 깃 Commit ②
* 깃 Push
인용 구문은 다음과 같이 작성할 수 있습니다.
> '공부합시다.' -나동빈-
테이블은 다음과 같이 작성할 수 있습니다.
이름|영어|정보|수학
---|---|---|---|
나동빈|98점|87점|100점|
홍길동|97점|78점|93점|
이순신|89점|93점|97점|
강조는 다음과 같이 할 수 있습니다.
**치킨** 먹다가 ~~두드러기~~났어요. ㅠㅠ
푸시(Push) 이후에는 다음과 같은 결과를 확인할 수 있습니다.
'Git으로 시작하는 협업과 오픈소스 프로젝트' 카테고리의 다른 글
| 깃(Git) 환경설정(config)에 대해서 알아보자! (0) | 2019.04.06 |
|---|---|
| Git Rebase 명령을 이용해 특정한 커밋 수정/삭제 하기 (0) | 2019.04.03 |
| Git 로그 다루기 [Git으로 시작하는 협업과 오픈소스 프로젝트 10강] (0) | 2018.12.23 |
| Git 원격 저장소 관리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 9강] (0) | 2018.12.23 |
| Git 브랜치 충돌 처리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 8강] (0) | 2018.12.23 |
Git 로그 다루기 [Git으로 시작하는 협업과 오픈소스 프로젝트 10강]
깃(Git)에서 로그(Log)를 제대로 다룰 수 있으면 깃과 관련한 처리 내역을 쉽게 확인할 수 있습니다. 다시 말해 히스토리(History)를 효과적으로 확인할 수 있습니다. 가장 기본적인 로그 출력 명령어인 git log를 이용해보도록 하겠습니다.
깃(Git) 로그를 구체적으로 확인하고자 한다면 다양한 옵션을 이용할 수 있습니다.
▶ stat: 각 커밋에 따른 통계 정보를 출력합니다.
▶ graph: 브랜치(Branch)와 병합(Merge) 정보를 그래프 형태로 출력합니다.
▶ p: 커밋에 적용된 구체적인 사항을 출력합니다.
▶ pretty: 지정된 형식으로 커밋 정보를 출력합니다.
먼저 stat 옵션을 사용한 결과는 위와 같습니다. 각 커밋마다 통계 정보를 출력합니다.
또한 위와 같이 p 옵션으로 커밋에 적용된 구체적인 사항을 출력할 수 있습니다. -3이라는 옵션을 추가해 최근 3개의 정보만 확인할 수 있습니다.
이후에 pretty 옵션으로 커밋 정보를 특정한 형식으로 출력할 수 있습니다. 대표적인 형태들은 다음과 같습니다.
▶ h: 커밋(Commit) 해시 값을 출력합니다.
▶ an: 작성자 이름을 출력합니다.
▶ ar: 작성 날짜를 출력합니다.
▶ ae: 작성자 이메일을 출력합니다.
▶ s: 커밋 주제를 출력합니다.
▶ cn: 커미터 이름을 출력합니다.
위와 같이 graph 옵션과 함께 사용할 수 있습니다. 그래프 결과를 확인해 보면 언제 브랜치가 생성되었고, 언제 병합이 이루어졌는지를 콘솔 창에서 확인할 수 있습니다.
(+ 추가)
특정 파일에 대한 로그만을 확인하고 싶다면 git log {파일 이름}의 형태로 명령어를 입력할 수 있습니다.
'Git으로 시작하는 협업과 오픈소스 프로젝트' 카테고리의 다른 글
| Git Rebase 명령을 이용해 특정한 커밋 수정/삭제 하기 (0) | 2019.04.03 |
|---|---|
| Git 프로젝트 소개글(README.md) 작성하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 11강] (0) | 2018.12.23 |
| Git 원격 저장소 관리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 9강] (0) | 2018.12.23 |
| Git 브랜치 충돌 처리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 8강] (0) | 2018.12.23 |
| Git 브랜치의 개요 및 사용해보기 [Git으로 시작하는 협업과 오픈소스 프로젝트 7강] (0) | 2018.12.23 |
Git 브랜치 충돌 처리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 8강]
이번 시간에는 깃(Git)에서 브랜치(Branch)를 다룰 때 발생할 수 있는 충돌을 처리하는 방법에 대해서 알아보도록 하겠습니다. 충돌(Conflict)이 발생하면 바로 병합(Merge)을 수행할 수는 없고, 충돌을 해결한 뒤에 병합을 수행해야 합니다. 이러한 내용에 대해 자세히 알아볼게요. 한 번 충돌이 발생하는 일을 가정해봅시다. 충돌은 쉽게 말하면 하나의 파일을 여러 명이 수정한 경우를 의미해요.
위와 같이 하나의 브랜치를 만들어서 작업을 수행해 봅시다.
특정한 파일에 하나의 함수 div()를 추가했습니다.
위와 같이 커밋(Commit)까지 진행해줍니다.
이제 마스터 브랜치로 이동해서 똑같은 파일을 다른 내용으로 수정해보도록 하겠습니다.
이어서 로그(Log)까지 확인해보면 현재 마스터 브랜치를 가리키고 있으므로 마스터 브랜치에 대한 정보만 출력됩니다.
반대로 develop 브랜치를 기준으로 확인하면, 마스터 브랜치에 대한 정보는 보이지 않게 됩니다.
이제 한 번 마스터 브랜치에서 develop 브랜치를 병합(Merge) 해보도록 하겠습니다.
그러면 충돌(Conflict)이 발생했다는 메시지가 출력됩니다.
충돌이 발생한 소스코드를 열어서 확인해 보시면 서로 다른 두 개의 브랜치에 대한 정보가 출력됩니다. 저는 기존의 마스터 브랜치 소스코드를 따르도록 하겠습니다.
다시 파일을 저장해주신 이후에 커밋(Commit)까지 진행해 주시면 성공적으로 병합을 수행할 수 있습니다.
이제 다음과 같이 로그를 찍어 보면, 마스터 브랜치가 develop 브랜치를 병합한 형태가 됩니다.
이제 병합이 완료된 develop 브랜치는 제거해주고 푸시(Push)를 진행해 주시면 됩니다.
'Git으로 시작하는 협업과 오픈소스 프로젝트' 카테고리의 다른 글
| Git 로그 다루기 [Git으로 시작하는 협업과 오픈소스 프로젝트 10강] (0) | 2018.12.23 |
|---|---|
| Git 원격 저장소 관리하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 9강] (0) | 2018.12.23 |
| Git 브랜치의 개요 및 사용해보기 [Git으로 시작하는 협업과 오픈소스 프로젝트 7강] (0) | 2018.12.23 |
| Git에서 커밋(Commit) 내역 수정하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 6강] (0) | 2018.12.22 |
| 소스코드 수정하여 Git 저장소에 반영하기 [Git으로 시작하는 협업과 오픈소스 프로젝트 5강] (0) | 2018.12.22 |
