Writer's Guide

아래에는 콘텐츠 편집 및 추가에 대해 알아야 할 모든 내용이 포함되어 있습니다. 편집이나 추가를 시작하기 전에 몇 가지 확인하세요. 때때로 가장 어려운 부분은 콘텐츠가 있어야 할 위치를 찾고 콘텐츠가 이미 존재하는지 여부를 결정하는 것입니다.

Process

  1. 글이 링크되어 있다면 관련된 이슈를 확인하세요.
  2. 편집을 누르고 구조를 확장하세요.
  3. 변경점들을 Pull Request에 생성하세요.

YAML Frontmatter

모든 글들은 상단에 YAML Frontmatter로 쓰인 작은 섹션을 포함합니다.

---
title: My Article
group: My Sub-Section
sort: 3
contributors:
  - [github username]
related:
  - title: Title of Related Article
    url: [url of related article]
---

각각에 대해 알아보겠습니다.

  • title: 글의 제목입니다.
  • group: 하위 섹션의 제목입니다.
  • sort: 해당 섹션 (또는) 하위 섹션 내에서 글의 순서입니다.
  • contributors: 글에 기여한 사람들이 GitHub username 리스트입니다.
  • related: 관련된 읽을거리 또는 유용한 예시입니다.

related는 페이지 하단에 Further Reading 섹션을 생성하고 contributors는 그 아래에 Contributors 섹션을 생성합니다. 글을 편집하고 인정받고 싶다면 주저하지 말고 GitHub 사용자 이름을 contributors 목록에 추가하세요.

Article Structure

  1. 간략한 소개 - 어떤 것을 왜 하였는지에 대한 아이디어를 적은 한두 문단입니다.
  2. 남은 콘텐츠 개요 – 콘텐츠가 표시되는 방식입니다.
  3. 주요 콘텐츠 - 주요 내용들을 말하세요.
  4. 결론 - 내용들을 정리하고 주요 포인트들을 요약합니다.

Typesetting

  • Webpack은 문장의 시작 부분에 대문자 W로 작성할 수 있습니다. (출처)
  • 로더는 역 따옴표로 묶여 있으며 kebab-cased입니다. 다음은 예시 입니다. css-loader, ts-loader, …
  • 플러그인은 백틱 및 camel-cased로 묶입니다. 다음은 예시 입니다. BannerPlugin, NpmInstallWebpackPlugin, …
  • "webpack 2"를 사용하여 특정 Webpack 버전을 나타냅니다("webpack v2").
  • ES5 사용; ES2015, ES2016, ... ECMAScript 표준 참조(ES6, ES7)

Formatting

Code

Syntax: ```javascript … ```

function foo() {
  return 'bar';
}

foo();

Quotation

코드 스니펫과 프로젝트 파일(.jsx, .scss 등)에 작은따옴표를 사용하세요.

- import webpack from "webpack";
+ import webpack from 'webpack';

그리고 아래는 인라인 백틱 안에서의 예시입니다.

correct

값을 'index.md'로 설정...

incorrect

값을 "index.md"로 설정...

Lists

  • Boo
  • Foo
  • Zoo

목록은 알파벳순으로 정렬되어야 합니다.

Tables

ParameterExplanationInput TypeDefault Value
--debug로더를 디버그 모드로 변환booleanfalse
--devtool번들 리소스에 대한 소스맵 유형 정의string-
--progress백분율로 컴파일 진행률 출력booleanfalse

테이블도 알파벳순으로 정렬해야 합니다.

Configuration Properties

설정 속성도 알파벳순으로 정렬해야 합니다.

  • devServer.compress
  • devServer.hot
  • devServer.static

Quotes

Blockquote

Syntax: >

이것은 Blockquote입니다.

Tip

Syntax: T>

Syntax: W>

Syntax: ?>

Assumptions and simplicity

문서를 작성할 때 가정하지 마세요.

- 프로덕션을 위해 번들을 최적화하는 방법을 이미 알고 있을 수 있습니다...
+ 이미 우리는 [프로덕션 가이드](/guides/production/)에서 배웠습니다...

모든 것이 단순하다고 가정하지 마세요. '그냥', '간단하게'와 같은 단어를 피하세요.

- 간단히 명령을 실행하세요...
+ `command-name` 명령을 실행하세요...

Configuration defaults and types

문서를 쉽게 이해할 수 있고 잘 작성할 수 있도록 항상 모든 문서 옵션에 유형과 기본값을 제공하세요. 저희는 문서화된 옵션은 제목으로 작성한 후 유형과 기본값을 추가합니다.

configuration.example.option

string = 'none'

여기서 = 'none'은 주어진 옵션에 대한 기본값이 'none'임을 의미합니다.

string = 'none': 'none' | 'development' | 'production'

여기서 : 'none' | 'development' | 'production'에는 가능한 유형 값을 열거합니다. 이 경우에는 'none', 'development''production'의 세 가지 문자열을 사용할 수 있습니다.

주어진 옵션에 대해 사용 가능한 모든 유형을 나열하려면 유형 사이에 공백을 사용하세요.

string = 'none': 'none' | 'development' | 'production' boolean

배열을 표시하려면 대괄호를 사용하세요.

string [string]

array에 여러 유형이 허용되는 경우 쉼표를 사용합니다.

string [string, RegExp, function(arg) => string]

함수를 표시하려면 사용 가능한 인수도 나열하세요.

function (compilation, module, path) => boolean

여기서 (compilation, module, path)에는 제공된 함수가 수신할 인수를 나열하고 => boolean은 함수의 반환 값이 boolean이어야 함을 의미합니다.

플러그인을 사용 가능한 옵션 값 유형으로 표시하려면 Plugin의 camel-cased 형식의 제목을 사용하세요.

TerserPlugin [TerserPlugin]

이는 옵션이 하나 또는 소수의 TerserPlugin 인스턴스를 예상한다는 것을 의미합니다.

숫자를 표시하려면 number를 사용하세요.

number = 15: 5, 15, 30

객체를 표시하려면 object를 사용하세요.

object = { prop1 string = 'none': 'none' | 'development' | 'production', prop2 boolean = false, prop3 function (module) => string }

객체의 키가 여러 유형을 가질 수 있는 경우 |를 사용하여 나열하세요. 다음은 prop1이 문자열과 문자열 배열 모두일 수 있는 예입니다.

object = { prop1 string = 'none': 'none' | 'development' | 'production' | [string]}

이를 통해 기본값, 열거 및 기타 정보를 표시할 수 있습니다.

객체의 키가 동적이며 사용자 정의된 경우 <key>를 사용하여 설명합니다.

object = { <key> string }

Options shortlists and their typing

때때로 목록에 있는 객체와 함수의 특정 속성을 설명하고 싶을 때가 있습니다. 해당하는 경우 속성이 등록된 목록에 직접 입력을 추가합니다.

  • madeUp (boolean = true): short description
  • shortText (string = 'i am text'): another short description

예제는 EvalSourceMapDevToolPlugin 페이지의 options 섹션에서 찾을 수 있습니다.

절대적 URL(예: https://webpack.js.org/concepts/mode/) 대신 상대적 URL(예: /concepts/mode/)을 사용하여 자체 콘텐츠를 연결하세요.

2 Contributors

pranshuchittoraEugeneHlushko

Translators