블로그 파일 이름 선택하기
기존 카테고리 vs 새로운 카테고리
1. 기존 카테고리
  1. 기존 카테고리 중 1개 선택
  2. 새로운 글 제목 입력
2. 새로운 카테고리
  1. 새로운 카테고리 제목 입력
  2. 새로운 카테고리 설명 입력
  3. 새로운 글 제목 입력
3. 결과

---
title: typed title
preview: PREVIEW
author: AUTHOR
update: 2022/07/25
color: "#716ffe"
tags: TAG1, TAG2
---

# Post Title
md

방법2: 스스로 시작하기

반드시 포함해야 하는 meta 속성

title: string
preview: string
author: string
update: string
1. format: YYYY/MM/DD
color: string
1. format: “#HEX” or “rgba(r,g,b,a)” or “rgb(r,g,b)”
tags: string
1. format: tag1, tag2, …

선택가능한 meta 속성

sereis: string
1. format: seriesTitle-seriesNumber
2. ex): js-1, will be first js series
postpone: boolean
1. if true: post will not display
reference: string
1. format: ref_url1, ref_url2, ...

MDX의 힘 느껴보기 🔥

MDX에서 React component 사용해보기

component 불러오기

import { Head } from "@components/BlogOnly/Head"
;<Head title={"This is Next your home"} />
jsx

@components/...와 같은 절대 경로도 지원합니다!

예시 componenet

const Head = ({ title }: { title: string }) => {
    return (
        <>
            <header className="head">{title}</header>

            <style jsx>
                {`
                    .head {
                        font-size: 1.25rem;
                        text-align: center;
                        font-weight: 700;
                    }
                `}
            </style>
        </>
    )
}
export default Head
tsx

불러오는 component는 외부 라이브러리 없이 순수해야합니다
- react hook을 사용할 수 있습니다. 즉 statefull component를 제작할 수 있습니다
절대로 스타일링을 위해 nextJs에 내장된 styled-jsx를 제외한 다른 css-in-js 라이브러리를 사용하지 마세요
- styled-jsx에 대해 더 알아보기
jotai 전역 상태는 공유되지 않습니다

게임 한판 해볼까요?

MDX에서 javascript expression 사용해보기

export const some = some_value
1. 변수 선언
```
export const message = "HI!"
js
```
1. 변수 사용
```
{message}
md
```

IIFE

MDX안에서 IIFE 선언하기

{(() => {
const rand = Math.floor(Math.random() / 0.1)
return <span style={{color: "white", border: "1px solid white", padding: "0.25rem", borderRadius: "0.1rem"}}>{rand}</span>
})()}
md

결과

Local React Component

component 선언하기

export const LocalTitle = ({ text }) => (
    <span
        style={{
            color: "white",
            fontWeight: 700,
            padding: "1rem",
            backgroundColor: "tomato",
            borderRadius: "2.5px",
        }}
    >
        {text}
    </span>
)
jsx

MDX안에서 선언한 컴포넌트 사용하기

<LocalTitle text={"Local Title"} />
md

결과

Local Title

MDX 공식 사이트 방문해보기

expression, 여기 눌러서 알아보기 🔎

danpacho

•

2022년 07월 27일

•

Thanks For Reading !

배포 이전에 해야할 일

MDX component 알아보기