
## 1. headers

\# 으로 시작하는 텍스트로 1-6개 가능 (h1 ~ h6)

```
# h1
## h2
### h3
#### h4
##### h5
###### h6
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIOzmy%2Fbtr7d8qRKov%2FiXZSIKWKSOiAtliDzN63vK%2Fimg.png)

## 2. 구분선

"---"이나 "\*\*\*"를 통해 구분선 생성 가능

```
***
---
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbgcFby%2Fbtr7dx5ZjTh%2FlEqZkNRdg7rLooCPmMFZW0%2Fimg.png)

## 3. 줄바꿈

"<br>"

```
줄을<br>바꿈
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc8z1Q4%2Fbtr7fs3s9fI%2FhLPfWRYRfKMIC2tUvU8531%2Fimg.png)

## 4. 강조

기울여쓰기(italic) : \* 또는 \_로 감싼 텍스트.

두껍게 쓰기(bold) : \*\* 또는 \_\_로 감싼 텍스트.

취소선 : ~~로 감싼 텍스트

```
_기울여쓰기 1_
*기울여쓰기 2*
**두껍게 1**
__두껍게 2__
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbu2sXJ%2Fbtr7dNgeNxn%2FcCfQQ9PumZ7OzrH2KeXq5K%2Fimg.png)

## 5. 인용

\>로 시작하는 텍스트로 >>>와 같이 3개까지 사용 가능

```
> 인용문
> > 3개까지
> > > 사용 가능
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGU0Me%2Fbtr7ghUUjee%2FqgoUnVkdOOkK7Kb5Gq1oPK%2Fimg.png)

## 6. 리스트

리스트는 Tab을 통해 목록 안의 목록 생성 가능

### 순서가 없는 목록

\*, +, -를 통해 순서가 없는 목록 생성 가능

```
- 순서가 없는 목록1
- 순서가 없는 목록1
- 순서가 없는 목록1

* 순서가 없는 목록2
  - 탭을 이용한 목록 안의 목록
    - 탭을 이용한 목록 안의 목록 안의 목록

1. 순서가 있는 목록1
2. 순서가 있는 목록1
3. 순서가 있는 목록1
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdQp7i8%2Fbtr7e1ygv06%2FvMIjB3OsI8Q5fAteCTJbF1%2Fimg.png)

### 순서가 있는 목록

숫자를 기입하면 순서가 있는 목록이 됨

들여쓰기를 하면 모양이 바뀜

숫자를 무엇을 쓰든 순서대로 알아서 숫자를 매김

리스트 안에 하위 리스트를 만들기 위해서는 tab과 함께 숫자 1번부터 나열하면 적용 가능

```
1. 순서가 있는 목록2
2. 순서가 있는 목록2
   1. 탭을 이용한 순서가 있는 목록 안의 목록
      1. 탭을 이용한 순서가 있는 목록 안의 목록 안의 목록
   2. 탭을 이용한 순서가 있는 목록 안의 목록
5. 순서가 있는 목록2
```

혼합 리스트도 적용 가능

```
1. 순서가 있는 목록2
2. 순서가 있는 목록2
   1. 탭을 이용한 순서가 있는 목록 안의 목록
      * 탭을 이용한 순서가 있는 목록 안의 목록 안의 순서가 없는 목록
   2. 탭을 이용한 순서가 있는 목록 안의 목록
5. 순서가 있는 목록2
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlhYHi%2Fbtr7dPd52Gh%2FY87O8eblzYL1LiuEiIdMik%2Fimg.png)

## 7. 이미지

링크와 비슷하나 앞에 느낌표가 붙음

인라인 이미지 : ![텍스트](이미지파일 경로)

![image]("./../../../../public/images/cards/GITHUB.png)

링크 이미지 : ![텍스트] (이미지파일URL)

![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e)

이미지 파일에 마우스를 올렸을 때 커서 앞에 나오는 텍스트 설정

![텍스트] (이미지경로/URL "이미지이름")

![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e "이미지지롱")

링크와 이미지를 합친 문법 (이미지를 링크로 사용)

[![텍스트] (이미지URL)] (링크URL)

[![image](https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F5148697%2Fattach%2Fc60c2213f3984f0b9da48413e3fa277e)](https://lee-yo-han.github.io/github-token-expired)

## 8. Link (Anchor)

글자로 된 하이퍼링크

```
[구글] (링크)
```

[구글](https://www.google.com/)

내부(해시) 링크

[보여지는 내용] (#이동할 헤드(제목))

괄호 안 링크의 띄어쓰기는 -로 연결, 영어는 모두 소문자로 작성

```
[어디로든문](#1-headers)
```

[어디로든문](#1-headers)

## 9. 코드 블럭

백틱(`) 3개씩으로 감싸서 사용

```
'''javascript
some code ...
'''
```

## 10. 테이블

헤더와 셀 구분 시 3개 이상의 하이픈(-) 필요
헤더 셀을 구분하면서 콜론(:)으로 정렬 가능
가장 좌측과 가장 우측에 있는 vertical bar( | ) 기호 생략 가능

```
| 헤더1 | 헤더2    |   헤더3    |    헤더4 |
| ----- | :------- | :--------: | -------: |
| 셀1   | 셀2      |    셀3     |      셀4 |
| 기본  | 좌로정렬 | 가운데정렬 | 우로정렬 |
| 셀9   | 셀10     |    셀11    |     셀12 |
```

| 헤더1 | 헤더2    |   헤더3    |    헤더4 |
| ----- | :------- | :--------: | -------: |
| 셀1   | 셀2      |    셀3     |      셀4 |
| 기본  | 좌로정렬 | 가운데정렬 | 우로정렬 |
| 셀9   | 셀10     |    셀11    |     셀12 |

---

참조 https://inpa.tistory.com/entry/MarkDown-%F0%9F%93%9A-%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EB%B2%95-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC


github markdown syntex


### **본 포스팅은 NextJS 13 환경에서 진행한 내용을 바탕으로 한다. GithubAPI 사용법은 공식 문서에 상세히 나와있기 때문에 사용법보다 토큰 만료 문제를 주로 다룬다.**

## GithubAPI란?

> Github의 기능을 REST API 형식으로 사용할 수 있도록 도와주는 기능이다.

**[GithubAPI docs](https://docs.github.com/en/rest?apiVersion=2022-11-28)**

아래와 같이 사용할 수 있는 기능이 많다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6rpoI%2Fbtr65pd5Q0W%2F7NUKUqiXklINKYLwJWPow1%2Fimg.png)

## 1. 토큰 발급

간단한 조회 정도는 토큰이 필요하지 않지만, 요청의 종류에 따라 토큰이 필요한 경우가 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbS8fhz%2Fbtr60iAL28F%2FxJ66qxT7PKF4U6JjLkCA91%2Fimg.png)

우선 우측 상단의 Settings로 들어가서

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdU186G%2Fbtr61k5X0vE%2FdrgRV6uJMfho9JCIhoUghk%2Fimg.png)

Settings의 좌측 하단 Developer settings에 들어간다.

그 안에 Pat(personal access tokens)를 발급받을 수 있는 창을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FE3TPa%2Fbtr60DxUYrw%2FtWMeaxCI78Cyx9838COCVK%2Fimg.png)

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnE2jt%2Fbtr60gbWaov%2FQ897sC2Gk2RxKlsBVZ5jLK%2Fimg.png)

Generate new token을 통해 원하는 종류의 토큰을 받을 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FHPjvr%2Fbtr61gW4V3n%2Fvqk7jPvdQAcdlAfXomGiQ0%2Fimg.png)

토큰명, 유효기간, access할 repo를 설정하고

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbX6MQh%2Fbtr61lcFYwt%2F1fkFl327Q0I91UIwAgfCfK%2Fimg.png)

원하는 기능에 대한 권한을 설정해준다.

이번엔 간단하게 issue에 대한 작업만 진행해본다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVESxa%2Fbtr63YA3qrw%2FCedCRRISe4SG6PLHK4H0dK%2Fimg.png)

생성된 토큰은 잘 복사해 안전한 공간에 저장해준다.

## 2. Token 사용

기본적인 사용법은 아래와 같다.

https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api?apiVersion=2022-11-28

```typescript
// issues 등록하기
import { Octokit } from "octokit";

const octokit = new Octokit({
  auth: `api token`,
});

const issueUpdate = async (name: string, feed: string) => {
  await octokit.request(
    "POST /repos/{owner}/{repository name}/issues/1/comments",
    {
      owner: "user name",
      repo: "repository name",
      title: `title`,
      body: `body`,
      // headers: {
      //   "X-GitHub-Api-Version": "2022-11-28",
      // },
    },
  );
};
```

위 요청을 실행하면 정상적으로 issue 등록이 되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjcLkP%2Fbtr65o7kXPZ%2Fh739Lzn25eBdRhDzcPPU8K%2Fimg.png)

## 유의할 점

### 1. headers 설정

우선 headers를 주석처리한 이유는 공식 문서에서는 github API version을 headers에 담으라고 돼있지만, 버전과 함께 요청을 실행하면 cors에러가 발생하는 것을 볼 수 있다.

**[Github CORS ISSUE](https://github.com/orgs/community/discussions/40619)**

headers는 별도로 추가하지 말고 auth만 설정해준 후 사용해 주도록 한다.

### 2. auth Token 설정

API key와 같은 토큰은 대부분 .env를 통해 변수를 설정해 사용해줘야 한다.

하지만 .env에 토큰을 설정하고 commit을 하게되면 gitignore를 설정해줘도 github가 자동으로 감지해 토큰을 만료시키기 때문에 .env.local서 테스트하고 .env의 토큰은 지운 뒤에 사용해주자.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuJQsS%2Fbtr62Xh6jLO%2FHkR7hA4k0cMffBKY55DHu1%2Fimg.png)

---

참조 : https://docs.github.com/en


Github Token을 이용한 GithubAPI 사용

github token expired


# utterances란?

> Github repository의 이슈 기능을 활용해 내 웹사이트에 댓글 기능을 추가할 수 있는 도구로, 별도의 백엔드 구성을 하지 않고 댓글들을 관리할 수 있다는 장점이 있다.

많이 비교되는 disqus라는 툴도 있다. 하지만, disqus는 댓글 작성을 누구나 할 수 있다는 장점이 있는 반면에 광고가 많다는 단점이 있다.
그에 비해 utterances는 Github 계정 소유자만 댓글을 작성할 수 있지만, 별도의 광고도 없고 댓글 작성 시 Markdown을 지원한다는 특징이 있다.

나는 utterances를 Github blog에 사용할 생각이기에 굳이 utterances의 장점을 버리고 disqus를 사용할 이유가 없었다.

# 사용방법

## 1. repository 생성

public으로 설정된 새 레포가 필요하다.

Github blog repo에 연동해도 상관은 없지만 댓글만을 위한 저장소를 만들어 놓는게 관리가 훨씬 쉬울 것 같아 새 repo를 생성해줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbq4F8z%2Fbtr34VuvScp%2FwmTQX2iIjKtMjlowowHw80%2Fimg.png)

저장소 이름은 상관 없다.

## 2. utterances 설치

Github app에서 설치할 수 있다.

https://github.com/apps/utterances

## 3. utterances access 설정

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPS87y%2Fbtr35bYlHCH%2FhE9akcKFM7qYE6yAfvKD4k%2Fimg.png)

app이 설치되면 Configure를 통해 어떤 저장소에 연동해줄지 설정할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F55bSC%2Fbtr37BBZd9Y%2FfSwpH2VCQKwXKpQkXAbO00%2Fimg.png)

나는 선택한 저장소에만 연동되게 설정했다.

## 4. utterances.json 생성

```javascript
{
  "origins": ["https://{my url}"]
}
```

위와 같이 자신이 댓글 기능을 사용할 사이트를 utterances.json에 입력해준다.

## 5. script를 블로그 repo code에 복사

https://utteranc.es/?installation_id=35005881&setup_action=install

해당 사이트에 들어가면 어떤 방식으로 script를 구성할지 설정할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fo9X4N%2Fbtr34VVyI7q%2F2PbuKqgkmKDtfogCNj7Nx0%2Fimg.png)

> Issue mapping같은 경우, 댓글과 포스팅을 어떻게 연동할지 설정하는 것인데, 통상적으로 pathname이나 URL을 많이 사용하지만 본인 프로젝트의 상황에 맞춰 설정해주는 것이 가장 좋다.

> 또한 한글 파일명을 사용해 URL이나 pathname을 생성하는 경우, 유니코드 인식 문제로 비정상적인 URL이 생성될 수 있기 때문에 설정에 유의해야 한다.

```javascript
// 복사할 스크립트
<script
  src="https://utteranc.es/client.js"
  repo="name/repositoey" // utterances를 연동한 repo 이름
  issue-term="pathname" // issue mapping
  theme="github-light" // 테마 색상
  crossorigin="anonymous"
  async
></script>
```

테마 색상도 다양하기 때문에 utterances 사이트에서 원하는 색상을 골라가며 설정해줘도 괜찮다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxYtiI%2Fbtr35FEVVmk%2FcS0dxRjlWfFukRPCaL9y61%2Fimg.png)

위에 생성한 script는 통상적으로 댓글 부분에 해당되는 곳에 그대로 복사해 넣지만, 나는 Nextjs를 통해 댓글 컴포넌트를 생성할 것이기 때문에 다른 방식을 사용했다.

```javascript
export const Comment = () => {
  return (
    <section
      ref={elem => {
        if (!elem) {
          return;
        }
        const scriptElem = document.createElement("script");
        scriptElem.src = "https://utteranc.es/client.js";
        scriptElem.async = true;
        scriptElem.setAttribute("repo", "{utterances repo name}");
        scriptElem.setAttribute("issue-term", "pathname");
        scriptElem.setAttribute("theme", "github-dark");
        scriptElem.setAttribute("label", "blog-comment");
        scriptElem.crossOrigin = "anonymous";
        elem.appendChild(scriptElem);
      }}
    />
  );
};
```

해당 컴포넌트에 사용하기 위해 기존의 script와 같은 속성들을 넣어줬다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fckai9y%2Fbtr4aKSLFRA%2F9p3HEGqDCEkfa8sg7Nnd0k%2Fimg.png)

하지만 strict 모드를 false로 해도 종종 댓글찾이 2개가 되어버려 useEffect를 통해 1번만 script를 붙일 수 있도록 코드를 수정했다.

```javascript
import { useEffect } from "react";

export const Comment = () => {
  const makeRef = (el: HTMLElement | null) => {
    if (!el) {
      return;
    } else {
      const scriptElem = document.createElement("script");
      scriptElem.src = "https://utteranc.es/client.js";
      scriptElem.async = true;
      scriptElem.setAttribute("repo", "{utterances repo name}");
      scriptElem.setAttribute("issue-term", "pathname");
      scriptElem.setAttribute("theme", "github-dark");
      scriptElem.setAttribute("label", "blog-comment");
      scriptElem.crossOrigin = "anonymous";
      el.appendChild(scriptElem);
    }
  };

  useEffect(() => {
    const newEl = document.getElementById("comment-box");
    makeRef(newEl);
  }, []);

  return <section id="comment-box" />;
};
```

코드 수정 후 원하는대로 동작하는 모습을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNZNaQ%2Fbtr38NhUPkk%2FSH2Dgj2Si71gH3Gykm9kYK%2Fimg.png)


utterances를 이용한 Nextjs Github 블로그 댓글 기능 구현

github git blog utterances comment


# Github REST API 설명서

https://docs.github.com/ko/rest?apiVersion=2022-11-28

## GithubAPI 이용 시 토큰이 필요한 경우 아래와 같이 토큰 발급도 가능하다.

- 우측 상단의 프로필을 통해 Settings 접근

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc5d9NT%2Fbtr3XWt2ipS%2FlVrpZru5irR5mDft0cLaO0%2Fimg.png)

- 좌측 하단의 Developer settings 접속

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnMYAN%2Fbtr37uQgb1j%2Fz3lG0JXTBq5gkIhvk1HEek%2Fimg.png)

- Tokens나 Fine-grained tokens를 통해 원하는 권한들을 설정해 토큰을 생성할 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcKOqYU%2Fbtr3V6YgATa%2Fc3QmI12TDR3vgoNL0ZTZR1%2Fimg.png)

> Github 홈페이지에 여러 api들이 많기 때문에 필요에 따라 사용하면 좋을 것 같다. 이 글에서는 repository 안의 파일들의 정보만을 가져올 것이다.

## 1. requestURL

```javascript
const BASE_URL =
  "https://api.github.com/repos/{유저명을 포함한/레포지토리 이름}/contents/{데이터를 가져올 디렉토리}";
const options = {
  headers: {
    "Content-Type": "application/json",
  },
};
```

예를 들어 src의 posting이라는 디렉토리의 데이터들을 가져오고 싶다면

https://api.github.com/repos/name/some-repo/contents/src/posting

정도가 될 수 있다.

요청이 정상적으로 작동했다면 아래와 같이 데이터를 받을 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXHDFb%2Fbtr3WcDXFiZ%2FmFW3Q3uyQPHEOBpkOFVKA0%2Fimg.png)

하지만 하나의 파일에 대한 구체적인 정보는 들어있지 않다.

한 단계로 더 들어가 정보를 받아온다면 아래와 같은 base64로 인코딩된 content 데이터를 받아올 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaVD0e%2Fbtr38M4cfZ6%2FMLUYZ4OarG3pXvjnSCW7VK%2Fimg.png)

## 2. decoding

해당 콘텐츠의 데이터를 정상적으로 받아오기 위해서는 디코딩이 필요하다.

```typescript
const eachMarkdown = async (name: string) => {
    const url = `${BASE_URL}/${categoryName}/${name}`;
    const response = await axios.get(url, options);
    const content = Buffer.from(response.data.content, "base64").toString();

    ...
};
```

content 데이터를 추출하고 콘솔을 확인하면 아래와 같이 string을 받아볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Flctvp%2Fbtr38LKZ6o1%2FnwU9EK44kJmKCfanQsdw0K%2Fimg.png)

## 3. 데이터 가공

캡쳐 이미지 아래로 마크다운 파일의 본문들이 함께 있지만, 내가 필요한 부분은 머리말 부분이기 때문에 이 데이터를 추출해야 했다.

```typescript
const eachMarkdown = async (name: string) => {
  const url = `${BASE_URL}/${categoryName}/${name}`;
  const response = await axios.get(url, options);
  const content = Buffer.from(response.data.content, "base64").toString();
  const frontmatter = content.match(/^---\n([\s\S]+?)\n---/);
  if (frontmatter) {
    const matters = JSON.stringify(frontmatter[0]).split("\\n");
    const dateRegex = /\d{4}-\d{2}-\d{2}/;
    const match = matters[4].match(dateRegex);
    if (match) {
      const result = {
        title: matters[1].split("title: ")[1].replaceAll(" ", "-"),
        description: matters[2].split("description: ")[1],
        category: matters[3].split("category: ")[1],
        date: match[0],
      };
    }
  }
};
```

상수 frontmatter는 머리말을 가져오지만 예쁘게 가져오진 않는다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTC1yi%2Fbtr35bRukP2%2FnWJ0mgeFgu2LlEBk0KyupK%2Fimg.png)

때문에 if(frontmatter){...}와 같이 필요한 데이터를 정규식이나 string메서드를 통해 원하는대로 가공해 사용하여 사용해야 한다.


GithubAPI를 이용한 repository 내 Markdown 파일 정보 불러오기

github github api get repo data


## Markdown을 통해 블로그를 작성하는 이유

- 머리말을 따로 설정해 route 링크를 설정해주거나 제목, 날짜, 카테고리, 등을 설정하여 블로그 탐색을 용이하게 해줄 수 있다.
- Markdown을 repository에 저장함으로써 githubAPI 등을 이용한 데이터 조회를 가능하게 한다.

## 필요한 패키지

```bash
yarn add gray-matter # 문자열이나 파일에서 머리말을 구문 분석, 파일에서 메타데이터와 내용 등 추출 시 사용
yarn add marked
yarn add @types/marked # 타입스크립트의 경우
yarn add react-markdown # <div dangerouslySetInnerHTML={createMarkup()} />과 유사함
yarn add remark-gfm # 마크다운 문법이 다양하게 적용될 수 있도록 도와주는 플러그인
yarn add react-syntax-highlighter
yarn add @types/react-syntax-highlighter # 타입스크립트의 경우
```

참조

https://yarnpkg.com/package/react-markdown

https://yarnpkg.com/package/react-syntax-highlighter

## posting 파일들은 src 파일 안에 있다고 가정

## 1. [slug].tsx 파일 생성

```javascript

import { GetStaticPaths, GetStaticProps } from "next";
import { join } from "path";
import fs from "fs/promises";
import matter from "gray-matter";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm"; // Link, table, checklist 등의 형식을 표현할 수 있게 해줌
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
// import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism"; - 에러 발생
import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { vsDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";


interface Props {
  title: string;
  date: string;
  content: string;
}

export default function BlogPost({ title, date, content }: Props) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{date}</p>
      <ReactMarkdown
          className="markdown"
          remarkPlugins={[remarkGfm]}
          components={{
            code({ inline, className, children, ...props }) {
              const match = /language-(\w+)/.exec(className || "");
              return !inline && match ? (
                <SyntaxHighlighter
                  language={match[1]}
                  PreTag="pre"
                  {...props}
                  // style={dark}
                  style={darcula}
                  // style={vsDark}
                >
                  {String(children).replace(/\n$/, "")}
                </SyntaxHighlighter>
              ) : (
                <code className={className} {...props}>
                  {children}
                </code>
              );
            },
          }}
        >
          {content}
        </ReactMarkdown>
    </div>
  );
}

// 파일명을 통해 url 생성
export const getStaticPaths: GetStaticPaths = async () => {
  const postsDirectory = join(process.cwd() + "src" + "/posting", "blog");
  const filenames = await fs.readdir(postsDirectory);
  const paths = filenames.map(filename => ({
    params: { slug: filename.replace(/\.md$/, "") },
  }));
  return { paths, fallback: false };
};

// url에 해당하는 파일명을 찾아 matter로 데이터 추출
export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
  const slug = params?.slug as string;
  const filePath = join(process.cwd() + "src" + "/posting", "blog", `${slug}.md`);
  const fileContents = await fs.readFile(filePath, "utf8");
  const { data, content } = matter(fileContents);
  return {
    props: {
      title: data.title,
      date: data.date,
      content,
    },
  };
};

```

## 2. SyntaxHighlighter style 설정

SyntaxHighlighter 내부의 코드블록 style을 이용하기 위해서는 그에 맞는 소스를 가져와야 한다.

### 에러가 발생하는 ...dist/esm/styles/prism

import { darcula } from "react-syntax-highlighter/dist/esm/styles/prism";

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrNEOn%2Fbtr34VAZ3qk%2Fhy9KPHftPMrHNswKxBdBk0%2Fimg.png)

### 정상 작동하는 imports ...dist/cjs/styles/prism

```javascript
import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQTv0s%2Fbtr37t4PDmS%2Fc0Sw6mnao0GUU05pG0mnb0%2Fimg.png)

```javascript
import { dark } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdjz47g%2Fbtr35dhlOF6%2FmmOkOQB6R1x5TgzkEcQ27K%2Fimg.png)

```javascript
import { vsDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F29uf2%2Fbtr3V6KDHYg%2FeTnSoSaIAgZYqOcK7MTr8K%2Fimg.png)

원하는 스타일을 SyntaxHighlighter style에 넣어주면 된다.

> Markdown content(내용)는 ReactMarkdown 컴포넌트의 className을 통해 수정해줄 수 있다.

## 3. Markdown 파일 생성

```markdown
// 파일명 : first-post.md
--- 머리말
title: First-Post
date: "2023-02-28" <- 숫자만 사용하면 newDate()처럼 생성되어 타입 오류 발생 가능

---

# Deploy and test

test
```

Markdown 파일의 데이터를 불러올때, 머리말을 이용한 metaTag 설정이나 제목 등을 자유롭게 설정할 수 있다.

파일 생성 후 해당 링크 접속 시 정상적으로 접속이 가능해진다.

## ex

localhost:3000/first-post

url은 [slug].tsx 파일이 위치한 경로에 따라 달라질 수 있다. (nextjs 라우팅 방식)


Github pages 블로그 Markdown 불러오기

github git use markdown viewer


# Github pages와 Nextjs를 선택한 이유

### 1. Github pages

> vercel도 Nextjs로 쉽게 배포할 수 있지만, 백엔드는 별도로 만들지 않을 계획이었기에, 추후 댓글 기능이나 추천 글 목록 등을 Github 사이트 하나로 모두 관리하기 위해서 Github pages를 이용하기로 했다.

### 2. Nextjs

> 블로그는 검색엔진에 잘 노출되어야 그 의미가 있다. 또한 React 환경을 이용한 블로그 개발을 원했기에 SSR(Server Side Rendering) 등을 통한 SEO(검색엔진 최적화)에 유리한 React 프레임워크인 Nextjs를 사용하기로 결정했다.

# Github Pages 호스팅 방법

### 1. Repository 생성

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbkBnCf%2Fbtr3TGZh4t7%2F0VD4ycS4u8EvTAeIxvjsP1%2Fimg.png)

Repo 이름은 {username}.github.io 로 저장해준다.

- 생성된 repo의 settings => pages에서 배포를 확인할 수 있다. (배포되는데 5~10분 정도 소요될 수 있다.)

### 2. Repository 클론 후 Nextjs 설치

```bash
# 현재 디렉토리에 설치
yarn create next-app .

# typescript
yarn create next-app . --typescript
```

### 3. gh-pages 설치

Github pages를 이용하기 위해 아래 명령어를 통해 설치해준다.

```bash
yarn add gh-pages --save-dev
```

### 4. package.json 설정

홈페이지 도메인 추가 및 scripts를 수정해준다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSbOFc%2Fbtr33yMA8BY%2FYBMjkb8aNMMR8jv7bhlrxk%2Fimg.png)

1번째 줄처럼 홈페이지를 입력하고, scripts를 위와 같이 수정해준다.

```javascript
"build": "next build && next export",
"predeploy": "npm run build",
"deploy": "touch out/.nojekyll && gh-pages -d out --dotfiles"
```

- next export : Nextjs를 정적 사이트로 배포하기 위해 설정
- -- touch out/.nojekyll : 본래 guthub pages는 jekyll 기반으로, \_\_{filename}을 특수 리소스로 간주하고 최종 사이트에 복사하지 않기 때문에 jekyll을 사용하지 않는다고 명시해 정상적으로 처리될 수 있도록 설정
- gh-pages -d out --dotfiles : 현재 repo의 임시 복제본 생성 후, gh-pages 브랜치가 없는 경우 브랜치 생성. 기본 경로의 모든 파일 또는 선택적 src 구성의 패턴과 일치하는 파일만 복사하고 모든 변경 사항 커밋 후 푸시. 이미 gh-pages 브랜치가 있는 경우 제공된 파일에서 커밋을 추가하기 전에 원격의 모든 커밋으로 업데이트됨. src 패턴과 일치하는 도트 파일도 포함시킴

참조 : https://github.com/tschaub/gh-pages

명령어 보기

```bash
yarn gh-pages --help
```

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJQQKR%2Fbtr34cpsLGR%2FDtpXfGfLf2p8bph05dvvnk%2Fimg.png)

### next.config.js 수정

config는 본인이 적용하려는 방식에 맞게 설정해줘도 괜찮다.

```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    unoptimized: true, // 이미지 정상적으로 불러올 수 있도록함
  },
  compiler: {
    styledComponents: true, // styled-components 사용 시 컴파일러에 추가
  },
};

module.exports = nextConfig;
```

### 6. 배포

```bash
yarn deploy
```

> cmd(명령 프롬프트)에서 실행 시 tought를 사용할 수 없다는 에러가 발생하기 때문에 git bash로 실행

### 7. 배포 후 설정

```bash
Export successful. Files written to D:\0. CORDING\INDI-PROJECT\github-blog\out
$ gh-pages -d out --dotfiles
Published
```

터미널에 위와 같은 메세지가 뜨면, repository => setting => pages의 branch에 gh-pages가 생성돼있는 것을 볼 수 있음

gh-pages를 배포 브랜치로 설정해준 후 저장

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXcGvE%2Fbtr35F5rS1r%2FgTSz4ck3EW2y6KOnmS9EiK%2Fimg.png)

설정을 완료하고 상단의 Visit site로 페이지를 접속하면 Nextjs 기본 화면이 잘 나오는 것을 볼 수 있다.


Nextjs를 이용한 Github pages 블로그 만들기

github git custom blog


# 깃 명령어 모음

## 디렉토리

1. 홈 디렉토리로 이동

```bash
$ cd ~
```

2. 새 디렉토리에 디렉토리명을 생성

```bash
$ mkdir [디렉토리명]
```

3. [디렉토리명]으로 이동

```bash
$ cd [디렉토리명]
```

4. 부모 디렉토리로 이동

```bash
$ cd ..
```

5. 현재 경로를 출력 // print working directory

```bash
$ pwd
```

6. 디렉토리의 내용을 출력

```bash
$ ls
```

7. 디렉토리의 폴더 상세 정보까지 출력

```bash
$ ls -l
```

8. 디렉토리의 숨김 파일과 디렉토리까지 출력

```bash
$ ls -a
```

tip: 옵션은 합쳐서 ls -al 처럼 사용이 가능하다.

9. 파일이 있는 디렉토리를 내용물과 함께 삭제

```bash
$ rm -r [디렉토리명]
```

10. vi 편집기로 [파일명.확장자명] 파일을 작성

```bash
$ vim [파일명.확장자명]
```

11. 터미널 창의 내용을 삭제

```bash
$ clear
```

12. 터미널 창을 종료

```bash
$ exit
```

## git 유저 / 업로드

1. 현재 위치에서 지역 저장소를 생성

```bash
$ git init
```

2. 깃 환경에서 사용자 이름을 [사용자명]으로 지정

```bash
$ git config --global user.name "[사용자명]"
```

3. 깃 환경에서 사용자 이메일을 [사용자이메일명]으로 지정

```bash
$ git config --global user.email "[사용자이메일명]"
```

4. 깃의 상태를 확인

```bash
$ git status
```

## commit 명령어

1. [파일명.확장자명]을 스테이지에 올림

```bash
$ git add [파일명.확장자명]
```

2. 커밋 메시지 [메시지명]을 붙여 커밋

```bash
$ git commit -m "[메시지명]"
```

3. 메시지 [메시지명]을 붙여서 스테이징과 커밋을 동시에 진행

```bash
$ git commit -a -m "[메시지명]"
```

4. 커밋 내역 확인

```bash
$ git log
$ git log --pretty=oneline   # 한줄로 표기하기
```

5. 특정 커밋 내역 확인

```bash
$ git show [커밋 id]
```

6. 최근 버전과 작업 폴더의 수정 파일 사이의 차이를 출력

```bash
$ git diff
$ git diff [이전커밋 id] [이후커밋 id]
```

7. 지정한 커밋 해시로 이동

```bash
$ git checkout [커밋 해시]
```

8. 가장 최근 커밋을 취소

```bash
$ git reset HEAD^ # 현재 HEAD의 이전 커밋으로 되돌리기
$ git reset HEAD~n # 현재로 부터 n 번째 이전 커밋으로 되돌리기
```

9. 지정한 커밋 해시로 이동하고 커밋을 취소

```bash
$ git reset [커밋 해시]

# reset의 3가지 옵션
$ git reset --soft [커밋ID]  # head 만 바뀜
$ git reset --mixed [커밋ID] # staging 도 그 때로 바뀜
$ git reset --hard [커밋ID] # working디렉토리/staging 모두 그 때로 바꿈
```

10. 지정한 커밋 해시의 변경 이력을 취소

```bash
$ git revert [커밋 해시]
```

11. 커밋 수정하는 법

```bash
# 파일 수정 한 뒤
$ git add .
$ git commit --amend  : 최신 커밋 수정
```

## 브랜치 명령어

1. 새로운 브랜치 [브랜치명]을 생성

```bash
$ git branch [브랜치명]
# 브랜치 조회하기
$ git branch
```

2. [브랜치명]으로 체크아웃(이동)

```bash
$ git checkout [브랜치명]
$ git checkout -b [브랜치명]  # 브랜치만들고 바로 이동
# 브랜치 삭제
$ git branch -d 브랜치명
```

3. 커밋 로그에서 한 줄에 한 커밋씩 출력

```bash
$ git log --oneline
```

4. 수정한 전체 파일을 스페이지에 올린다.

```bash
$ git add .
```

5. 커밋 로그에 각 브랜치의 커밋을 그래프로 표시

```bash
$ git log --branches --graph
```

6. [브랜치명]을 master 브랜치와 병합

```bash
$ git merge [브랜치명]
$ git merge [브랜치명] --edit # 병합 후 바로 vi  편집기가 나오면서 커밋 메시지 수정 가능
$ git merge [브랜치명] --no-edit # 커밋 메시지 수정없이 바로 병합
```

7. merge 취소하기

```bash
$ git merge --abort
```

## git hub 원격 저장소

1. 원격 저장소에 연결

```bash
$ git remote add origin [github 레포지 주소]
$ git remote add origin [branch 이름]   #없으면 생성됨
```

2. 원격 저장소에 연결됐는지 확인

```bash
$ git remote -v
```

3. 지역 저장소의 커밋을 맨 처음 원격 저장소에 올리는 경우

```bash
$ git push -u origin master
```

4. 3번을 한 후에 지역 저장소의 커밋을 원격 저장소에 올리는 경우(업로드)

```bash
$ git push
$ git push origin master
```

5. 원격 저장소의 커밋을 지역 저장소로 가져옴

```bash
$ git pull
$ git pull origin master
```

6. SSH 키를 생성함

```bash
$ ssh-keygen
```

7. 원격 저장소 복제하기

```bash
# 첫번째 커밋이 아니라면 풀 먼저하기
$ git remote remove origin

#원격 저장소를 [지역저장소명]에 복제하기
$ git clone [원격 저장소 주소]
```

8. 원격 저장소의 커밋을 가져오기만 하고 merge하지 않는다
   가져온 branch 내용은 origin/[브랜치] 로 저장됨

```bash
$ git fetch
# 이후엔 diff 로 비교
$ git diff test origin/test # 브랜치 이름이 test일 경우 예시
```

9. 패치로 가져온 정보가 있는 브랜치\[FETCH_HEAD\]로 이동

```bash
$ git checkout FETCH_HEAD
```

10. 패치로 가져온 정보가 있는 브랜치[FETCH_HEAD]를 master 브랜치에 병합한다

```bash
$ git merge FETCH_HEAD
```

11. [브랜치명]을 만드는 것과 동시에 체크아웃한다

```bash
$ git checkout -b [브랜치명]
```

12. 원격 저장소에 [브랜치명]의 브랜치의 커밋을 올린다

```bash
$ git push origin [브랜치명]
```

13. 원격저장소 삭제

```bash
$ git remote remove origin
```

## 파일/보관 명령어(stash)

1. 파일 내용 출력

```bash
$ cat [파일명.확장자명]
```

2. 디렉토리를 만드는 동시에 지역저장소 생성

```bash
$ cd init [디렉토리명]
```

3. 현재 커밋을 다른 브랜치에 있는 [커밋메시지] 커밋으로 되돌림

```bash
$ git reset [커밋메시지] [커밋해시]
```

4. 병합이 끝난 [브랜치명]을 삭제

```bash
$ git branch [브랜치명] -d
```

5. 작업 트리의 수정 내용 stash에 따로 보관하기

```bash
$ git stash
$ git stash save
```

6. 보관한 내용을 목록을 출력

```bash
$ git stash list
```

7. 보관한 내용을 적용

```bash
$ git stash apply
$ git stash apply stash@{1}
```

8. 보관한 내용 중 가장 최근 항목을 삭제

```bash
$ git stash drop
$ git stash drop stash@{1}
```

9. stash를 apply하고 제거(drop) 하기

```bash
$ git stash pop
```

## 기타 명령어

1. 긴 명령어 짧게 이름 붙여 사용하기

```bash
# ex) git log --pretty=oneline을
# ->git history 라는 별명으로 바꾸기.

git config alias.[별명] '원하는 명령어'
git config alias.history 'log --pretty=oneline'
```

2. tag 설정 하기

```bash
$ git tag [태그이름][커밋 ID]
$ git tag Version_2 86a99 # tag 달기
$ git tag    #tag 조회하기
$ git show Version_2
```
