블로그 가이드 - MarkDown

안녕하세요. 미래전략그룹 이시용 대리입니다. 😀

간단하게 기술 블로그 글 작성 방법과 마크다운 문법 및 특별한 기능을 소개하고자 합니다.

포스웨이브 기술 블로그는 docusaurus 를 커스텀하여 제작 되었습니다.

✏ 블로그 글 작성하기

이 블로그는 docusaurus 기반이기 때문에 글을 작성하는 방법이 몇가지 있습니다.

작성자 정보 추가하기

website/blog/authors.yml에 자신의 정보를 추가해줍니다.

website/blog/authors.yml
fenrir:
  name: Lee Si Yong
  title: 미래전략그룹 대리
  url: https://github.com/fenrirD
  image_url: https://github.com/fenrirD.png

info

작성자의 경우 Github 계정 정보를 기본으로 합니다.

MarkDown file 생성하기.

파일은 YYYY-MM-DD-my-blog-post-title.md 과 YYYY-MM-DD-my-blog-post-title/index.md 두 방법으로 생성이 가능합니다.

tip

폴더 형식을 권장합니다. 폴더 형식이 해당 글의 첨부파일 관리에 용이합니다.

info

블로그에서는 파일명 혹은 폴더명이 /YYYY/MM/DD/my-blog-post-title 형식의 url이 됩니다.

제목, 테그, 작성자 설정

제목, 테그, 작성자의 경우 Front-matter 형식으로 작성합니다.

website/blog/authors.yml 에 추가한 경우

website/blog/2022-03-21-blog-write/index.md
---
title: 제목 
authors: 작성자
tags: [MarkDown, docusaurus]
---

추가하지 않은 경우

website/blog/2022-03-21-blog-write/index.md
---
title: 제목 
authors: 
  name: Lee Si Yong
  title: 미래전략그룹 대리
  url: https://github.com/fenrirD
  image_url: https://github.com/fenrirD.png
tags: [MarkDown, docusaurus]
---

caution

작성자 정보를 추가를 권장합니다.

블로그 목록 설정

전체 블로그 페이지(/blog)에서 모든 게시글을 보여줍니다. 해당 페이지에서  태그를 사용하여 블로그 목록에 표시될 글 아래에 추가 합니다. 그러면  위에 작성된 글만 블로그 목록에 표시됩니다.

website/blog/2022-03-21-blog-write/index.yml
---
title: 블로그 가이드 - MarkDown 
authors: fenrir
tags: [MarkDown, docusaurus]
---

안녕하세요. 미래전략그룹 이시용 대리입니다. 😀

간단하게 기술 블로그 글 작성 방법과 마크다운 문법을 소개하고자 합니다.

포스웨이브 기술 블로그는 [docusaurus](https://docusaurus.io/ko/) 를 커스텀하여 제작 되었습니다. 

<!--truncate-->

## 블로그 글 작성하기

아래와 같이 보여지게 됩니다. 😁

truncate 사용

Docusaurus Plushie

truncate 미사용

Docusaurus Plushie

caution

독자와 원활한 레이아웃을 위해  사용 부탁드립니다.

Markdown

Markdown 문법에 익숙하신 분은 상관 없지만 낯설다면 몇가지 툴을 추천합니다.

또한 Markdown 문법을 공부하고 싶으신 분은 공식 Markdown Guide 를 참고해주세요.

Docusaurus Markdown 추가 기능

Docusaurus 는 mdx 파일도 지원을 하지만 mdx 나중에 다시 다루겠습니다. 😅

코드 블록

기본적으로 Markdown에서 코드 블록은 3개의 억음부호 (`) 를 사용합니다.

코드 제목

코드 제목은 title로 적용 할 수 있습니다.

```javascript title="console.js"
console.log(1)
```

console.js
console.log(1)

대화형 코드 편집기

react-live 를 활용한 code live가 가능합니다.
코드블록 내에서 프로그래밍 언어 설정 후 live 항목을 추가합니다.

```javascript live
() => {
    const sum = (a,b) => a + b
    return sum(3,7)
}
```

라이브 에디터

() => {
    const sum = (a,b) => a + b
    return sum(3,7)
}

() => {
    const sum = (a,b) => a + b
    return sum(3,7)
}

결과

라이브 에디터

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function Clock(props) {
  const [date, setDate] = useState(new Date());
  useEffect(() => {
    var timerID = setInterval(() => tick(), 1000);

    return function cleanup() {
      clearInterval(timerID);
    };
  });

  function tick() {
    setDate(new Date());
  }

  return (
    <div>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

결과

info

Javascript만 지원합니다. React-live Doc 를 참고해주세요.