์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 | 31 |
- ํ๊ธ
- codelab
- C++
- IOS
- OpenCV
- ์ค๋ํดํ
- ์ค์ํํธ
- Column
- useEffect
- ํ๊ณ
- vscode
- UIKit
- dart
- Git
- ์ ํ๋ก๊ทธ์ธ๊ตฌํํ๊ธฐ
- Swift
- Center
- Simulator
- ํดํ
- git error
- Xcode
- family control
- Ai
- ๊ณต์๋ฌธ์
- Flutter codelab
- SwiftUI
- React
- Computer Vision
- FLUTTER
- ๋ค์ง
- Today
- Total
ram2 ๐
[react] markdown editor, viewer ๊ตฌํํ๊ธฐ ๋ณธ๋ฌธ
๋ฆฌ์ํธ.. js, html, css ์ด ์ค ๊ทธ ์ด๋ ๊ฒ๋ ๋ฐฐ์ด ์ , ์ ํ ์ ์์์ง๋ง... ๊ต์ฅํ ์งง์ ์๊ฐ์ ๋ฆฌ์ํธ๋ฅผ ๊ณต๋ถํด์ผ๋ง ํ๋ค.
์ฃผ์ด์ง ์๊ฐ์ js๋ถํฐ ๋ฐฐ์ฐ๊ณ , ์ฐจ๊ทผ์ฐจ๊ทผ ๊ฐ์๋ฅผ ๋ค์ผ๋ฉฐ ๊ณต๋ถํ๋ค.
ํ์ง๋ง.... ์ ๋๋ก ์ดํดํ๊ณ , ์ค์ ์ ์ฌ์ฉํ๊ธฐ์๋ ์์ ๊ฐ๊ณผ ์ง์์ด ํฑ์์ด ๋ถ์กฑํ๋ค.
์ด๋ฒ ํ๋ก์ ํธ๋ฅผ ๋์๋ณด๋ฉด ๊ฑฐ์ ์ค์ ์ ๋ถ๋ชํ๋ฉฐ ๋ฐฐ์ ๋ ๊ฒ ๊ฐ๋ค.
๊ทธ ์ค ๋ฆฌ์ํธ๋ก ๋งํฌ๋ค์ด ์๋ํฐ์ ๋ทฐ์ด ๊ตฌํํ๋ ๋ถ๋ถ์ ์ ๋ฆฌํด๋ณด๋ ค๊ณ ํ๋ค.
๋๋ฌด๋ ๋คํํ ๋ง์ ์ฌ๋๋ค์ด ํฌ์คํ ์ ํด๋์๊ณ , ๋๋ฌด๋ ํธ๋ฆฌํ ํจํค์ง๊ฐ ์์๊ธฐ์ ์์ฃผ ์ฝ๊ณ ๊ฐ๋จํ๊ฒ ์ฌ์ฉํ ์ ์์๋ค.
๋ฌผ๋ก ๋ทฐ์ด๋ฅผ ํ๋ ๊ฒ์ ์์ด ์์ฃผ ์ค๋ ์๊ฐ ์ฝ์ง์ ํ๋ค๋ ๊ฒ...์ ์์ง ๋ชปํ ๊ฒ ๊ฐ๋ค...ํํ
1. install
npm i @uiw/react-md-editor
2. import
import MDEditor from '@uiw/react-md-editor';
3. editor ์ฌ์ฉํ๊ธฐ
๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ๋ฉด ๋๋ค.
<div className="markarea">
<div data-color-mode="light">
<MDEditor height={865} value={mdinfo} onChange={setMD} />
</div>
</div>
4. viewer ์ฌ์ฉํ๊ธฐ
์ฌ์ค ์ด ๋ถ๋ถ์์ ์ฝ์ง์ ๊ฝค ์ค๋ํ๋ค... ํด๋น ํจํค์ง์ ๋ทฐ์ด๊ฐ ๊ฐ์ด ์์๋๋ฐ ๊ทธ๊ฑธ ๋ณด์ง ๋ชปํ๊ณ ์๊พธ ๋ค๋ฅธ viewer ํจํค์ง๋ฅผ ์ฐพ์ ์ ์ฉํด๋ดค๋ ๊ฒ.... ๊ทธ๋ ๋ค๋ณด๋ ๋งํฌ๋ค์ด์ด ์ ๋๋ก ๋ณด์ฌ์ง์ง ์์๋ค...
์ด๋ ๊ฒ .Markdown์ ์ฌ์ฉํ๊ณ , source์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋งํฌ๋ค์ด String์ ๊ฐ์ ธ์ค๋ฉด ๋๋ค!!!
<div className="markdownDiv" data-color-mode="light" style={{padding:15}}>
<MDEditor.Markdown
style={{ padding: 10 }}
source={mkdStr}
/>
</div>
์ด๋ ๊ฒ ์ฒซ ์น ๊ฒฝํ์ด์ ๋ฆฌ์ํธ ๊ฒฝํ์ ์ฑ๊ณต์ ์ผ๋ก ๋ง๋ฌด๋ฆฌํ๋ค!!!
๋ง์ ์ฐ์ฌ๊ณก์ ์ด ์์์ง๋ง.. ํ์๋ค์ด ์์๋ค๋ฉด.......์ ๋ง....๋ ์๋ฌด๊ฒ๋ ํ ์ ์์์๊ฑฐ๋ค...
๋ฆฌ์ํธ ์กฐ๊ธ ๋ ์นํด์ ธ๋ณด์๊ตฌ.. ๋ด๊ฐ ์ ํ ๊ฒ...๐ฅน
'๐ฅ๏ธ react' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[react] ThemeProvider ์ฌ์ฉํ๊ธฐ (0) | 2024.01.20 |
---|---|
[react] dropdown ๋ง๋ค๊ธฐ (์์ด์ฝ, ๋๋กญ๋ค์ด) (0) | 2024.01.17 |
[react] react-dropdown ์ปค์คํ ํ๊ธฐ (0) | 2024.01.15 |
[react] useEffect() (0) | 2022.12.27 |
styled components (0) | 2022.12.27 |