SEO Jing
엄청난 피드백.
CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.
SEO Jing
생각보다 어려웠던 댓글, 완독 로컬스토리지.
localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.
한 줄로 요약하면 Markdown + React 컴포넌트를 같이 쓸 수 있는 파일 형식이다.
# 제목
**굵게**, _기울임_
- 리스트
- 리스트
Markdown의 불편한 점이 정적이라는 거다. 근데 MDX는 안에 React 컴포넌트를 그냥 넣을 수 있다.
# 리액트 훅 정리
일반 마크다운 텍스트는 그냥 이렇게 씁니다.
{/* React 컴포넌트를 바로 삽입 */}
<CodeBlock language="tsx">
const [count, setCount] = useState(0)
</CodeBlock>
## 직접 눌러보세요
<InteractiveCounter /> {/* 실제로 동작하는 컴포넌트! */}
파일명, 하이라이트 줄 번호 같은 props를 넘겨서 커스텀 코드 블럭을 만들 수 있다.
Callout 같은 컴포넌트로 경고, 팁, 정보 박스를 자유롭게 넣을 수 있다.
---
title: TanStack Query 완벽 정리
date: 2024-03-14
tags: [react, query]
thumbnail: /images/tanstack.png
---
이 --- 안에 있는 데이터를 코드에서 읽어서 목록 페이지, SEO 태그 등에
활용한다.
| 티스토리/벨로그 | MDX 블로그 | |
|---|---|---|
| 글 작성 | 에디터에서 작성 | VSCode에서 .mdx 파일 작성 |
| 저장 | 서버 DB | GitHub 레포 |
| 커스텀 | 제한적 | 무제한 (내 컴포넌트 삽입) |
| 디자인 | 테마 선택 |
개발 블로그에 MDX가 좋은 이유는:
요즘 개발자 블로그 (Josh Comeau, Kent C. Dodds 등) 대부분 MDX 기반이다!
Post Q&A
MDX가 뭘까? 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!
| 직접 구현 |
| 이식성 | 플랫폼 종속 | 파일이라 어디서든 이동 가능 |
localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.