일상/컴퓨터

[GitHub 깃 & 깃허브 입문] 깃허브로 협업하기

미적미적달팽이 2023. 4. 14. 16:51

[GitHub 깃 & 깃허브 입문] VS code로 다루기

 

[깃 & 깃 허브 입문] VS code로 다루기

저장소 만들기 VS code 작업용으로 새 파일을 만들고 작업 환경을 구축해보는 것으로 시작합니다. 작업 폴더 생성 비쥬얼 스튜디오에서 사용할 새 폴더를 컴퓨터에 원하는 위치에 하나 생성합니

gunrestaurant.tistory.com


06 -1 깃허브 프로필

깃허브 프로

깃허브 프로필 화면은 위 사진과 같이 확인할 수 있습니다.

  • 가장 왼쪽에 사진과 이름, 그리고 그 프로필을 편집할 수 있는 칸이 있습니다. 프로필 편집하기를 누르면 이름, 상태, 소속, 주소, 외부 링크 등을 편집할 수 있습니다.
  • 오른쪽에는 공개 저장소가 나타납니다. 공개 저장소를 만들어서 배포하는 프로그램을 다른 유저들이 확인할 수 있습니다.
  • 아래에는 깃허브에서의 활동 내역을 보여줍니다. 

 

컨트리뷰션(Contribution)

컨트리뷰션(Contribution)이란 자신의 깃허브에 커밋을 올리는 것부터 해서, 프로젝트에 PR 등을 남기는 것까지 깃허브에서 하는 모든 활동을 통틀어서 일컫는 말입니다. 위의 사진에서 마치 달력 형태의 to-do list같은 초록색 칸이 컨트리뷰션 그래프라고 합니다. 이를 통해 사용자가 얼마나 깃허브에서 활발한 활동을 했는지 알 수 있습니다.

 

06-2 README 파일과 마크다운

README 파일

README 파일은 markdown 문법을 사용하여 확장자가 md로 지정되어 있습니다. 한번 다른 저장소로 들어가서 README 파일이 어떤 식으로 구성되어 있는지 확인해봅니다.

자바스크립트 강의서 실습파일

https://github.com/funnycom/js-basic-book

 

GitHub - funnycom/js-basic-book: [Do it! 자바스크립트 입문]의 실습 파일입니다. 책을 마쳤다면 실전 프

[Do it! 자바스크립트 입문]의 실습 파일입니다. 책을 마쳤다면 실전 프로젝트에 도전해 보세요. - GitHub - funnycom/js-basic-book: [Do it! 자바스크립트 입문]의 실습 파일입니다. 책을 마쳤다면 실전 프로

github.com

마이크로소프트 사의 vscode

https://github.com/microsoft/vscode-docs

 

GitHub - microsoft/vscode-docs: Public documentation for Visual Studio Code

Public documentation for Visual Studio Code. Contribute to microsoft/vscode-docs development by creating an account on GitHub.

github.com

조금 읽어보면 감이 오시겠지만, READMEmd 파일은 이렇듯 저장소에 같이 저장되어 있어서 이를 깃허브가 읽고 마크다운 형식의 내용을 출력해주는 시스템입니다.

이를 본인이 원하는 대로 글을 편집해서 이 프로그램에 대한 설명서와도 같은 역할을 하게 해주는 것입니다. 보통 오픈 소스로 배포하는 프로그램에 경우에는 설치 방법이나 사용법 등을 상세히 적는 것입니다.

 

README 파일 작성하기

테스트 용도로 만들어 두었던 깃허브 저장소에 들어가면 Add a README라고 버튼이 있습니다. 이를 눌러서 README를 작성하는 곳으로 진입을 합니다.

만일 저장소를 생성할때 README 파일 옵션에 기본적으로 체크를 하고 넘어갔다면, Add a README 대신에 연필 버튼이 있어서 그것을 누르면 편집할 수 있습니다.

깃허브 마크다운 편집기는 마치 코드 작성하는 cell과도 유사하게 생겼습니다. Jupyter Notebook 등 으로 노트셀을 자주 편집해보셨다면 깃허브의 마크다운 편집도 이와 똑같은 Markdown 방식을 사용하기 때문에 어렵지 않게 편집이 가능합니다. markdown에서 개행은 enter를 두 번 쳐서 빈 줄을 하나 띄워야 하는 것만 주의하시면 기본적으로 원하는 글을 쓰는 데에 무리가 없습니다.

또한 Edit new file 옆에 Preview 버튼을 눌러서 자신이 작성한 마크다운이 제대로 출력이 되는 지 미리보기가 가능합니다. 오른쪽의 Show diff 에 체크를 선택하면 이전 README와 차이점을 비교해서 보여줍니다.

README.md 또한 하나의 파일로 커밋 작업을 거치는 셈입니다. 아래에 있는 Commit changes에서 커밋 메시지를 작성할 수 있습니다. Commit을 하게 되면 저장소 메인 화면으로 나가게 되어서 저장소 파일 목록에 README 파일이 새로 생성된 것을 확인할 수 있습니다.

 

마크다운 기본 문법

문법 설명
# 제목1
## 제목2
### 제목3
#### 제목4
##### 제목5
###### 제목6
제목의 순서마다 #으로 시작해서 큰 제목을 붙일 수 있습니다. #을 더 많이 붙일 수록 하위 제목으로 지정됩니다. 최대 6개까지의 #으로 설정을 할 수 있습니다. 
깃허브에서는 제목 1과 제목 2 사이에 가로줄로 구분이 됩니다.
---
***
가로줄을 넣을 수 있습니다.
1. 글 번호 리스트를 작성할 수 있습니다.
- 글
   - 글
* 글
+ 글
번호가 없는 리스트를 작성할 수 있습니다. 줄을 바꿔서 tab키를 누른 후 작성하면 하위 목록으로 생성할 수 있습니다.


단락의 줄이 변경됩니다.
*글*
_글_
글이 기울임체로 출력됩니다.
__글__
**글**
글이 굵은 글씨로 출력됩니다.
***글***
___글___
글이 굵은 기울임체로 출력됩니다.
~~글~~ 글에 취소선이 생깁니다.
```

```
글을 코드블럭 내부에 출력합니다. 첫째줄 ``` 뒤에 언어를 입력하면 해당 언어로 문법강조(Syntax highlighting) 기능이 추가됩니다.
> 글 글을 인용 단락에 출력합니다.
[글](링크 주소 "설명") 글에 하이퍼링크를 달아서 출력합니다. 설명은 해당 링크에 마우스를 올리면 출력됩니다.
<링크 주소> 주소가 그대로 하이퍼링크로 출력됩니다. 메일 주소를 출력할 때 유용합니다.
![대체 텍스트](이미지 파일 경로) 이미지를 출력합니다. 대체 텍스트는 이미지가 로딩이 안 되거나 시각 장애인을 위한 화면 음성으로 출력됩니다. 이미지 파일은 같은 저장소에 저장해서, 저장된 경로를 입력합니다.

 

06-3 오픈 소스 프로젝트

컨트리뷰션 안내

깃허브는 자신의 개발 포트폴리오로 사용이 가능합니다. 자신만의 저장소로 배포하는 것 뿐만 아니라 오픈 소스 프로젝트에 참가해서 다른 사람들에게 보여줄 만한 이력을 만들 수도 있습니다. 이를 위해 깃허브는 전세계에서 사용하는 것이므로 영어로 컨트리뷰션을 작성하는 것이 좋습니다.

오픈 소스 프로젝트의 경우에는 버그 수정을 하는 등의 모든 활동을 통해 소스를 발전시키는 것을 지향합니다. 유명한 오픈 소스 프로젝트에서는 컨트리뷰션을 위한 안내도 함께 있습니다.

https://github.com/kamranahmedse/developer-roadmap

 

GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational content to help developers grow in

Interactive roadmaps, guides and other educational content to help developers grow in their careers. - GitHub - kamranahmedse/developer-roadmap: Interactive roadmaps, guides and other educational c...

github.com

위 사이트는 매년 개발자 로드맵을 제공하고 있는 오픈 소스입니다. 로드맵과 다른 사용자들은 이에 어떻게 기여를 했는가를 보고,  또 사용자들이 어떻게 기여를 할 수 있는가를 컨트리뷰션을 위한 안내를 확인할 수 있습니다.

하지만 영어가 만국공통어라고 해서 영어만 사용할 필요는 없습니다. 좋은 서비스는 다양한 사용자들을 위해 편리한 기능을 제공하는 것으로 시작할 수 있습니다. 영어의 README.md를 번역해서 한국어로 작성한 KR 버전의 문서를 등록할 수도 있고, 그외에 세계 각국의 언어로 번역하는 것을 참여할 수 있습니다. 의향이 있다면 오픈 소스 프로젝트 관리자에게 번역에 대해 참여하겠다고 의사를 표현하고 시작할 수 있습니다.

단순 README.md만 번역하는 것이 아닌 내부 프로그램에서의 번역 문제나 글자 수정을 도와줄 수도 있습니다. Pull request로 들어가서 새로운 풀 리퀘스트를 작성해서 제안 사항을 남길 수 있습니다.

 

소스 오류 및 버그 수정 제안

https://github.com/nhn/tui.editor

 

GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. - GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.

github.com

위의 사이트는 네이버에서 사용하는 카페, 블로그 등의 편집기인 위지윅 편집기의 오픈소스입니다. 이 소스에서 오류를 발견하거나 추가하고 싶은 기능이 있다면 제안을 할 수 있습니다.

[Issue] → [New issue]를 차례로 누르면 자신이 개발자들과 소통할 수 있는 글을 하나 발행 할 수 있습니다. 그 안에서 오픈 소스 참여자들과 함께 버그나 새로운 제안에 대해 소통하면서 오픈 소스를 발전 시킬 수 있습니다.

 

 

 

[GitHub 깃 & 깃허브 입문] VS code로 다루기

 

[깃 & 깃 허브 입문] VS code로 다루기

저장소 만들기 VS code 작업용으로 새 파일을 만들고 작업 환경을 구축해보는 것으로 시작합니다. 작업 폴더 생성 비쥬얼 스튜디오에서 사용할 새 폴더를 컴퓨터에 원하는 위치에 하나 생성합니

gunrestaurant.tistory.com

 

반응형