Writer's Guide

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

Process

글이 링크되어 있다면 관련된 이슈를 확인하세요.
편집을 누르고 구조를 확장하세요.
변경점들을 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

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

Typesetting

문장 시작에서는 Webpack을 대문자 W로 작성할 수 있습니다. (출처)
loader는 backtick으로 감싸고 kebab-case로 작성합니다: sass-loader, ts-loader 등
plugin은 backtick으로 감싸고 camel-case로 작성합니다: BannerPlugin, NpmInstallWebpackPlugin 등
특정 webpack 버전은 "webpack 2"로 표기합니다(~~"webpack v2"~~).
ECMAScript 표준은 ES5, ES2015, ES2016 등으로 표기합니다(~~ES6~~, ~~ES7~~).

Formatting

Code

Syntax: ```js … ```

function foo() {
  return "bar";
}

foo();

Quotation

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

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

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

correct

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

incorrect

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

Lists

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

Tables

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

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

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

문서를 쉽게 이해할 수 있고 잘 작성할 수 있도록, 항상 모든 문서 옵션에 유형과 기본값을 제공하세요. 유형은 TypeScript 표기법으로 작성하며, 문서화된 옵션 제목 바로 아래에 배치합니다:

configuration.example.option

'none' | 'development' | 'production' = 'none'

유형이 먼저 오고, 기본값이 있는 경우 = 뒤에 따라옵니다. TypeScript에는 기본값 문법이 없으므로, = value 형식은 이 사이트가 추가한 유일한 확장입니다. 그 왼쪽의 모든 내용은 편집기에 붙여넣을 수 있는 표준 TypeScript입니다.

단일 유니온보다 구분하기 쉬운 여러 항목을 나열할 때는 어노테이션 사이에 공백을 사용하세요:

'none' | 'development' | 'production' = 'none' boolean

배열, 함수, 객체, 레코드는 TypeScript 문법 그대로 작성합니다:

의미	표기법
문자열 배열	`string[]`	-	-
여러 유형이 혼합된 배열	`(string \| RegExp \| ((arg: string) => string))[]`
인수가 알려진 함수	`(compilation: Compilation, module: Module) => boolean`	-	-
알려진 속성을 가진 객체	`{ prop1: string, prop2?: boolean }`	-	-
사용자 정의 키를 가진 객체	`Record<string, string>`	-	-
하나 또는 여러 플러그인 인스턴스	`MinimizerPlugin \| MinimizerPlugin[]`	-
고정된 숫자 집합	`5 \| 15 \| 30 = 15`