Hello Jay's Programming World!

[React] react-markdown 심화: 수학 수식(KaTeX) · 코드 하이라이트 · 유용한 플러그인 총정리

코딩하는 Jay — Thu, 4 Jun 2026 16:25:15 +0900

AI로 생성한 이미지

안녕하세요. 코딩하는 Jay입니다.

예전에 [React 환경에서 Markdown 출력하기(react-markdown)] 글을 올렸는데, 꾸준히 찾아주시더라고요. 그래서 오늘은 한 발 더 들어가서, 실제 서비스에서 자주 필요한 ① 수학 수식(KaTeX) ② 코드 문법 강조(syntax highlight) ③ 유용한 remark/rehype 플러그인을 정리해보려고 합니다.

본 글은 react-markdown v9 기준입니다. (v9에서 API가 일부 바뀌었으니 아래 주의사항도 함께 보세요.)

1. remark와 rehype, 뭐가 다른가요?

react-markdown은 내부적으로 unified 생태계를 씁니다. 처리 흐름을 알면 플러그인 배치가 쉬워집니다.

마크다운 텍스트
  → (remark) mdast: 마크다운 추상 구문 트리
  → (rehype) hast: HTML 추상 구문 트리
  → React 엘리먼트

remarkPlugins = 마크다운 단계에서 동작 (예: $수식$ 문법 인식, GFM 표 파싱)
rehypePlugins = HTML 단계에서 동작 (예: 수식 렌더링, 코드 하이라이트)

즉 "문법을 새로 인식"하는 건 remark, "HTML로 꾸미는" 건 rehype라고 보면 됩니다.

2. 설치

npm install react-markdown remark-gfm remark-math rehype-katex rehype-highlight katex highlight.js

패키지	역할
`remark-gfm`	GFM 지원 (표, 체크박스, 취소선, 자동 링크)
`remark-math`	$...$ / `$$...$$` 수식 문법 인식
`rehype-katex`	인식된 수식을 KaTeX로 렌더링
`rehype-highlight`	코드 블록 문법 강조 (highlight.js 기반)

3. 기본 + GFM (표·체크박스)

import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export default function MarkdownView({ content }: { content: string }) {
  return (
    <div className="markdown-body">
      <Markdown remarkPlugins={[remarkGfm]}>{content}</Markdown>
    </div>
  )
}

⚠️ v9 주의: <Markdown>에 더 이상 className prop을 직접 못 줍니다. 위처럼 바깥 <div>로 감싸서 스타일을 적용하세요.

4. 수학 수식 — KaTeX

remark-math(인식) + rehype-katex(렌더)를 함께 써야 합니다. 그리고 KaTeX CSS import가 필수입니다.

import Markdown from 'react-markdown'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import 'katex/dist/katex.min.css' // ← 이거 빠뜨리면 수식이 깨져 보입니다

export default function MathMarkdown({ content }: { content: string }) {
  return (
    <Markdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>
      {content}
    </Markdown>
  )
}

마크다운에서는 이렇게 씁니다.

인라인 수식: $E = mc^2$

블록 수식:
$$
a^2 + b^2 = c^2
$$

자주 하는 실수 2가지: (1) katex.min.css import 누락 → 수식 모양이 다 깨집니다. (2) 본문에 $ 기호(가격 등)가 많을 때 → 의도치 않게 수식으로 파싱될 수 있으니 \$로 이스케이프하세요.

5. 코드 문법 강조 (syntax highlight)

방법 A — rehype-highlight (가장 간단)

import Markdown from 'react-markdown'
import rehypeHighlight from 'rehype-highlight'
import 'highlight.js/styles/github-dark.css' // ← 테마 CSS 필수

export default function CodeMarkdown({ content }: { content: string }) {
  return (
    <Markdown rehypePlugins={[rehypeHighlight]}>{content}</Markdown>
  )
}

```js 처럼 fence에 언어를 적으면 자동으로 강조됩니다. 테마 CSS만 import하면 끝이라 가장 빠릅니다.

방법 B — react-syntax-highlighter (커스터마이징·라인 번호)

라인 번호, 특정 줄 강조 등 세밀한 제어가 필요하면 components로 code를 직접 교체합니다.

import Markdown from 'react-markdown'
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'

export default function CodeMarkdown({ content }: { content: string }) {
  return (
    <Markdown
      components={{
        code({ className, children, ...rest }) {
          const match = /language-(\w+)/.exec(className || '')
          return match ? (
            <SyntaxHighlighter
              {...rest}
              PreTag="div"
              language={match[1]}
              style={oneDark}
              showLineNumbers
            >
              {String(children).replace(/\n$/, '')}
            </SyntaxHighlighter>
          ) : (
            <code className={className} {...rest}>
              {children}
            </code>
          )
        },
      }}
    >
      {content}
    </Markdown>
  )
}

방법 A: 빠르고 가벼움. 블로그·문서엔 보통 이걸로 충분
방법 B: 라인 번호·줄 강조 등 제어 필요할 때

6. 다 합치기 + 유용한 플러그인

실제 서비스에서는 보통 이렇게 묶어 씁니다.

import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import rehypeHighlight from 'rehype-highlight'
import rehypeSlug from 'rehype-slug'
import 'katex/dist/katex.min.css'
import 'highlight.js/styles/github-dark.css'

export default function RichMarkdown({ content }: { content: string }) {
  return (
    <div className="markdown-body">
      <Markdown
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex, rehypeHighlight, rehypeSlug]}
      >
        {content}
      </Markdown>
    </div>
  )
}

알아두면 좋은 플러그인:

플러그인	역할	단계
`rehype-slug`	헤딩에 `id` 자동 부여 (목차·앵커용)	rehype
`rehype-autolink-headings`	헤딩에 앵커 링크 추가	rehype
`rehype-raw`	마크다운 안의 생 HTML 렌더 허용	rehype
`rehype-sanitize`	XSS 방지용 HTML 정제	rehype

7. 꼭 기억할 주의사항

CSS import를 잊지 마세요 — KaTeX(katex.min.css), highlight.js(테마 CSS) 둘 다 없으면 "왜 안 꾸며지지?" 하게 됩니다.
플러그인 순서 — remark-math(remark)가 있어야 rehype-katex(rehype)가 렌더할 게 생깁니다. remark → rehype 흐름을 기억하세요.
보안 — 사용자 입력 마크다운을 그대로 렌더한다면, rehype-raw로 생 HTML을 허용할 때 반드시 rehype-sanitize를 함께 써서 XSS를 막으세요.
v9 변경점 — <Markdown className>이 제거됐습니다. 래퍼 div로 감싸세요.

마무리

react-markdown은 플러그인만 잘 조합하면 수식·코드·표·목차까지 갖춘 꽤 완성도 높은 렌더러가 됩니다. 저도 제 사이드 프로젝트(jay-project.kr)의 여러 도구에서 remark + rehype + KaTeX 조합을 실제로 쓰고 있는데, 한 번 세팅해두면 두고두고 재활용하기 좋더라고요.

필요한 기능부터 하나씩 붙여보세요. 도움이 되셨길 바랍니다. 참고하세요!

[TypeScript] d.ts 파일과 types.ts 파일의 차이

코딩하는 Jay — Thu, 16 Jan 2025 08:00:11 +0900

TypeScript

안녕하세요, Jay입니다.

오늘은 TypeScript에서 자주 사용하는 두 가지 파일인 d.ts 파일과 types.ts 파일의 차이를 알아보려고 합니다.

저도 처음 TypeScript를 사용하면서 헷갈렸던 부분 중 하나인데요, 프로젝트를 하다 보면 이 둘을 어떻게 구분하고 사용하는지 감이 안 올 때가 있습니다. 이 글에서는 d.ts 파일과 types.ts 파일의 특징과 용도를 설명해 보겠습니다.

1. d.ts 파일이란?

d.ts 파일은 타입 선언 파일(Declaration File)이라고 합니다.
주로 외부 라이브러리의 타입 정보를 TypeScript에 알려주기 위해 사용됩니다.

예를 들어, 어떤 JavaScript 라이브러리를 사용하는데 해당 라이브러리가 타입 정보를 제공하지 않는다면 d.ts 파일을 만들어서 타입을 직접 정의할 수 있습니다.

특징:
- 실행 가능한 코드가 포함되지 않습니다.
- 타입 선언만 포함되며, 컴파일 시 JavaScript로 변환되지 않습니다.
- @types 패키지로 배포되는 타입 정의 파일들이 모두 .d.ts 파일입니다.

// example.d.ts
declare module "my-library" {
  export function doSomething(value: string): void;
}

위 코드는 my-library라는 라이브러리가 제공하지 않는 타입을 직접 선언한 예입니다.

2. types.ts 파일이란?

types.ts 파일은 프로젝트 내부에서 사용할 타입, 인터페이스 등을 정의하는 파일입니다.

예를 들어, 프로젝트의 여러 컴포넌트나 모듈에서 공통으로 사용하는 타입을 정의하고 관리하기 위해 사용합니다.

특징:
- 일반 TypeScript 파일입니다.
- 타입 외에도 실행 가능한 코드(함수, 클래스 등)를 포함할 수 있습니다.
- 컴파일 시 JavaScript 파일로 변환됩니다.

// types.ts
export interface User {
  id: number;
  name: string;
}

export type Status = "active" | "inactive" | "suspended";

위 코드는 프로젝트 내부에서 사용할 User 인터페이스와 Status 타입을 정의한 예입니다.

3. 주요 차이점

구분	d.ts 파일	types.ts 파일
목적	외부 라이브러리의 타입 정의	프로젝트 내부 타입 정의
코드 포함 여부	실행 가능한 코드 포함 불가	실행 가능한 코드 포함 가능
컴파일 결과	JavaScript 파일로 변환되지 않음	JavaScript 파일로 변환됨
주 사용 사례	외부 라이브러리 타입 선언, 글로벌 타입 정의	프로젝트 내부의 공통 타입 정의 및 재사용

4. 언제 어떤 파일을 사용해야 할까요?

외부 라이브러리 타입 정의
외부 라이브러리에서 타입을 제공하지 않는 경우 d.ts 파일을 사용합니다.
예: @types 패키지를 설치하거나 직접 선언.
프로젝트 내부 타입 정의
프로젝트에서 사용되는 타입을 관리하려면 types.ts 파일을 사용합니다.
예: API 응답 타입, 전역적으로 사용하는 인터페이스 정의 등.

[Git] git pull, git fetch 명령어 차이

코딩하는 Jay — Wed, 15 Jan 2025 14:16:17 +0900

안녕하세요, Jay입니다.

오늘은 Git을 사용하면서 자주 사용하는 명령어인 git pull과 git fetch의 차이를 알아보려고 합니다.
두 명령어 모두 원격 저장소(remote repository)와 관련이 있지만, 그 동작 방식에는 명확한 차이가 있습니다.

git fetch란?

git fetch는 원격 저장소의 변경사항을 로컬 저장소로 가져옵니다.
하지만 작업 중인 브랜치에는 영향을 주지 않습니다. 즉, 로컬 브랜치의 상태는 그대로 유지되고, 원격 저장소의 최신 커밋만 확인할 수 있게 됩니다.

git fetch

사용 예시

원격 저장소에서 변경 사항이 있는지 확인하고 싶을 때 사용합니다.
merge 또는 rebase하기 전에 최신 상태를 가져와 비교하고 싶을 때 유용합니다.

git pull이란?

git pull은 git fetch와 git merge를 합친 명령어입니다.
즉, 원격 저장소의 변경 사항을 가져온 뒤, 현재 작업 중인 브랜치에 바로 병합(merge) 합니다.

git pull

사용 예시

로컬 브랜치에 원격 저장소의 최신 변경 사항을 바로 반영하고 싶을 때 사용합니다.
협업 프로젝트에서 팀원이 작업한 내용을 빠르게 반영하고 싶을 때 유용합니다.

주요 차이점 정리

구분	git fetch	git pull
동작 방식	변경 사항을 가져오기만 하고 병합하지 않음	변경 사항을 가져오고 자동으로 병합까지 수행
작업 브랜치 영향	없음	현재 작업 중인 브랜치가 즉시 업데이트됨
안전성	원격 변경 사항을 미리 확인 가능 (병합 전 상태 확인 가능)	충돌 발생 시 바로 해결해야 함

언제 사용해야 할까?

git fetch를 먼저 실행한 후 필요에 따라 병합하는 것이 더 안전한 방법입니다.
예를 들어, 아래와 같이 진행하면 원격 저장소의 변경 사항을 미리 확인하고 충돌을 방지할 수 있습니다.

git fetch 
git merge origin/main

git pull은 간단하게 최신 상태를 가져오고 바로 작업하고 싶을 때 적합합니다.
하지만, 충돌 가능성이 있는 경우 조심해서 사용해야 합니다.

한눈에 이해하기

git fetch: "업데이트 내용을 가져오기만 하고, 잠깐 관찰해볼게요!"
git pull: "업데이트 내용 바로 가져오고, 제 브랜치에도 반영할게요!"

참고:

https://git-scm.com/doc

Git - Documentation

Documentation Reference The official and comprehensive man pages that are included in the Git package itself. Quick reference guides: GitHub Cheat Sheet | Visual Git Cheat Sheet Book Videos Length: 08:15 Length: 05:06 Length: 05:59 Length: 04:26 See all vi

git-scm.com

Error: socket hang up, ECONNRESET 오류

코딩하는 Jay — Mon, 13 Jan 2025 23:01:25 +0900

본 이미지는 Gemini AI를 활용하여 생성되었습니다.

안녕하세요, Jay입니다.

오늘은 Error: socket hang up과 ECONNRESET 오류에 대해 이야기해보려고 합니다. 이 오류는 클라이언트와 서버 간 연결이 갑작스럽게 종료될 때 발생하는 문제로, 특히 네트워크 요청이나 API 호출 과정에서 자주 나타납니다. 이 글에서는 이 오류의 원인과 해결 방법을 단계별로 알아보겠습니다.

Error: socket hang up이란?

Error: socket hang up은 클라이언트가 서버와 연결을 시도했지만, 그 연결이 예상치 못하게 종료된 상황을 나타냅니다. 이 오류는 주로 다음과 같은 이유로 발생할 수 있습니다:

서버 타임아웃: 서버가 응답을 처리하는 데 시간이 오래 걸려 연결이 끊긴 경우입니다.
요청 제한 (Rate Limiting): 서버가 과도한 요청을 감지하고 이를 차단했을 때 발생합니다.
네트워크 문제: 클라이언트와 서버 간 네트워크 연결이 불안정한 경우입니다.
SSL/TLS 문제: SSL/TLS 인증 과정에서 문제가 발생했을 수 있습니다.
서버 과부하: 서버가 과부하 상태이거나 설정이 잘못된 경우입니다.

해결 방법

1. 재시도 로직 구현하기

일시적인 네트워크 문제로 인해 발생한 오류는 요청을 재시도함으로써 해결될 수 있습니다. 아래는 JavaScript에서 재시도 로직을 구현한 예제입니다:

const fetchWithRetry = async (url, options, retries = 3) => {
    try {
        return await fetch(url, options);
    } catch (err) {
        if (retries > 0) {
            return fetchWithRetry(url, options, retries - 1);
        }
        throw err;
    }
};

이 코드는 요청 실패 시 최대 3번까지 재시도하도록 설계되었습니다.

2. 서버 로그 확인하기

서버에 접근할 수 있다면 로그를 확인하여 오류의 원인을 파악하세요. 서버에서 오류 메시지와 원인을 기록하고 있을 가능성이 높습니다.

3. 타임아웃 시간 늘리기

서버 응답 시간이 오래 걸리는 경우 타임아웃 시간을 늘리는 것도 하나의 방법입니다. 아래는 Axios를 사용한 예제입니다:

const axios = require('axios');
axios.get('https://example.com/api', { timeout: 30000 })
    .then(response => console.log(response))
    .catch(error => console.error(error));

타임아웃 시간을 30초로 설정하여 서버가 느리게 응답해도 오류가 발생하지 않도록 합니다.

4. 네트워크 상태 점검하기

클라이언트의 네트워크 연결 상태를 확인하고 안정적인 환경에서 요청을 재시도하세요. 인터넷 연결이 끊기거나 불안정하면 이 오류가 발생할 가능성이 높습니다.

5. 작은 요청 크기로 테스트하기

보내는 데이터 크기가 너무 커서 서버가 이를 처리하지 못했을 수 있습니다. 요청 데이터를 줄여서 테스트해보세요.

6. SSL/TLS 문제 해결하기

SSL/TLS 인증서 문제가 원인일 수 있으므로, 인증서가 유효한지 확인하세요. OpenSSL을 사용하여 서버와의 연결 상태를 점검할 수 있습니다:

openssl s_client -connect example.com:443

추가 디버깅 방법

Postman 또는 curl로 요청 테스트하기Postman을 사용하여 요청을 보내고 응답을 확인하세요.
curl -v https://example.com/api
디버깅 로그 활성화하기 HTTP 클라이언트의 디버깅 옵션을 활성화하여 요청과 응답의 상세 정보를 확인합니다.

마무리

Error: socket hang up 오류는 다양한 원인으로 발생할 수 있지만, 위에서 소개한 방법들을 활용하면 대부분의 문제를 해결할 수 있습니다. 특히 네트워크 상태를 점검하거나, 재시도 로직을 구현하는 것만으로도 많은 경우에 효과적인 결과를 얻을 수 있습니다.

이 글이 여러분의 문제 해결에 도움이 되었길 바랍니다.

Zustand를 활용한 React 상태 관리

코딩하는 Jay — Tue, 31 Dec 2024 13:26:01 +0900

안녕하세요, Jay입니다.

오늘은 Zustand라는 React 상태 관리 도구를 소개하려고 합니다. Zustand는 경량 상태 관리 라이브러리로, 간단한 API와 강력한 성능을 제공합니다. Redux처럼 강력하면서도 Context API처럼 간결한 사용성을 자랑하기 때문에 많은 React 개발자들에게 사랑받고 있습니다. 이 글에서는 Zustand의 특징과 사용법, 그리고 실제 예제를 통해 Zustand를 활용하는 방법을 자세히 알아보겠습니다.

Zustand란 무엇인가요?

Zustand는 독일어로 "상태"를 뜻하며, React 애플리케이션에서 상태 관리를 간단하게 처리할 수 있게 해주는 라이브러리입니다. 다음과 같은 특징을 가지고 있습니다:

가벼운 설치 용량: 불필요한 의존성이 없고, 코드베이스도 가볍습니다.
보일러플레이트 제거: 복잡한 설정 없이도 간단히 상태를 관리할 수 있습니다.
Context API 대체: React의 Context API처럼 작동하지만, 더 나은 성능을 제공합니다.
비동기 작업 지원: 비동기 액션도 직관적으로 처리할 수 있습니다.
Redux DevTools 호환: 디버깅을 쉽게 하기 위해 Redux DevTools와 통합할 수 있습니다.

Zustand 설치

Zustand를 설치하려면 아래 명령어를 실행하세요:

yarn add zustand

혹은

npm install zustand

설치 후, Zustand의 create 함수를 사용하여 스토어를 생성할 수 있습니다.

기본 사용법

Zustand의 기본 사용법은 매우 간단합니다. 아래는 상태를 정의하고 사용하는 간단한 예제입니다:

import { create } from 'zustand';

// Zustand 스토어 생성
const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

function App() {
  const { count, increase, decrease } = useStore();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default App;

코드 설명

create 함수: Zustand의 핵심 함수로, 스토어를 생성합니다.
set 함수: 상태를 업데이트하는 데 사용됩니다.
useStore 훅: 컴포넌트에서 상태와 액션을 가져오는 데 사용됩니다.

Zustand의 주요 기능

1. 리액티브 상태 관리

Zustand는 상태가 변경되면 자동으로 컴포넌트를 다시 렌더링합니다. React의 상태 관리 방식과 비슷하지만, 더 간결한 코드로 이를 구현할 수 있습니다.

2. 미들웨어 지원

Zustand는 미들웨어를 통해 상태를 확장할 수 있습니다. Redux DevTools를 통합하거나 로깅 기능을 추가하는 등 다양한 작업이 가능합니다.

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increase: () => set((state) => ({ count: state.count + 1 })),
  }))
);

3. 비동기 액션

Zustand는 비동기 작업도 간단히 처리할 수 있습니다. 예를 들어, API 호출 결과를 상태에 저장하려면 아래와 같이 작성할 수 있습니다:

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    set({ data });
  },
}));

실전 예제: Todo 리스트 구현

아래는 Zustand를 활용하여 간단한 Todo 리스트를 구현한 예제입니다:

import { create } from 'zustand';

const useTodoStore = create((set) => ({
  todos: [],
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, { id: Date.now(), ...todo }] })),
  removeTodo: (id) => set((state) => ({ todos: state.todos.filter((todo) => todo.id !== id) })),
}));

function TodoApp() {
  const { todos, addTodo, removeTodo } = useTodoStore();
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim()) {
      addTodo({ text: newTodo, completed: false });
      setNewTodo('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;

특징

간결한 상태 정의: 상태와 액션을 한 곳에서 관리합니다.
빠른 업데이트: Todo 추가/삭제가 즉각적으로 반영됩니다.

Zustand vs Redux

특성	Zustand	Redux
설정 복잡도	간단함	비교적 복잡함
보일러플레이트	거의 없음	많음
DevTools 지원	지원 (Redux DevTools와 호환)	기본적으로 지원
미들웨어 사용	간단하게 통합 가능	추가 설정 필요
러닝 커브	낮음	높음

마무리

Zustand는 간단하면서도 강력한 React 상태 관리 도구입니다. 특히 소규모 프로젝트나 간단한 상태 관리가 필요한 경우에 매우 유용합니다. Redux의 복잡함이나 Context API의 성능 문제로 고민 중이라면 Zustand를 고려해보세요.

Zustand를 활용해 더 간결하고 효율적인 React 개발을 경험해보시기 바랍니다.

React 환경에서 Markdown 출력하기 (react-markdown)

코딩하는 Jay — Mon, 22 Apr 2024 17:25:35 +0900

안녕하세요. Jay 입니다.

오늘은 React-markdown(https://github.com/remarkjs/react-markdown)을 소개해보려고 합니다.

간단한 프로젝트로 openai API 응답을 받아서 화면을 그려주는 프로젝트를 해보게 되었습니다. 해당 API는 SSE(Server-Sent-Event)로 동작하는데, 데이터가 마크다운 형식으로 응답하도록 구성되어 있어서 마크다운 형식을 보여줄 수 있도록 구현하는 것이 필요했습니다.

마크다운 형식의 텍스트를 서식이 있는 문서로 보여주는 라이브러리를 찾아봤는데, react-markdown을 찾았고, 괜찮은 라이브러리인 것 같아 한 번 얘기해보겠습니다.

설치 방법은 간단합니다.

yarn add react-markdown

설치를 했다면 프로젝트에 적용해보겠습니다. 코드는 아래와 같이 아주 간단하게 작성했습니다.

import ReactMarkdown from "react-markdown";

const md = `
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

1. first
2. second
3. third

* 안녕하세요.
* hi
* 하이
`;

function App() {
  return (
    <div className="App">
      <ReactMarkdown>{md}</ReactMarkdown>
    </div>
  );
}

export default App;

출력 결과는 아래와 같습니다. 입력된 마크다운 텍스트가 원하는 서식대로 출력된 것을 확인할 수 있습니다.

Remark

ReactMarkdown은 remark plugin을 통해 기본 마크다운 문법 이외에도 다양한 변형 마크다운을 지원합니다.

Github-Flavored Markdown(GFM)

마크다운의 변형으로 Github-Flavored Markdown이 있습니다. 취소선, 표, 자동 링크 변환, 작업 목록등을 지원합니다. GFM을 문법을 사용하고 싶다면, remark-gfm 패키지를 사용하면 됩니다.

먼저 설치 합니다.

yarn add remark-gfm

실제로 사용하보겠습니다. remark-gfm 패키지를 import하고, remarkPlugins 속성을 이용하여 ReactMarkdown에 적용했습니다. 그리고 작업 목록과 취소선 마크다운을 추가했습니다.

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

const md = `
# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

1. first
2. second
3. third

* 안녕하세요.
* hi
* 하이

# 할 일
* [x] 개발하기
* [ ] 테스트하기
* [ ] ~~배포하기~~
`;

function App() {
  return (
    <div className="App">
      <ReactMarkdown remarkPlugins={[remarkGfm]}>{md}</ReactMarkdown>
    </div>
  );
}

export default App;

결과는 아래와 같습니다. 작업 목록과 취소선도 잘 적용된 것을 확인할 수 있습니다.

이외에도 다양한 remark plugin들이 존재합니다. 본인의 필요에 따라 다양한 plugin을 import 해서 사용할 수 있습니다.

참고:

https://github.com/remarkjs/react-markdown

https://namu.wiki/w/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4#s-4.1

Next.js v14

코딩하는 Jay — Tue, 31 Oct 2023 15:38:33 +0900

Turbopack

53% 더 빠른 로컬 서버 시작
94% 더 빠른 코드 업데이트시, 새로고침

Server Actions (Stable)

caching과 revalidating 통합
간단한 함수나 기본적인 형태로 동작

Partial Prerendering (Preview)

빠른 초기 정적 응답 + 스트리밍 동적 콘텐츠

Next.js Learn (New)

App Router, authentication, database등의 무료 코스 추가

Next.js 14

Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more.

nextjs.org

React v18

코딩하는 Jay — Mon, 30 Oct 2023 17:16:07 +0900

new Root API

이전에는 Root Container에 변화가 없더라도, 새로 랜더링하기 위해 Root를 반드시 체크했어야만 했다.
위 과정이 무의미하다고 판단하여 새로운 Root API를 생성함.
매번 Root를 체크하지 않음.
새로운 Root API에는 Callback이 제거되었는데, hydration, SSR 과 함께 Callback을 사용하면 타이밍이 개발자의 생각과 다르게 작동할 수 있기 때문이다.

automatic batching

더 나은 랜더링 성능을 위해 state 업데이트를 하나로 그룹화 하는 것을 의미한다.
모든 state 업데이트는 리액트에서 발생하는 이벤트 내부의 업데이트와 동일한 방식으로 처리하여 랜더링 횟 수를 최소화 함.
automatic batching을 원하지 않는 경우, ReactDom.flusySync() 함수를 사용하면 된다.

Transition

state를 업데이트하는 우선순위를 지정할 수 있음.
Transition API를 활용하기 위해서는 new Root API를 사용해야함.
useTransition Hook을 사용하여 Transition을 쉽게 사용할 수 있음
- isPending
  - Transition이 진행중인지 여부를 나타냄
  - 이를 통해 사용자들에게 화면 로딩 중, 데이터 업데이트 여부를 전달할 수 있음
- startTransition
  - startTransition 함수 내부에서 state 업데이트를 진행하면, 우선순위 큐 내부에서 뒤로 밀려 업데이트가 진행됨.

React 18 버전의 실상을 파헤치다. - 오픈소스컨설팅 테크블로그 %

안녕하세요. Playce Dev팀 강동희 입니다. 22년 4월 React 의 버전이 18버전으로 메이저 업그레이드 되었습니다. 버전이 올라가면서 무엇이 어떻게 변화 했는지 집중적으로 살펴봅시다!

tech.osci.kr

[React] 이벤트 리스너에서 현재 상태가져오기

코딩하는 Jay — Tue, 20 Jun 2023 17:32:14 +0900

사진: Unsplash 의 Luke Stackpoole

이벤트 리스너 내부에서 상태를 접근하면 최신의 상태를 가져올 수 없습니다. 이벤트 리스너가 등록될 시점의 상태로만 접근이 가능합니다. 그렇다면, 최신의 상태를 가져오기위해서는 어떻게 해야할까요?

useRef를 이용해 이 문제를 해결 할 수 있습니다.

간단한 예제 프로그램을 만들어봤습니다.

화면에는 현재 count 상태 값을 출력하고, 버튼을 클릭하면 count 값을 1 증가시킵니다. 증가된 상태 값은 바로 적용되어 화면에 출력됩니다. 브라우저 화면을 더블 클릭하면 count 값을 alert 창에 출력하도록 이벤트 리스터도 추가했습니다.

import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const incHandler = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    window.addEventListener("dblclick", () => {
      alert("count: " + count);
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>{count}</p>
        <button onClick={incHandler}>증가</button>
      </header>
    </div>
  );
}

export default App;

여기서 바로 문제가 재현됩니다. count를 증가시키고 브라우저 화면을 더블클릭하여 count 값을 출력했는데, 현재 count 값과 다른 값이 출력되는 것을 확인할 수 있습니다.

이것은 이벤트가 등록되는 시점의 count 값을 복사하여 참조하고 있기 때문에 발생되는 문제입니다. 이를 해결하기 위해서는 useRef를 활용해야합니다.

import "./App.css";
import { useEffect, useRef, useState } from "react";

function App() {
  const [count, _setCount] = useState(0);
  const countRef = useRef(count);
  const setCount = (value) => {
    countRef.current = value;
    _setCount(value);
  };

  const incHandler = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    window.addEventListener("dblclick", () => {
      alert("count: " + countRef.current);
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <p>{count}</p>
        <button onClick={incHandler}>증가</button>
      </header>
    </div>
  );
}

export default App;

위와 같이 수정하면 됩니다. useRef 훅을 이용해 countRef 상태를 만들고, setCount할 때, countRef.current와 count 상태를 모두 변경합니다. 이벤트가 등록되는 시점에는 countRef의 참조값이 복사되기 때문에 countRef.current 값을 활용하면 최신의 상태를 유지할 수 있게 됩니다.

샘플 소스: https://github.com/hjleesm/test-useref

GitHub - hjleesm/test-useref

Contribute to hjleesm/test-useref development by creating an account on GitHub.

github.com

참고: https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

Accessing React State in Event Listeners with useState and useRef hooks

If you’re using React hooks in a component with an event listener, your event listener callback cannot access the latest state. We can…

medium.com

[Recoil] Selectors 기본 알아보기

코딩하는 Jay — Fri, 27 Jan 2023 12:59:57 +0900

이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다

selectors는 atoms이나 다른 selectors를 입력으로 받아드리는 순수 함수이다.

selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용된다. 이 말은, 최소한의 상태만 atoms에 저장하고, atoms과 selectors를 조합/가공하여 파생될 수 있는 모든 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로 쓸데 없는 상태의 보존을 방지한다.

selector 함수 내부에서 사용하는 atoms 또는 selectors가 업데이트 되면 해당 selector 함수도 다시 실행된다.

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

예를들어 위 fontSizeLabelState selector의 경우, fontSizeState atom과 의존성이 있기 때문에 fontSizeState atom이 업데이트되면 fontSizeLabelState selector 함수도 다시 실행된다.

위 코드를 통해 selectors에 대해 좀 더 자세히 살펴보자.

selectors는 selector 함수를 사용해 정의한다.

get 속성은 계산될 함수다. get 함수는 get이라는 파라매터를 받는데, get 파라매터를 통해 atoms나 다른 selectors를 사용할 수 있다. get 함수를 통해 의존성이 생기면, 의존성을 갖는 atoms나 selectors가 업데이트 되었을 때, 이 함수도 다시 실행된다.

이렇게 정의한 selectors는 어떻게 사용할 수 있을까?

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

selectors는 atoms와 동일한 방법으로 사용할 수 있다. fontSizeLabelState selector의 경우, get 함수만 정의하여 읽기만 가능한 selector라고 할 수 있다. 읽기만 가능하기 때문에 혼란을 줄이기 위해, useRecoilValue()를 사용해 해당 selector를 사용하고 있다.(만약, selector에 set 함수도 정의했다면, useRecoilState()를 사용해 읽고 쓸 수 도 있다!)

만약, 위 함수에서 setFontSize() 함수를 통해 fontSizeState의 상태가 변화하면 fontSizeState atom과 해당 atom에 의존성을 갖는 fontSizeLabelState selector가 모두 다시 렌더링된다.

참고:

주요 개념 | Recoil

개요

recoiljs.org

이 사진을 Unsplash에서 제공해 주신 Alexander Schimmeck @alschim 님께 감사드립니다