import Test1 from './ExampleBasic'
import Test2 from './ExampleGrid'
import ExampleBasic from '../../example/OBTFloatingPanel/ExampleBasic';
import A from '../../example/OBTFloatingPanel/ExampleBasic';
import ExampleMask from '../../example/OBTDataGrid/ExampleMask';
import ExampleForm from '../../example/OBTFormPanel/ExampleBasic';
import ExampleTooltip from '../../example/OBTTooltip/OBTTooltipTestCode/ExampleBasic';
import ExampleCodePicker from '../../example/OBTCodePicker/ExampleBasic';

MDN 문서 테스트

MDX 문서를 불러오기 위해 @mdx-js/loader 라는 webpack loader를 사용하고 있고,

@mdx-js/loader 1.6.22 버전과 호환되는 syntax-highlight 적용을 위해 @mdx-js/react 라이브러리가 함께 필요합니다.

🧐 issue

확인된 바로는 @mdx-js/loader는 현재 CRA로 만든 프로젝트에 포함되는 react-scrips 5.0.0 이상 버전에서 정상적으로 지원되지 않습니다.

1. Get started

설치

1. $npm install @mdx-js/loader
2. $npm install @mdx-js/react

문서 작성

문서의 작성은 일반적인 markdown 문서 작성과 동일합니다. 문서는 .md, mdx 확장자를 사용할 수 있습니다.

.md 를 사용하면 vs-code에서 highlight가 지원되어 문서 작성에 더 편리합니다.

import ExampleBasic from '../../example/OBTTextField/ExampleBasic';
## OBTTextField 예제

<ExampleBasic />

```js
<OBTAutoValueBinder owner={this}>
    <OBTFormPanel>
        <colgroup>
            <col type='label' />
            <col width='200px' />
            <col width='100px' />
        </colgroup>
        <tbody>
            <tr>
                <th>최대입력제한(10자)</th>
                {/* 속성에 maxLength를 사용하였습니다. */}
                <td><OBTTextField id='maxLength' maxLength={10} /></td>
                <td />
            </tr>
            <tr>
                <th>최대입력제한(10byte)</th>
                {/* 속성에 maxByte 사용하였습니다. */}
                <td><OBTTextField id='maxByte' maxByte={10} /></td>
                <td />
            </tr>
        </tbody>
    </OBTFormPanel>
</OBTAutoValueBinder>

🧐 issue

JSX 구문과 Markdown 구문 사이에는 개행이 있어야 합니다.

불러오기

// Example.jsx
import React from "react";
import MdxView from "../../playground/developmentDocs/MdxView";
/* eslint import/no-webpack-loader-syntax: off */
import MdxDocs from '!babel-loader!@mdx-js/loader!./test.md';


class Example extends React.Component {
    render() {
        return (
            <MdxView>
                <MdxDocs />
            </MdxView>
        );
    }
}

export default Example;

2. 예제

---

---

---

---

---

3. 주의사항

Failed to compile.

./src/Test.md (./node_modules/babel-loader/lib!./node_modules/@mdx-js/loader!./src/Test.md)
SyntaxError: /Users/parkjiwon/Desktop/project/mdx-project/src/Test.md: Support for the experimental syntax 'jsx' isn't currently enabled (18:10):

  16 |   ...props
  17 | }) {
> 18 |   return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
     |          ^
  19 |     <h1>{`안녕하세요`}</h1>
  20 |     <ul>
  21 |       <li parentName="ul">{`저는`}</li>

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

첫 프로젝트 적용시 .babelrc 에 "presets": ["@babel/preset-react"] 추가

---

Failed to compile.

src/App.jsx
  Line 2:1:  Unexpected '!' in '!babel-loader!@mdx-js/loader!./Test.md'. Do not use import syntax to configure webpack loaders  import/no-webpack-loader-syntax

Search for the keywords to learn more about each error.

/* eslint import/no-webpack-loader-syntax: off */
추가 확인하기