| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 |
Tags
- 오블완
- Spring
- SQL
- Java
- Unity
- 크리스마스
- 쿠킹덤
- 홀리데이익스프레스
- 유니티
- MySQL
- 쿠키런킹덤크리스마스
- MERN
- 쿠키런킹덤공략
- 쿠키런킹덤
- 딥러닝
- 웹개발
- edwith
- react
- JavaScript
- programmers
- 티스토리챌린지
- 개발자
- 이클립스
- dart
- oracle
- 자바
- Eclipse
- HTML
- 자바스크립트
- 프로그래머스
Archives
- Today
- Total
Dev study and Repost
PERN - 마크다운 설정 03 markdown / react npm markdown 본문
Building & Learning/MERN PERN
PERN - 마크다운 설정 03 markdown / react npm markdown
devlunch4 2025. 8. 28. 14:31반응형
PERN - 마크다운 설정 03 markdown / react npm markdown
웹서비스 제공중 태그 및 내용 작성을 했으나 마크다운 형식의 글을 표현해야하는 경우가 있습니다.
즉 react 앱에서 마크다운을 직접 보여할 경우, 이 기능을 구현해야하죠.
--
사용자가 작성한 텍스트를 마크다운으로 랜더링 하거나, 문서형 콘텐츠를 보여줘야할때, 이럴때 간단히 패키지를 이용해서 쉽게 구현이 가능합니다,
---
react-markdown 패키지를 사용하면 되는데요.
https://www.npmjs.com/package/react-markdown
react-markdown
React component to render markdown. Latest version: 10.1.0, last published: 6 months ago. Start using react-markdown in your project by running `npm i react-markdown`. There are 3885 other projects in the npm registry using react-markdown.
www.npmjs.com
소스에 적용 방법을 기록으로 남겨봅니다.
가장 먼저 패키지를 설치합니다.
명령어
$ npm install react-markdown
설치 완료!
소스에 임포트하기!
소스에 적용하기 후 변경 확인!
기존,
변경 = 마크다운 형식 적용
--
추가 옵션 제공 필요!
스타일 추가!
깔끔하게 적용 된 것을 확인!
끝!
반응형
'Building & Learning > MERN PERN' 카테고리의 다른 글
| PERN - 05 neon 네온 연동 a/ 클라우드 네이티브 서버리스 데이터베이스 플랫폼 PostgreSQL (1) | 2025.08.28 |
|---|---|
| PERN - 서버 설정 04 server (1) | 2025.08.28 |
| PERN - 구독 결제 설정 02 clerk billing (1) | 2025.08.28 |
| PERN - 설정 시작 setting first 01 - lucide-react (0) | 2025.08.28 |
| MERN - 클라이언트/서버 프로젝트 메일 서비스 연동 설정 9 - vercel 배포 server, client (4) | 2025.07.14 |
'Building & Learning/MERN PERN' Related Articles
more
Comments