1. 잔디추가하기

https://ghchart.rshah.org 이용하여 잔디를 추가하도록 하겠습니다. https://ghchart.rshah.org/{깃허브유저이름} 형태로 사용가능합니다. ex) https://ghchart.rshah.org/wonbeomchoi

<aside> 💡 site.github_username 은 개인 계정에서만 되고 혹시나 git organization을 사용한다면 잔디이미지를 불러오는게 안됩니다! 혹시 잘 안되거나 본인의 계정을 직접 지정하고싶다면 {{site.github_username}}부분에 자신의 깃 계정을 적어주세요.

ex) <img src="<https://ghchart.rshah.org/{{site.github_username}>}"/> 을 <img src="<https://ghchart.rshah.org/wonbeomchoi>" />로 변경

</aside>

<img src="<https://ghchart.rshah.org/{{site.github_username}>} style="
    width: 660px;
    height: 100px;
*"*>

우리는 index.html에 넣어서 테스트해보도록 하겠습니다.

![잔디](<https://ghchart.rshah.org/paullabkorea> "<https://github.com/paullabkorea>")

2. github api이용하여 레포지토리 목록 가져오기

해당 부분은 "04. 메뉴수정과 생성_댓글기능활성" 강의를 참고하여 진행하면 됩니다. 깃허브에서 제공하는 api를 사용해 유저의 레포지토리 목록과 정보를 받아올 수 있습니다.

'https://api.github.com/users/{유저이름}/repos'

ex) https://api.github.com/users/{{site.github_username}}/repos

또는 https://api.github.com/users/wonbeomchoi/repos

gitinfo메뉴를 추가하기위해 ./_pages 디렉토리에 새로운 git.html파일을 만들고 아래 코드와 같은 형식으로 진행합니다.

제 아이디를 Ctrl + F로 검색(paullabkorea)해서 여러분 아이디로 교채하신 다음 코드는 Ctrl + C, Ctrl + V를 사용해주세요.

---
layout: default
permalink: /gitInfo/
title: gitInfo
search_exclude: true
---
<img src="<https://ghchart.rshah.org/paullabkorea>" alt="" style="width: 660px; height: 100px;">
<div id="repos">
<script>
// 비동기 작업을 위해 async function 선언
const initRepo = async () =>{
        const _username = 'paullabkorea'
        
        // 추가할 dom선택
        const repoUl = document.getElementById("repos")

        // headers 설명 : 깃허브에 요청할 형식 지정
        let response = await fetch('<https://api.github.com/users/paullabkorea/repos>',
        {headers:{
            'Accept' : 'application/vnd.github.v3+json'
        }});
        const repoJson = await response.json()
        // repo받아온 내용 확인
        // console.log(repoJson);

        // json내용을 map을 이용해 각 dom을 만들고 추가
        repoJson.map((repos)=>{
            let h2Element = document.createElement("h2")
            h2Element.textContent = repos.name

            let pElementDesc = document.createElement("p")
            pElementDesc.textContent = "레포설명 : " + repos.description

            let aElementURL = document.createElement("a")
            aElementURL.href = repos.svn_url
            aElementURL.textContent = repos.svn_url

            //각 요소를 <div id="repos">에 추가
            repoUl.append(h2Element)
            repoUl.append(pElementDesc)
            repoUl.append(aElementURL)
            repoUl.append(document.createElement("br"))
        })
    }
    initRepo()
</script>

3. 전체 결과물

우측 상단에 gitinfo 메뉴가 생기고 해당 메뉴로 이동하면, 깃 허브 잔디와 레포지토리를 불러올 수 있습니다.