[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 4주차 - 깃허브 프로필 꾸미기

📚 요약

깃허브는 개발자들의 SNS라고 합니다.

 

해당 개발자가 현재 무슨 프로젝트를 어떻게 만들고 있는지 알 수 있고

얼마나 꾸준히 작업을 하였는지 잔디를 보면 알 수 있어서

이력서에 깃허브 주소를 적는 경우도 많다고 합니다.

 

 

이 글에선 필요한 정보를 한 눈에 보여주어

개발자로써의 자신을 잘 어필할 수 있도록

 

깃허브 프로필을 꾸미는 방법을 정리해보겠습니다.

 

 

 

 

 

🎷 Readme 만들기

처음 깃허브를 가입하면 아무것도 없습니다.

 

Edit profile을 눌러봐도 bio 메세지나 프로필 사진만 수정할 수 있을 뿐입니다.

 

Befor

 

하지만 깃허브에는 마크업 언어를 사용하여 프로필을 작성할 수 있는 기능을 제공합니다.

 

이 기능을 사용해 시각적으로 더 풍부하게 프로필을 꾸밀 수 있습니다.

 

 

 

기능을 사용하려면 username으로 저장소(레포지토리)를 생성해야 하는데

 

username은 처음 깃허브에 가입할 때 작성한 이름이며,

이후 등록하게 될 모든 저장소의 주소에 붙게 됩니다.

 

닉네임과는 다른데 기억이 안 나셔도 상관 없습니다.

 

 

[오른쪽 상단 + 클릭] → [New repository] 로 들어가 새로운 저장소를 추가하게 되면

 

 

 

새로 추가할 저장소의 이름을 입력하는 곳 왼쪽에 Owner라고 적힌 부분이 username입니다.

 

이것과 동일하게 저장소 이름을 작성해주고

 

 

Add README를 On 해준 다음 Create repository로 저장소를 만들면 됩니다.

 

 

 

 

그러면 Hi there 👋 이라는 문구가 적힌 README 파일이 생성되는데요.

 

다시 Your profile로 나가보면

 

 

동일하게 Hi there 👋 이라는 문구가 뜬 프로필 화면을 볼 수 있습니다.

 

이제 저 README 파일을 마크다운 언어로 작성하여 다양한 내용을 표현할 수 있습니다!

 

 

 

 

 

🎺 기술 배지 추가하기

저는 과거 PHP, jQuery, Javascript, MySQL을 사용했었고

현재 JAVA, React, jQuery, Javascript를 공부하고 있습니다.

 

이 문장을 글로만 적으면 밋밋해서 한 눈에 들어오지 않습니다.

 

그래서 각 기술마다 로고와 특유의 색상을 이용해 배지를 만들어 추가해보겠습니다.

 

 

 

먼저 기본 표현식은 이렇습니다.

![Static Badge](https://img.shields.io/badge/라벨명-배지표기명-색상코드?style=배지스타일&logo=로고값)

 

배지 스타일만 결정하면 나머지는 로고값과 색상코드만 바꾸는 식으로 여러개의 배지를 간단히 추가할 수 있습니다.

 

 

우선 사용할 로고값과 색상코드를 아래 사이트에서 찾아보겠습니다.

https://simpleicons.org/

https://simpleicons.org/?q=cat

 

 

 

기술명 또는 키워드를 검색해서 원하는 로고를 찾은 다음 로고 하단의 이름을 클릭하면 로고값이 자동 복사됩니다.

 

그리고 색상코드도 클릭하면 자동 복사되는데 표현식에 직접 작성할 땐 #을 떼고 입력해야 합니다.

이유는 나중에 시뮬레이션 해보면서 설명해 드리겠습니다.

 

 

 

그 다음엔 배지의 스타일을 결정해 보겠습니다.

 

아래 사이트에서 배지 스타일을 시뮬레이션 해볼 수 있습니다.

https://shields.io/badges/static-badge

Static Badge | Shields.io

 

 

링크로 접속해 오른쪽 시뮬레이션 탭에서 [+ Show optional parameters]를 클릭한 다음

라벨명, 배지 표기명, 색상코드를 대쉬' - ' 로 구분해 작성해주고

찾아둔 로고값을 입력한 다음 배지 스타일을 마음에 드는것으로 바꿔줍니다.

 

시뮬레이션 결과

 

Markdown을 선택해서 표현식을 간단하게 복사해올 수 있습니다.

![Static Badge](https://img.shields.io/badge/%EB%9D%BC%EB%B2%A8-jQuery-%230769AD?style=for-the-badge&logo=jquery)

 

그 외 스타일도 시뮬레이션 탭 왼편의 설명을 보고 이것저것 시도해 볼 수 있습니다.

 

 

여기서 유의할 점이 하나 있습니다.

 

badgeContent에 작성한 값을 보면 마크다운으로 옮겨질 때

영문, 숫자를 제외한 값들이 전부 %가 붙은 이상한 값으로 바뀝니다.

 

url인코딩 때문인데 이 때문에 #이 %23으로 치환됩니다.

 

배지를 빠르게 추가하기 위해 로고값과 색상코드만 바꿔주게되면

일일이 #을 %23으로 바꿔줘야 하는데 이게 귀찮기 때문에 그냥 #을 지워주면 편합니다.

 

 

 

아래는 제가 만든 기술배지 결과물입니다.

 

저는 flat-square 스타일을 선택했습니다.

![Static Badge](https://img.shields.io/badge/-PHP-777BB4?style=flat-square&logo=PHP&logoColor=white)
![Static Badge](https://img.shields.io/badge/-MySQL-4479A1?style=flat-square&logo=MySQL&logoColor=white)
![Static Badge](https://img.shields.io/badge/-Javascript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)
![Static Badge](https://img.shields.io/badge/-jQuery-0769AD?style=flat-square&logo=jquery)

![Static Badge](https://img.shields.io/badge/-Java-007396?style=flat-square&logo=java&logoColor=black)
![Static Badge](https://img.shields.io/badge/-React-61DAFB?style=flat-square&logo=react&logoColor=black)
![Static Badge](https://img.shields.io/badge/-jQuery-0769AD?style=flat-square&logo=jquery)
![Static Badge](https://img.shields.io/badge/-Javascript-F7DF1E?style=flat-square&logo=javascript&logoColor=black)

 

 

 

 

 

 

📯 GitHub Readme Stats 추가하기

제가 사용하는 언어가 무엇인지 기술 뱃지로 표현해 주었지만

이것만으론 제가 잘 하는 개발자인지 해당 언어를 얼마나 자주 쓰는지 알 수 없습니다.

 

 

이때 나의 커밋 수, 기여도, 즐겨찾기 수 등을 고려하여 통계를 내주고

내 저장소의 언어들을 분석해 사용량을 그래프로 그려주는 기능도 있습니다.

 

https://github.com/anuraghazra/github-readme-stats/blob/master/docs/readme_kr.md

github-readme-stats/docs/readme_kr.md at master · anuraghazra/github-readme-stats

 

해당 저장소를 방문하시면 readme에 자세한 사용방법과 여러가지 스타일이 있습니다.

 

 

이걸 참고하여 제 나름대로 통계와 언어 사용량을 추가해보겠습니다.

![Ranhuy's GitHub stats](https://github-readme-stats.vercel.app/api?username=Ranhuy&show_icons=true&theme=midnight-purple)
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=Ranhuy&layout=compact&theme=midnight-purple)](https://github.com/Ranhuy)

 

 

 

이대로 끝내도 좋겠지만...

 

저는 여기서 저는 통계와 언어 사용량의 높이를 맞춰주고 싶어서 방법을 찾아봤습니다!

 

 

 

해당 이미지는 gitHub-readme-stats의 api를 통해 링크로 이미지를 가져와 마크다운으로 표기해주는 방식입니다.

 

그래서 추가하는 방법도 마크다운의 링크 추가 방식을 사용합니다.

![주소에 대한 설명](링크 url)

 

또한 마크다운 언어는 HTML과의 혼용 사용을 허용하기 때문에 <img> 태그를 사용할 수 있습니다.

 

그리고 img태그를 사용하면 태그 안에 css 스타일을 넣을 수 있죠!

 

 

 

즉, 이렇게 수정할 수 있습니다!

<img height="170 !important"
  alt="Ranhuy's GitHub stats"
  src="https://github-readme-stats.vercel.app/api?username=Ranhuy&show_icons=true&theme=midnight-purple" />
<img height="170 !important"
  alt="Top Langs"
  src="https://github-readme-stats.vercel.app/api/top-langs/?username=Ranhuy&layout=compact&theme=midnight-purple" />

 

 

 

 

 

 

짜잔! 어떠신가요?

 

물론 아직 저장소에 아무것도 없어서 랭크도 낮고 언어 사용량 그래프도 없습니다...🥲

 

 

아직은 조촐하지만 차차 채워나가면 멋진 깃허브 프로필이 되겠죠?

 

그때까지 열심히 개발해보겠습니다! 😎✨