docz

KO | EN

gitlite — search

#javascript #php #java #python #monitoring #css3 #html #gulp #hacktoberfest #android #shell #dotfiles

★ 23,587 Open GitHub ↗

✍ 이제 물건을 기록하는 것이 그 어느 때보다 쉬워졌습니다!

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Docz
Docz를 사용하면 코드를 위한 아름답고 인터랙티브한 문서를 쉽고 빠르게 작성하고 배포할 수 있습니다.
코드를 보여주는 MDX 파일을 생성하면 Docz가 이를 실시간 리로드 기능이 포함된 프로덕션 준비가 완료된 사이트로 변환해 줍니다.
## 왜 Docz인가요?
코드 문서를 작성하는 것은 소프트웨어 개발 시 가장 중요하고 시간이 많이 소요되는 작업 중 하나입니다.
커스텀 문서 사이트를 구축하고 유지관리하는 데 많은 시간이 소요됩니다.
Docz를 사용하면 [GatsbyJS](https://www.gatsbyjs.org)와 [Gatsby theme shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/)을 활용하여 MDX로 실시간 리로드, SEO 친화적이며 프로덕션에 즉시 사용할 수 있는 문서 사이트를 빠르게 생성하고, 필요에 따라 디자인, 느낌, 동작을 커스텀할 수 있습니다.
## 시작하기
Yarn이나 npm을 사용하여 프로젝트의 의존성에 `docz`를 추가하는 것으로 시작합니다:
```bash
$ yarn add docz # react react-dom
# 또는
$ npm install docz # react react-dom
```
> \*\*참고\*\*: `react`와 `react-dom`은 자동으로 설치되지 않습니다. 직접 설치해야 합니다.
그런 다음 프로젝트 내 원하는 위치에 `.mdx` 파일을 생성합니다:
```mdx
---
name: Button
route: /
---
import { Playground, Props } from 'docz'
import Button from './Button'
# Button
## Basic usage
Click me
No, click me
```
그리고 Button 컴포넌트인 `Button.jsx`를 생성합니다:
```typescript
import React from 'react'
import t from 'prop-types'
const Button = ({ children, type }) => {children}
Button.propTypes = {
/\*\*
\* This is a description for this prop.
\* Button type.
\*/
type: t.oneOf(['button', 'submit', 'reset']),
}
Button.defaultProps = {
type: 'button',
}
export default Button
```
마지막으로 다음 명령어를 실행합니다:
```bash
yarn docz dev
```
이 명령어는 로컬 개발 서버를 시작하고 브라우저에서 문서 사이트를 엽니다.
## 빌드
`yarn docz build` 명령어는 `.docz/dist/`에 정적 사이트를 생성합니다.
`yarn docz serve`를 사용하거나 선호하는 정적 파일 서버(예: `npx serve .docz/dist`)를 통해 생성된 사이트를 서빙하여 테스트해 보세요.
`doczrc.js`의 `dest` 필드에 경로를 지정하거나 커스텀 명령어를 통해 `yarn docz build`가 다른 디렉토리에 출력하도록 설정할 수 있습니다: `yarn docz build --dest docs-site-directory`.
## 배포
docz의 출력물은 정적 에셋으로만 구성됩니다.
따라서 원하는 정적 사이트 호스팅 업체를 사용하여 생성된 `docz` 사이트를 배포할 수 있습니다.
설정에 `dest` 플래그를 제공하지 않았다면, `yarn docz build`로 사이트를 빌드한 후 `.docz/dist`에서 서버로 복사할 생성된 파일들을 찾을 수 있습니다.
## 예시
- \*\*[with basic](https://github.com/doczjs/docz/tree/main/examples/basic)\*\*
- \*\*[with a gatsby site](https://github.com/doczjs/docz/tree/main/examples/gatsby)\*\*
- \*\*[with react native](https://github.com/doczjs/docz/tree/main/examples/react-native)\*\*
- \*\*[with styled-components](https://github.com/doczjs/docz/tree/main/examples/styled-components)\*\*
- \*\*[with typescript](https://github.com/doczjs/docz/tree/main/examples/typescript)\*\*
- \*\*[with algolia search](https://github.com/doczjs/docz/tree/main/examples/with-algolia-search)\*\*
- \*\*[with gatsby-remark-vscode](https://github.com/doczjs/docz/tree/main/examples/with-gatsby-remark-vscode)\*\*
- \*\*[with react-router](https://github.com/doczjs/docz/tree/main/examples/react-router)\*\*
- \*\*[with flow](https://github.com/doczjs/docz/tree/main/examples/flow)\*\*
- \*\*[with images](https://github.com/doczjs/docz/tree/main/examples/images)\*\*
- \*\*[with sass](https://github.com/doczjs/docz/tree/main/examples/sass)\*\*
- \*\*[with less](https://github.com/doczjs/docz/tree/main/examples/less)\*\*
- \*\*[with stylus](https://github.com/doczjs/docz/tree/main/examples/css-stylus)\*\*
- \*\*with css modules\*\*: 별도의 설정 없이 바로 작동합니다.
### 전체 docz 예시 목록은 [여기](https://github.com/doczjs/docz/tree/main/examples)에서 확인할 수 있습니다.
## 사용 중인 곳
- \*\*[Welcome UI](https://welcome-ui.com/)\*\*: react • styled-components • styled-system 및 reakit을 사용하는 커스텀 가능한 디자인 시스템.
- \*\*[React Hooks Testing Library](https://react-hooks-testing-library.com/)\*\*: 🐏 Simp

간결하고 완벽한 React hooks 테스트 유틸리티로, 모범적인 테스트 관행을 장려합니다.
- \*\*[Mobx React](https://mobx-react.js.org/)\*\*: mobx-react 문서 사이트.
- \*\*[React Google Charts](https://react-google-charts.com/)\*\*: Google Charts Visualization 및 Charts API를 위한 가볍고 타입이 지정된 React 래퍼.
- \*\*[Entur](https://developer.entur.org/)\*\*: Entur는 노르웨이의 모든 대중교통에 대한 국가 등록소를 운영합니다.
- \*\*[FAB Specification](https://fab.dev/)\*\*: 💎 FAB는 프론트엔드 애플리케이션을 위한 컴파일 타겟입니다.
- \*\*[@umijs/hooks](https://hooks.umijs.org/)\*\*: React Hooks 라이브러리.
- \*\*[React Yandex Maps](https://react-yandex-maps.now.sh/)\*\*: React를 위한 Yandex Maps API 바인딩.
- \*\*[Components-extra](https://components-extra.netlify.com)\*\*: material-ui와 styled-components로 구축된 사용자 정의 가능한 react 컴포넌트 블록.
- \*\*[Add your site](https://github.com/doczjs/docz/edit/main/README.md)\*\*
## 기여자 (Contributors)
이 프로젝트는 기여해주신 모든 분들의 덕분에 존재합니다. [[Contribute](CONTRIBUTING.md)].
[![](https://opencollective.com/docz/contributors.svg?width=890&button=false)](https://github.com/doczjs/docz/graphs/contributors)
## 기여하기 (Contributing)
어떠한 형태의 기여든 매우 환영하며 감사히 생각합니다!
docz에 시간을 투자하여 기여하고 싶으시다면 시작하는 데 도움이 될 만한 제안 목록입니다:
1. GitHub에서 프로젝트에 스타(Star)를 눌러주세요.
2. [issues](https://github.com/doczjs/docz/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)에서 지식과 경험을 공유하여 사람들을 도와주세요.
3. 버그를 찾아 신고해주세요.
4. 문제를 해결하거나 기능을 추가하기 위해 pull request를 제출해주세요.
5. 기능 요청을 통해 docz의 미래에 영향을 주세요.
시작할 곳을 찾고 있다면 `good first issue` 라벨이 붙은 이슈를 꼭 확인해 보세요:
[![Good First Issue](https://img.shields.io/github/issues/doczjs/docz/good%20first%20issue.svg)](https://github.com/doczjs/docz/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
pull request를 열기 전에 [Contributing Guide](/CONTRIBUTING.md)를 읽어보세요.
또한 OpenCollective를 통해 당사를 후원하여 docz의 미래를 보장하는 데 도움을 주실 수 있습니다.

[![Open Collective](https://cdn-std.dprcdn.net/files/acc_649651/Q5nVhT)](https://opencollective.com/docz)

docz

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README