From 57005cdca86232bf32edfebbf46282afdbe8523f Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Sun, 10 Jan 2016 23:37:55 +0900 Subject: [PATCH 01/13] Translate to kr --- README.md | 367 +++++++++++++++++++++++++++--------------------------- 1 file changed, 181 insertions(+), 186 deletions(-) diff --git a/README.md b/README.md index 390343fb9f..21ee88c6d3 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ -# Airbnb JavaScript Style Guide() { +# Airbnb JavaScript 스타일 가이드() { -*A mostly reasonable approach to JavaScript* +*자바 스크립트에 대한 가장 합리적인 접근 방식* [![Downloads](https://img.shields.io/npm/dm/eslint-config-airbnb.svg)](https://www.npmjs.com/package/eslint-config-airbnb) [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/airbnb/javascript?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -Other Style Guides +다른 스타일 가이드들 - [ES5](es5/) - [React](react/) - [CSS & Sass](https://github.com/airbnb/css) - [Ruby](https://github.com/airbnb/ruby) -## Table of Contents +## 목차 1. [Types](#types) 1. [References](#references) @@ -52,7 +52,7 @@ Other Style Guides ## Types - - [1.1](#1.1) **Primitives**: When you access a primitive type you work directly on its value. + - [1.1](#1.1) **Primitives**: 원시형(Primitive type)은 그 값을 직접 조작합니다. + `string` + `number` @@ -68,7 +68,7 @@ Other Style Guides console.log(foo, bar); // => 1, 9 ``` - - [1.2](#1.2) **Complex**: When you access a complex type you work on a reference to its value. + - [1.2](#1.2) **Complex**: 참조형(Complex type)은 참조를 통해 값을 조작합니다. + `object` + `array` @@ -87,9 +87,9 @@ Other Style Guides ## References - - [2.1](#2.1) Use `const` for all of your references; avoid using `var`. + - [2.1](#2.1) 모든 참조에는 `const`를 사용하고 `var`를 사용하지 않습니다. - > Why? This ensures that you can't reassign your references, which can lead to bugs and difficult to comprehend code. + > 왜죠? 참조를 다시 할당할 수 없으므로, 버그로 연결되거나 이해하기 어려운 코드가 되는 것을 방지합니다. eslint rules: [`prefer-const`](http://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html). @@ -103,9 +103,9 @@ Other Style Guides const b = 2; ``` - - [2.2](#2.2) If you must reassign references, use `let` instead of `var`. + - [2.2](#2.2) 참조를 다시 할당해야 하는 경우 `var` 대신에 `let`을 사용하세요. - > Why? `let` is block-scoped rather than function-scoped like `var`. + > 왜죠? `var`는 함수-범위(function-scoped)이고 `let`은 블록-범위(block-scoped)이기 때문입니다. eslint rules: [`no-var`](http://eslint.org/docs/rules/no-var.html). @@ -123,10 +123,10 @@ Other Style Guides } ``` - - [2.3](#2.3) Note that both `let` and `const` are block-scoped. + - [2.3](#2.3) `let`과 `const`는 모두 블록-범위(block-scoped)인 것에 주의해야 합니다. ```javascript - // const and let only exist in the blocks they are defined in. + // const와 let은 선언 된 블록 안에서만 존재함. { let a = 1; const b = 1; @@ -139,7 +139,7 @@ Other Style Guides ## Objects - - [3.1](#3.1) Use the literal syntax for object creation. + - [3.1](#3.1) 개체를 만들 때에는 리터럴 구문을 사용합니다. eslint rules: [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html). @@ -151,7 +151,7 @@ Other Style Guides const item = {}; ``` - - [3.2](#3.2) If your code will be executed in browsers in script context, don't use [reserved words](http://es5.github.io/#x7.6.1) as keys. It won't work in IE8. [More info](https://github.com/airbnb/javascript/issues/61). It’s OK to use them in ES6 modules and server-side code. + - [3.2](#3.2) 코드가 브라우저에서 실행되는 경우 [예약어](http://es5.github.io/#x7.6.1)를 키로 사용하지 마세요. 이것은 IE8에서 작동하지 않습니다. [More info](https://github.com/airbnb/javascript/issues/61). ES6 모듈과 서버 사이드에서는 사용할 수 있습니다. ```javascript // bad @@ -167,7 +167,7 @@ Other Style Guides }; ``` - - [3.3](#3.3) Use readable synonyms in place of reserved words. + - [3.3](#3.3) 예약어 대신에 알기 쉬운 동의어(Readable synonyms)를 사용하십세오. ```javascript // bad @@ -187,9 +187,9 @@ Other Style Guides ``` - - [3.4](#3.4) Use computed property names when creating objects with dynamic property names. + - [3.4](#3.4) 동적인 속성 이름을 가진 객체를 만들 때에는 계산된 속성 이름(Computed property names)을 사용하세요. - > Why? They allow you to define all the properties of an object in one place. + > 왜죠? 이렇게하면 객체 속성을 1개의 장소에서 정의 할 수 있습니다. ```javascript @@ -213,7 +213,7 @@ Other Style Guides ``` - - [3.5](#3.5) Use object method shorthand. + - [3.5](#3.5) 메소드에 단축 구문(Shorthand)을 사용하세요. eslint rules: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html). @@ -238,9 +238,9 @@ Other Style Guides ``` - - [3.6](#3.6) Use property value shorthand. + - [3.6](#3.6) 속성에 단축 구문을 사용하세요. - > Why? It is shorter to write and descriptive. + > 왜죠? 표현이나 설명이 간결해지기 때문입니다. eslint rules: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html). @@ -258,9 +258,9 @@ Other Style Guides }; ``` - - [3.7](#3.7) Group your shorthand properties at the beginning of your object declaration. + - [3.7](#3.7) 속성의 단축 구문은 객체 선언의 시작 부분에 무리를 지어줍니다. - > Why? It's easier to tell which properties are using the shorthand. + > 왜죠? 어떤 속성이 단축 구문을 사용하고 있는지를 알기가 쉽기 때문입니다. ```javascript const anakinSkywalker = 'Anakin Skywalker'; @@ -287,9 +287,9 @@ Other Style Guides }; ``` - - [3.8](#3.8) Only quote properties that are invalid identifiers. + - [3.8](#3.8) 이용한 속성에 작은 따옴표를 사용하는 경우는 오직 잘못된 식별자인 경우에만 사용합니다. - > Why? In general we consider it subjectively easier to read. It improves syntax highlighting, and is also more easily optimized by many JS engines. + > 왜죠? 주관적으로 쉽게 읽을 수 있는 것을 항상 고민해야 합니다. 이 것은 구문이 강조되고, 수많은 JS엔진에 쉽게 최적화되어 있습니다. eslint rules: [`quote-props`](http://eslint.org/docs/rules/quote-props.html). @@ -313,7 +313,7 @@ Other Style Guides ## Arrays - - [4.1](#4.1) Use the literal syntax for array creation. + - [4.1](#4.1) 배열을 만들 때 리터럴 구문을 사용하세요. eslint rules: [`no-array-constructor`](http://eslint.org/docs/rules/no-array-constructor.html). @@ -325,7 +325,7 @@ Other Style Guides const items = []; ``` - - [4.2](#4.2) Use Array#push instead of direct assignment to add items to an array. + - [4.2](#4.2) 배열에 항목을 직접 대체하지 말고 Array#push를 사용하세요. ```javascript const someStack = []; @@ -338,7 +338,7 @@ Other Style Guides ``` - - [4.3](#4.3) Use array spreads `...` to copy arrays. + - [4.3](#4.3) 배열을 복사하는 경우, 배열의 확장 연산자인 `...`을 사용하세요. ```javascript // bad @@ -353,7 +353,7 @@ Other Style Guides // good const itemsCopy = [...items]; ``` - - [4.4](#4.4) To convert an array-like object to an array, use Array#from. + - [4.4](#4.4) array-like 객체를 배열로 변환하려면 Array#from을 사용하세요. ```javascript const foo = document.querySelectorAll('.foo'); @@ -364,9 +364,9 @@ Other Style Guides ## Destructuring - - [5.1](#5.1) Use object destructuring when accessing and using multiple properties of an object. + - [5.1](#5.1) 여러 속성에서 객체에 접근할 때 객체 구조화 대입을 사용하세요. - > Why? Destructuring saves you from creating temporary references for those properties. + > 왜죠? 구조화 대입을 이용하여 그 속성에 대한 중간 참조를 줄일 수 있습니다. ```javascript // bad @@ -389,7 +389,7 @@ Other Style Guides } ``` - - [5.2](#5.2) Use array destructuring. + - [5.2](#5.2) 배열의 구조 대입(Destructuring)을 사용하세요. ```javascript const arr = [1, 2, 3, 4]; @@ -402,9 +402,9 @@ Other Style Guides const [first, second] = arr; ``` - - [5.3](#5.3) Use object destructuring for multiple return values, not array destructuring. + - [5.3](#5.3) 여러 값을 반환하는 경우, 배열의 구조 대입이 아니라 객체의 구조 대입을 사용하세요. - > Why? You can add new properties over time or change the order of things without breaking call sites. + > 왜죠? 이렇게하면 나중에 새 속성을 추가하거나 호출에 영향을 주지않고 순서를 변경할 수 있습니다. ```javascript // bad @@ -431,7 +431,7 @@ Other Style Guides ## Strings - - [6.1](#6.1) Use single quotes `''` for strings. + - [6.1](#6.1) 문자열에는 작은 따옴표`''`를 사용하세요. eslint rules: [`quotes`](http://eslint.org/docs/rules/quotes.html). @@ -443,8 +443,8 @@ Other Style Guides const name = 'Capt. Janeway'; ``` - - [6.2](#6.2) Strings that cause the line to go over 100 characters should be written across multiple lines using string concatenation. - - [6.3](#6.3) Note: If overused, long strings with concatenation could impact performance. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). + - [6.2](#6.2) 100자 이상의 문자열은 문자열 연결을 사용하여 여러 행에 걸쳐 기술할 수 있습니다. + - [6.3](#6.3) 주의: 문자열 연결이 많으면 성능에 영향을 줄 수 있습니다. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). ```javascript // bad @@ -463,9 +463,9 @@ Other Style Guides ``` - - [6.4](#6.4) When programmatically building up strings, use template strings instead of concatenation. + - [6.4](#6.4) 프로그램에서 문자열을 생성하는 경우, 문자열 연결이 아니라 template strings을 사용하세요. - > Why? Template strings give you a readable, concise syntax with proper newlines and string interpolation features. + > 왜죠? Template strings 문자열 완성 기능과 다중 문자열 기능을 가진 간결한 구문으로 가독성이 좋아지기 때문입니다. eslint rules: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html). @@ -485,16 +485,16 @@ Other Style Guides return `How are you, ${name}?`; } ``` - - [6.5](#6.5) Never use `eval()` on a string, it opens too many vulnerabilities. + - [6.5](#6.5) 절대로 `eval()`을 사용하지 않습니다. 이것은 지금까지 수많은 취약점을 만들어 왔기 때문입니다. **[⬆ back to top](#table-of-contents)** ## Functions - - [7.1](#7.1) Use function declarations instead of function expressions. + - [7.1](#7.1) 함수 선언 대신에 함수 표현식을 사용합니다. - > Why? Function declarations are named, so they're easier to identify in call stacks. Also, the whole body of a function declaration is hoisted, whereas only the reference of a function expression is hoisted. This rule makes it possible to always use [Arrow Functions](#arrow-functions) in place of function expressions. + > 왜죠? 이름이 붙은 함수 선언은 콜스택에서 쉽게 알수 있습니다. 또한 함수 선언의 몸 전체가 Hoist됩니다. 반면 함수는 참조만 Hoist됩니다. 이 규칙은 함수 부분을 항상 [Arrow Functions](#arrow-functions)로 대체 사용할 수 있습니다. ```javascript // bad @@ -506,7 +506,7 @@ Other Style Guides } ``` - - [7.2](#7.2) Function expressions: + - [7.2](#7.2) 함수식(Function expressions): ```javascript // immediately-invoked function expression (IIFE) @@ -515,9 +515,9 @@ Other Style Guides })(); ``` - - [7.3](#7.3) Never declare a function in a non-function block (if, while, etc). Assign the function to a variable instead. Browsers will allow you to do it, but they all interpret it differently, which is bad news bears. + - [7.3](#7.3) 함수 이외의 블록 (if 나 while 등)에 함수를 선언하지 마세오. 브라우저는 변수에 함수를 할당하는 것을 처리할 수는 있지만, 모두 다르게 해석됩니다. - - [7.4](#7.4) **Note:** ECMA-262 defines a `block` as a list of statements. A function declaration is not a statement. [Read ECMA-262's note on this issue](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). + - [7.4](#7.4) **주의:** ECMA-262에서 `block`은 statements 목록에 정의되지만, 함수 선언은 statements가 없습니다. [이 문제는 ECMA-262의 설명을 참조하세요](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). ```javascript // bad @@ -536,7 +536,7 @@ Other Style Guides } ``` - - [7.5](#7.5) Never name a parameter `arguments`. This will take precedence over the `arguments` object that is given to every function scope. + - [7.5](#7.5) 매개변수(parameter)에 `arguments`를 절대 지정하지 않습니다. 이것은 함수 Scope로 전달 될 `arguments`객체의 참조를 덮어 써버릴 것입니다. ```javascript // bad @@ -551,9 +551,9 @@ Other Style Guides ``` - - [7.6](#7.6) Never use `arguments`, opt to use rest syntax `...` instead. + - [7.6](#7.6) `arguments`를 사용하지 않습니다. 대신 rest syntax인 `...`을 사용하세요. - > Why? `...` is explicit about which arguments you want pulled. Plus rest arguments are a real Array and not Array-like like `arguments`. + > 왜죠? `...` 를 이용하여 여러가지 매개변수를 모두 사용할 수 있습니다. 추가로 rest 매개변수인 `arguments`는 Array-like 객체가 아니라 진정한 Array입니다. ```javascript // bad @@ -569,7 +569,7 @@ Other Style Guides ``` - - [7.7](#7.7) Use default parameter syntax rather than mutating function arguments. + - [7.7](#7.7) 함수의 매개변수를 조작하지 말고 기본 매개변수를 사용하세요. ```javascript // really bad @@ -595,9 +595,9 @@ Other Style Guides } ``` - - [7.8](#7.8) Avoid side effects with default parameters. + - [7.8](#7.8) 부작용이 있는 기본 매개변수를 사용하지 않습니다. - > Why? They are confusing to reason about. + > 왜죠? 혼란스럽기 때문입니다. ```javascript var b = 1; @@ -611,7 +611,7 @@ Other Style Guides count(); // 3 ``` - - [7.9](#7.9) Always put default parameters last. + - [7.9](#7.9) 항상 기본 매개변수는 앞쪽에 배치하세요. ```javascript // bad @@ -625,9 +625,9 @@ Other Style Guides } ``` - - [7.10](#7.10) Never use the Function constructor to create a new function. + - [7.10](#7.10) 새로운 함수를 만드는 데 Function 생성자를 사용하지 않습니다. - > Why? Creating a function in this way evaluates a string similarly to eval(), which opens vulnerabilities. + > 왜죠? 이 방법은 문자열을 구분하는 새로운 함수를 만들 수 있는 eval()과 같은 취약점이 발생할 수 있습니다. ```javascript // bad @@ -637,9 +637,9 @@ Other Style Guides var subtract = Function('a', 'b', 'return a - b'); ``` - - [7.11](#7.11) Spacing in a function signature. + - [7.11](#7.11) 함수에 사용되는 공백 - > Why? Consistency is good, and you shouldn’t have to add or remove a space when adding or removing a name. + > 왜죠? 일관성이 좋고, 함수이름을 추가 하거나 삭제할 때 공백을 제거할 필요가 없습니다. ```javascript // bad @@ -652,9 +652,9 @@ Other Style Guides const y = function a() {}; ``` - - [7.12](#7.12) Never mutate parameters. + - [7.12](#7.12) 절대로 매개변수를 조작하지 않습니다. - > Why? Manipulating objects passed in as parameters can cause unwanted variable side effects in the original caller. + > 왜죠? 매개변수로 전달 된 객체를 조작하는 것은 원래의 호출에 원치 않는 변수 부작용을 일으킬 수 있습니다. eslint rules: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html). @@ -670,9 +670,9 @@ Other Style Guides }; ``` - - [7.13](#7.13) Never reassign parameters. + - [7.13](#7.13) 절대로 매개변수를 다시 지정하지 않습니다. - > Why? Reassigning parameters can lead to unexpected behavior, especially when accessing the `arguments` object. It can also cause optimization issues, especially in V8. + > 왜죠? `arguments` 객체에 접근하는 경우 다시 지정된 매개변수는 예기치 않은 동작이 발생할 수 있습니다. 그리고 특히 V8 최적화에 문제가 발생할 수 있습니다. eslint rules: [`no-param-reassign`](http://eslint.org/docs/rules/no-param-reassign.html). @@ -699,11 +699,11 @@ Other Style Guides ## Arrow Functions - - [8.1](#8.1) When you must use function expressions (as when passing an anonymous function), use arrow function notation. + - [8.1](#8.1) (익명 함수 통과와 같은) 함수를 이용하는 경우, Arrow 함수를 사용하세요. - > Why? It creates a version of the function that executes in the context of `this`, which is usually what you want, and is a more concise syntax. + > 왜죠? 애로우 함수는 함수가 실행되는 컨텍스트의 `this`를 속박합니다. 이것은 일반적으로 예상대로 작동하고 구문이 더 간결합니다. - > Why not? If you have a fairly complicated function, you might move that logic out into its own function declaration. + > 언제 쓰죠? 복잡한 함수 논리를 정의한 함수의 바깥쪽으로 이동하고 싶은 경우. eslint rules: [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html). @@ -721,11 +721,11 @@ Other Style Guides }); ``` - - [8.2](#8.2) If the function body consists of a single expression, omit the braces and use the implicit return. Otherwise, keep the braces and use a `return` statement. + - [8.2](#8.2) 함수의 본체가 하나의 식으로 구성되어있는 경우 중괄호를 생략하고 암묵적 return을 사용할 수 있습니다. 그렇지 않으면 `return` 문을 사용해야 합니다. - > Why? Syntactic sugar. It reads well when multiple functions are chained together. + > 왜죠? 가독성이 좋아지기 때문입니다. 여러 함수가 연결되는 경우에 쉽게 읽을 수 있습니다. - > Why not? If you plan on returning an object. + > 언제 쓰죠? 객체를 반환하는 경우. eslint rules: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html), [`arrow-body-style`](http://eslint.org/docs/rules/arrow-body-style.html). @@ -746,9 +746,9 @@ Other Style Guides }); ``` - - [8.3](#8.3) In case the expression spans over multiple lines, wrap it in parentheses for better readability. + - [8.3](#8.3) 식의 길이가 여러 행에 걸치는 경우 가독성을 향상시키기 위해 괄호 안에 써주세요. - > Why? It shows clearly where the function starts and ends. + > 왜죠? 함수의 시작과 끝 부분을 알아보기 쉽게 합니다. ```js // bad @@ -765,9 +765,9 @@ Other Style Guides ``` - - [8.4](#8.4) If your function takes a single argument and doesn’t use braces, omit the parentheses. Otherwise, always include parentheses around arguments. + - [8.4](#8.4) 함수의 인수가 1개인 경우 괄호를 생략할 수 있습니다. - > Why? Less visual clutter. + > 왜죠? 시각적 혼란이 덜하기 때문입니다. eslint rules: [`arrow-parens`](http://eslint.org/docs/rules/arrow-parens.html). @@ -802,9 +802,9 @@ Other Style Guides ## Constructors - - [9.1](#9.1) Always use `class`. Avoid manipulating `prototype` directly. + - [9.1](#9.1) `prototype`의 직접 조작을 피하고 항상 `class`를 사용하세요. - > Why? `class` syntax is more concise and easier to reason about. + > 왜죠? `class` 구문은 간결하고 의도를 알아내기가 쉽기 때문입니다. ```javascript // bad @@ -831,9 +831,9 @@ Other Style Guides } ``` - - [9.2](#9.2) Use `extends` for inheritance. + - [9.2](#9.2) 상속은 `extends`를 사용하세요. - > Why? It is a built-in way to inherit prototype functionality without breaking `instanceof`. + > 왜죠? 프로토타입을 상속하기 위해 내장된 방식으로 `instanceof` 를 파괴할 수 없기 때문입니다. ```javascript // bad @@ -854,7 +854,7 @@ Other Style Guides } ``` - - [9.3](#9.3) Methods can return `this` to help with method chaining. + - [9.3](#9.3) 메소드의 반환 값에 `this`를 돌려주는 것으로, 메소드 체인을 할 수 있습니다. ```javascript // bad @@ -891,7 +891,7 @@ Other Style Guides ``` - - [9.4](#9.4) It's okay to write a custom toString() method, just make sure it works successfully and causes no side effects. + - [9.4](#9.4) 사용자화 된 toString() 메소드를 쓰는 것도 좋습니다. 단, 제대로 작동하는지, 부작용이 없는 지를 꼭 확인하세요. ```javascript class Jedi { @@ -914,9 +914,9 @@ Other Style Guides ## Modules - - [10.1](#10.1) Always use modules (`import`/`export`) over a non-standard module system. You can always transpile to your preferred module system. + - [10.1](#10.1) 비표준 모듈 시스템이 아니라면 항상 (`import`/`export`) 를 사용하세요. 이렇게 함으로써 원하는 모듈 시스템에 언제든지 transpile 할 수 있습니다. - > Why? Modules are the future, let's start using the future now. + > 왜죠? 모듈은 곧 미래입니다. 미래를 선점하고 사용합시다. ```javascript // bad @@ -932,9 +932,9 @@ Other Style Guides export default es6; ``` - - [10.2](#10.2) Do not use wildcard imports. + - [10.2](#10.2) 와일드카드를 이용한 가져오기는 사용하지 않습니다. - > Why? This makes sure you have a single default export. + > 왜죠? single default export인 것에 주의할 필요가 있기 때문입니다. ```javascript // bad @@ -944,9 +944,9 @@ Other Style Guides import AirbnbStyleGuide from './AirbnbStyleGuide'; ``` - - [10.3](#10.3) And do not export directly from an import. + - [10.3](#10.3) import 문에서 직접 export하지 않습니다. - > Why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent. + > 왜죠? 한개의 라인이라 간결하기는 하지만, import와 export하는 방법을 명확하게 함으로써 일관성을 유지할 수 있습니다. ```javascript // bad @@ -963,9 +963,9 @@ Other Style Guides ## Iterators and Generators - - [11.1](#11.1) Don't use iterators. Prefer JavaScript's higher-order functions like `map()` and `reduce()` instead of loops like `for-of`. + - [11.1](#11.1) iterators를 사용하지 않습니다. `for-of` 루프 대신 `map()`과 `reduce()`같은 Javascript의 고급 함수(higher-order functions)을 사용하세요. - > Why? This enforces our immutable rule. Dealing with pure functions that return values is easier to reason about than side-effects. + > 왜죠? 이것은 immutable(불변)의 규칙을 적용합니다. 값을 반환하는 함수를 처리하는 것이 부작용을 추측하기가 더 쉽습니다. eslint rules: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html). @@ -990,16 +990,16 @@ Other Style Guides sum === 15; ``` - - [11.2](#11.2) Don't use generators for now. + - [11.2](#11.2) 현재 generators는 사용하지 않습니다. - > Why? They don't transpile well to ES5. + > 왜죠? ES5의 transpile이 잘 작동하지 않습니다. **[⬆ back to top](#table-of-contents)** ## Properties - - [12.1](#12.1) Use dot notation when accessing properties. + - [12.1](#12.1) 속성에 접근하려면 점을 사용하세요. eslint rules: [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html). @@ -1016,7 +1016,7 @@ Other Style Guides const isJedi = luke.jedi; ``` - - [12.2](#12.2) Use subscript notation `[]` when accessing properties with a variable. + - [12.2](#12.2) 변수를 사용하여 속성에 접근하려면 대괄호`[]`를 사용하세요. ```javascript const luke = { @@ -1036,7 +1036,7 @@ Other Style Guides ## Variables - - [13.1](#13.1) Always use `const` to declare variables. Not doing so will result in global variables. We want to avoid polluting the global namespace. Captain Planet warned us of that. + - [13.1](#13.1) 변수를 선언 할 때는 항상 `const`를 사용하세요. 그렇지 않을 경우 전역 변수로 선언됩니다. 글로벌 네임 스페이스가 오염되지 않도록 캡틴 플래닛(역자주: 환경보호와 생태를 테마로 한 슈퍼히어로 애니메이션)도 경고하고 있습니다. ```javascript // bad @@ -1046,9 +1046,9 @@ Other Style Guides const superPower = new SuperPower(); ``` - - [13.2](#13.2) Use one `const` declaration per variable. + - [13.2](#13.2) 하나의 변수 선언에 대해 하나의 `const`를 사용하세요. - > Why? It's easier to add new variable declarations this way, and you never have to worry about swapping out a `;` for a `,` or introducing punctuation-only diffs. + > 왜죠? 이 방법은 새로운 변수를 쉽게 추가할 수 있습니다. 또한 구분 기호의 차이에 의한 `;`를 `,`로 다시금 대체하는 작업에 대해 신경쓸 필요가 없습니다. eslint rules: [`one-var`](http://eslint.org/docs/rules/one-var.html). @@ -1070,9 +1070,9 @@ Other Style Guides const dragonball = 'z'; ``` - - [13.3](#13.3) Group all your `const`s and then group all your `let`s. + - [13.3](#13.3) 먼저 `const`를 그룹화하고 그다음으로 `let`을 그룹화 하세오. - > Why? This is helpful when later on you might need to assign a variable depending on one of the previous assigned variables. + > 왜죠? 이전에 할당 된 변수에 따라 나중에 새로운 변수를 추가하는 경우에 유용하기 때문입니다. ```javascript // bad @@ -1095,9 +1095,9 @@ Other Style Guides let length; ``` - - [13.4](#13.4) Assign variables where you need them, but place them in a reasonable place. + - [13.4](#13.4) 변수를 할당할 때는 필요하고 합리적인 장소에 넣습니다. - > Why? `let` and `const` are block scoped and not function scoped. + > 왜죠? `let`과 `const`는 함수 Scope에는 없는 블록 Scope이기 때문입니다. ```javascript // good @@ -1147,34 +1147,32 @@ Other Style Guides ## Hoisting - - [14.1](#14.1) `var` declarations get hoisted to the top of their scope, their assignment does not. `const` and `let` declarations are blessed with a new concept called [Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let). It's important to know why [typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15). + - [14.1](#14.1) `var` 선언은 할당이 없는 상태로 범위(Scope)의 위로 Hoist될 수 있습니다. 하지만 `const`와 `let` 선언은 시간적 데드 존([Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let))이라는 새로운 개념의 혜택을 받고 있습니다. 이것은 왜 typeof가 안전하지 않은가([typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15))를 알고있는 것이 중요합니다. ```javascript - // we know this wouldn't work (assuming there - // is no notDefined global variable) + // (notDefined가 글로벌 변수에 존재하지 않는다고 가정했을 경우) + // 이것은 잘 작동하지 않습니다. function example() { console.log(notDefined); // => throws a ReferenceError } - // creating a variable declaration after you - // reference the variable will work due to - // variable hoisting. Note: the assignment - // value of `true` is not hoisted. + // 변수를 참조하는 코드 후에 그 변수를 선언한 경우 + // 변수가 Hoist되어서 작동합니다. + // 주의: `true` 값 자체는 Hoist할 수 없습니다. function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } - // The interpreter is hoisting the variable - // declaration to the top of the scope, - // which means our example could be rewritten as: + // 인터프린터는 변수 선언을 Scope의 시작 부분에 Hoist합니다. + // 위의 예는 다음과 같이 다시 작성할 수 있습니다: function example() { let declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; } - // using const and let + // const와 let을 사용하는 경우 function example() { console.log(declaredButNotAssigned); // => throws a ReferenceError console.log(typeof declaredButNotAssigned); // => throws a ReferenceError @@ -1182,7 +1180,7 @@ Other Style Guides } ``` - - [14.2](#14.2) Anonymous function expressions hoist their variable name, but not the function assignment. + - [14.2](#14.2) 익명 함수 표현식에서는 함수가 할당되기 전에 변수가 Hoist될 수 있습니다. ```javascript function example() { @@ -1196,7 +1194,7 @@ Other Style Guides } ``` - - [14.3](#14.3) Named function expressions hoist the variable name, not the function name or the function body. + - [14.3](#14.3) 명명된 함수의 경우도 마찬가지로 변수가 Hoist될 수 있습니다. 함수이름과 함수본문는 Hoist되지 않습니다. ```javascript function example() { @@ -1211,8 +1209,7 @@ Other Style Guides }; } - // the same is true when the function name - // is the same as the variable name. + // 함수이름과 변수이름이 같은 경우에도 같은 일이 일어납니다. function example() { console.log(named); // => undefined @@ -1224,7 +1221,7 @@ Other Style Guides } ``` - - [14.4](#14.4) Function declarations hoist their name and the function body. + - [14.4](#14.4) 함수 선언은 함수이름과 함수본문이 Hoist됩니다. ```javascript function example() { @@ -1236,34 +1233,34 @@ Other Style Guides } ``` - - For more information refer to [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/) by [Ben Cherry](http://www.adequatelygood.com/). + - 더 자세한 정보는 [Ben Cherry](http://www.adequatelygood.com/)의 [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/)을 참조하세요. **[⬆ back to top](#table-of-contents)** ## Comparison Operators & Equality - - [15.1](#15.1) Use `===` and `!==` over `==` and `!=`. + - [15.1](#15.1) `==`와 `!=` 보다는 `===`와 `!==`를 사용하세요. - - [15.2](#15.2) Conditional statements such as the `if` statement evaluate their expression using coercion with the `ToBoolean` abstract method and always follow these simple rules: + - [15.2](#15.2) `if`와 같은 조건문은 `ToBoolean`방법에 의한 강제 형 변환으로 구분되고 항상 다음과 같은 간단한 규칙을 따릅니다: eslint rules: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html). - + **Objects** evaluate to **true** - + **Undefined** evaluates to **false** - + **Null** evaluates to **false** - + **Booleans** evaluate to **the value of the boolean** - + **Numbers** evaluate to **false** if **+0, -0, or NaN**, otherwise **true** - + **Strings** evaluate to **false** if an empty string `''`, otherwise **true** + + **Objects**는 **true**로 구분됩니다. + + **Undefined**는 **false**로 구분됩니다. + + **Null**은 **false**로 구분됩니다. + + **Booleans**은 **boolean형의 값**으로 구분됩니다. + + **Numbers**는 **true**로 구분됩니다. 그러나, **+0, -0, 또는 NaN**인 경우 **false**로 구분됩니다. + + **Strings**는 **true**로 구분됩니다. 그러나, 비어있는 `''`경우는 **false**로 구분됩니다. ```javascript if ([0]) { // true - // An array is an object, objects evaluate to true + // 배열은 객체이므로 true로 구분됩니다. } ``` - - [15.3](#15.3) Use shortcuts. + - [15.3](#15.3) 손쉬운 방법을 사용하세요. ```javascript // bad @@ -1287,14 +1284,14 @@ Other Style Guides } ``` - - [15.4](#15.4) For more information see [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. + - [15.4](#15.4) 더 자세한 내용은 여기를 참조하세요. [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. **[⬆ back to top](#table-of-contents)** ## Blocks - - [16.1](#16.1) Use braces with all multi-line blocks. + - [16.1](#16.1) 여러 줄의 블록은 중괄호를 사용합니다. ```javascript // bad @@ -1318,8 +1315,7 @@ Other Style Guides } ``` - - [16.2](#16.2) If you're using multi-line blocks with `if` and `else`, put `else` on the same line as your - `if` block's closing brace. + - [16.2](#16.2) 여러 블록에 걸친 `if`와 `else`를 사용하는 경우, `else`는 `if`블록의 끝 중괄호와 같은 행에 두세요. eslint rules: [`brace-style`](http://eslint.org/docs/rules/brace-style.html). @@ -1348,7 +1344,7 @@ Other Style Guides ## Comments - - [17.1](#17.1) Use `/** ... */` for multi-line comments. Include a description, specify types and values for all parameters and return values. + - [17.1](#17.1) 여러 줄의 주석에는 `/** ... */`를 사용하세요. 그 안에는 설명과 모든 매개변수와 반환 값에 대한 형식과 값을 표기합니다. ```javascript // bad @@ -1380,7 +1376,7 @@ Other Style Guides } ``` - - [17.2](#17.2) Use `//` for single line comments. Place single line comments on a newline above the subject of the comment. Put an empty line before the comment unless it's on the first line of a block. + - [17.2](#17.2) 한 줄 주석에는 `//`를 사용하세요. 주석을 추가하싶은 코드의 상단에 배치하세요. 또한 주석 앞에 빈 줄을 넣어주세요. ```javascript // bad @@ -1418,9 +1414,9 @@ Other Style Guides } ``` - - [17.3](#17.3) Prefixing your comments with `FIXME` or `TODO` helps other developers quickly understand if you're pointing out a problem that needs to be revisited, or if you're suggesting a solution to the problem that needs to be implemented. These are different than regular comments because they are actionable. The actions are `FIXME -- need to figure this out` or `TODO -- need to implement`. + - [17.3](#17.3) 문제를 지적하고 재고를 촉구하거나 문제의 해결책을 제시하는 경우 등, 주석 앞에 `FIXME` 또는 `TODO` 를 붙이는 것으로 다른 개발자의 빠른 이해를 도울 수 있습니다. 이들은 어떠한 액션을 따른다는 의미에서 일반 댓글과 다를 수 있습니다. 액션은 `FIXME -- 해결책 필요` 또는 `TODO -- 구현 필요`. - - [17.4](#17.4) Use `// FIXME:` to annotate problems. + - [17.4](#17.4) 문제에 대한 주석으로 `// FIXME:`를 사용하세요. ```javascript class Calculator extends Abacus { @@ -1433,7 +1429,7 @@ Other Style Guides } ``` - - [17.5](#17.5) Use `// TODO:` to annotate solutions to problems. + - [17.5](#17.5) 해결책에 대한 주석으로 `// TODO:`를 사용하세요. ```javascript class Calculator extends Abacus { @@ -1451,7 +1447,7 @@ Other Style Guides ## Whitespace - - [18.1](#18.1) Use soft tabs set to 2 spaces. + - [18.1](#18.1) 탭에 공백 2개를 설정하세요. eslint rules: [`indent`](http://eslint.org/docs/rules/indent.html). @@ -1472,7 +1468,7 @@ Other Style Guides } ``` - - [18.2](#18.2) Place 1 space before the leading brace. + - [18.2](#18.2) 중괄호 앞에 공백을 넣어주세요. eslint rules: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html). @@ -1500,7 +1496,7 @@ Other Style Guides }); ``` - - [18.3](#18.3) Place 1 space before the opening parenthesis in control statements (`if`, `while` etc.). Place no space between the argument list and the function name in function calls and declarations. + - [18.3](#18.3) 제어 구문(`if`, `while` 등)의 괄호 앞에 공백을 넣어주세요. 함수 선언과 함수 호출시 인수 목록 앞에는 공백을 넣지 않습니다. eslint rules: [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html). @@ -1526,7 +1522,7 @@ Other Style Guides } ``` - - [18.4](#18.4) Set off operators with spaces. + - [18.4](#18.4) 연산자 사이에는 공백이 있습니다. eslint rules: [`space-infix-ops`](http://eslint.org/docs/rules/space-infix-ops.html). @@ -1538,7 +1534,7 @@ Other Style Guides const x = y + 5; ``` - - [18.5](#18.5) End files with a single newline character. + - [18.5](#18.5) 파일의 마지막에 빈 줄을 하나 넣어주세요. ```javascript // bad @@ -1562,8 +1558,7 @@ Other Style Guides })(this);↵ ``` - - [18.6](#18.6) Use indentation when making long method chains. Use a leading dot, which - emphasizes that the line is a method call, not a new statement. + - [18.6](#18.6) 메소드 체인이 길어지는 경우 적절히 들여쓰기(indentation) 하세요. 행이 메소드 호출이 아닌 새로운 문장임을 강조하기 위해 선두에 점을 배치하세요. ```javascript // bad @@ -1602,7 +1597,7 @@ Other Style Guides .call(tron.led); ``` - - [18.7](#18.7) Leave a blank line after blocks and before the next statement. + - [18.7](#18.7) 블록과 다음 Statement 사이에 빈 줄을 넣어주세요. ```javascript // bad @@ -1659,7 +1654,7 @@ Other Style Guides return arr; ``` - - [18.8](#18.8) Do not pad your blocks with blank lines. + - [18.8](#18.8) 블록에 빈 줄을 끼워넣지 않습니다. eslint rules: [`padded-blocks`](http://eslint.org/docs/rules/padded-blocks.html). @@ -1693,7 +1688,7 @@ Other Style Guides } ``` - - [18.9](#18.9) Do not add spaces inside parentheses. + - [18.9](#18.9) 괄호 안에 공백을 추가하지 않습니다. eslint rules: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html). @@ -1719,7 +1714,7 @@ Other Style Guides } ``` - - [18.10](#18.10) Do not add spaces inside brackets. + - [18.10](#18.10) 대괄호 안에 공백을 추가하지 않습니다. eslint rules: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html). @@ -1733,7 +1728,7 @@ Other Style Guides console.log(foo[0]); ``` - - [18.11](#18.11) Add spaces inside curly braces. + - [18.11](#18.11) 중괄호 안에 공백을 추가하지 않습니다. eslint rules: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html). @@ -1745,9 +1740,9 @@ Other Style Guides const foo = { clark: 'kent' }; ``` - - [18.12](#18.12) Avoid having lines of code that are longer than 100 characters (including whitespace). + - [18.12](#18.12) 한 줄에 100문자(공백 포함)가 넘는 코드는 피하세요. - > Why? This ensures readability and maintainability. + > 왜죠? 가독성과 유지 보수성을 보장합니다. eslint rules: [`max-len`](http://eslint.org/docs/rules/max-len.html). @@ -1776,7 +1771,7 @@ Other Style Guides ## Commas - - [19.1](#19.1) Leading commas: **Nope.** + - [19.1](#19.1) 쉼표로 시작: **제발 그만하세요.** eslint rules: [`comma-style`](http://eslint.org/docs/rules/comma-style.html). @@ -1812,11 +1807,11 @@ Other Style Guides }; ``` - - [19.2](#19.2) Additional trailing comma: **Yup.** + - [19.2](#19.2) 마지막에 쉼표: **좋습니다.** eslint rules: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html). - > Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the [trailing comma problem](es5/README.md#commas) in legacy browsers. + > 왜죠? 이것은 깨끗한 git의 차이로 이어집니다. 또한 Babel관 같은 트랜스 컴파일러는 끝에 불필요한 쉼표를 알아서 제거합니다. 이것은 기존 브라우저에서 [불필요한 쉼표 문제](es5/README.md#commas)를 걱정할 필요가 없다는 것을 의미합니다. ```javascript // bad - git diff without trailing comma @@ -1862,7 +1857,7 @@ Other Style Guides ## Semicolons - - [20.1](#20.1) **Yup.** + - [20.1](#20.1) **물론 사용합시다.** eslint rules: [`semi`](http://eslint.org/docs/rules/semi.html). @@ -1893,8 +1888,8 @@ Other Style Guides ## Type Casting & Coercion - - [21.1](#21.1) Perform type coercion at the beginning of the statement. - - [21.2](#21.2) Strings: + - [21.1](#21.1) 문장의 시작 부분에서 형을 강제합니다. + - [21.2](#21.2) String: ```javascript // => this.reviewScore = 9; @@ -1906,7 +1901,7 @@ Other Style Guides const totalScore = String(this.reviewScore); ``` - - [21.3](#21.3) Numbers: Use `Number` for type casting and `parseInt` always with a radix for parsing strings. + - [21.3](#21.3) Number: `Number`로 형 변환하려면 `parseInt`를 사용하세요. 항상 형변환을 위한 기수(radix)를 인수로 전달합니다. eslint rules: [`radix`](http://eslint.org/docs/rules/radix). @@ -1932,19 +1927,19 @@ Other Style Guides const val = parseInt(inputValue, 10); ``` - - [21.4](#21.4) If for whatever reason you are doing something wild and `parseInt` is your bottleneck and need to use Bitshift for [performance reasons](http://jsperf.com/coercion-vs-casting/3), leave a comment explaining why and what you're doing. + - [21.4](#21.4) 어떤 이유로 `parseInt`가 병목이되고, [성능적인 이유](http://jsperf.com/coercion-vs-casting/3)에서 Bitshift를 사용해야 하는 경우, 무엇을(what) 왜(why)에 대한 설명을 댓글로 남겨 주세요. ```javascript // good /** - * parseInt was the reason my code was slow. - * Bitshifting the String to coerce it to a - * Number made it a lot faster. + * parseInt가 병목이되고 있었기 때문에, + * Bitshift 문자열을 수치로 강제로 변환하여 + * 성능을 향상시킵니다. */ const val = inputValue >> 0; ``` - - [21.5](#21.5) **Note:** Be careful when using bitshift operations. Numbers are represented as [64-bit values](http://es5.github.io/#x4.3.19), but Bitshift operations always return a 32-bit integer ([source](http://es5.github.io/#x11.7)). Bitshift can lead to unexpected behavior for integer values larger than 32 bits. [Discussion](https://github.com/airbnb/javascript/issues/109). Largest signed 32-bit Int is 2,147,483,647: + - [21.5](#21.5) **주의:** Bitshift를 사용하는 경우 수치는 [64-비트 값들](http://es5.github.io/#x4.3.19)로 표현되어 있지만, Bitshift를 연산하면 항상 32-비트 단 정밀도로 돌려 주어집니다([source](http://es5.github.io/#x11.7)). 32-비트 이상의 값을 비트 이동하면 예상치 못한 행동을 일으킬 가능성이 있습니다. [Discussion](https://github.com/airbnb/javascript/issues/109). 부호있는 32-비트 정수의 최대 값은 2,147,483,647입니다: ```javascript 2147483647 >> 0 //=> 2147483647 @@ -1972,7 +1967,7 @@ Other Style Guides ## Naming Conventions - - [22.1](#22.1) Avoid single letter names. Be descriptive with your naming. + - [22.1](#22.1) 하나의 문자로 구성된 이름은 피하세요. 이름에서 의도를 읽을 수 있도록 해야 합니다. ```javascript // bad @@ -1986,7 +1981,7 @@ Other Style Guides } ``` - - [22.2](#22.2) Use camelCase when naming objects, functions, and instances. + - [22.2](#22.2) 객체, 함수 인스턴스에는 camelCase(소문자로 시작)를 사용하세요. eslint rules: [`camelcase`](http://eslint.org/docs/rules/camelcase.html). @@ -2001,7 +1996,7 @@ Other Style Guides function thisIsMyFunction() {} ``` - - [22.3](#22.3) Use PascalCase when naming constructors or classes. + - [22.3](#22.3) 클래스와 생성자는 PascalCase(대문자로 시작)를 사용하세요. ```javascript // bad @@ -2025,7 +2020,7 @@ Other Style Guides }); ``` - - [22.4](#22.4) Use a leading underscore `_` when naming private properties. + - [22.4](#22.4) Private 속성 이름은 앞에 밑줄`_`을 사용하세요. eslint rules: [`no-underscore-dangle`](http://eslint.org/docs/rules/no-underscore-dangle.html). @@ -2038,7 +2033,7 @@ Other Style Guides this._firstName = 'Panda'; ``` - - [22.5](#22.5) Don't save references to `this`. Use arrow functions or Function#bind. + - [22.5](#22.5) `this`에 대한 참조를 저장하지 않습니다. Arrow 함수 또는 Function#bind를 사용하세요. ```javascript // bad @@ -2065,7 +2060,7 @@ Other Style Guides } ``` - - [22.6](#22.6) If your file exports a single class, your filename should be exactly the name of the class. + - [22.6](#22.6) 파일을 하나의 클래스로 export 할 경우 파일 이름은 클래스 이름과 정확하게 일치해야 합니다. ```javascript // file contents @@ -2085,7 +2080,7 @@ Other Style Guides import CheckBox from './CheckBox'; ``` - - [22.7](#22.7) Use camelCase when you export-default a function. Your filename should be identical to your function's name. + - [22.7](#22.7) export-default 함수의 경우, camelCase(소문자로 시작)를 사용하세요. 파일이름은 함수이름과 동일해야 합니다. ```javascript function makeStyleGuide() { @@ -2094,7 +2089,7 @@ Other Style Guides export default makeStyleGuide; ``` - - [22.8](#22.8) Use PascalCase when you export a singleton / function library / bare object. + - [22.8](#22.8) 싱글톤(singleton) / function library / 단순한 객체(bare object)를 export하는 경우, PascalCase(대문자로 시작)를 사용하세요. ```javascript const AirbnbStyleGuide = { @@ -2111,8 +2106,8 @@ Other Style Guides ## Accessors - - [23.1](#23.1) Accessor functions for properties are not required. - - [23.2](#23.2) If you do make accessor functions use getVal() and setVal('hello'). + - [23.1](#23.1) 속성에 대한 접근자(Accessor) 함수는 필요하지 않습니다. + - [23.2](#23.2) 접근자 함수가 필요한 경우 `getVal()`과 `setVal('hello')`로 하세요. ```javascript // bad @@ -2128,7 +2123,7 @@ Other Style Guides dragon.setAge(25); ``` - - [23.3](#23.3) If the property is a `boolean`, use `isVal()` or `hasVal()`. + - [23.3](#23.3) 속성이 `boolean`의 경우 `isVal()` 또는 `hasVal()`로 하세요. ```javascript // bad @@ -2142,7 +2137,7 @@ Other Style Guides } ``` - - [23.4](#23.4) It's okay to create get() and set() functions, but be consistent. + - [23.4](#23.4) 일관된 것이라면, `get()`과 `set()` 함수를 만들수 있습니다. ```javascript class Jedi { @@ -2166,7 +2161,7 @@ Other Style Guides ## Events - - [24.1](#24.1) When attaching data payloads to events (whether DOM events or something more proprietary like Backbone events), pass a hash instead of a raw value. This allows a subsequent contributor to add more data to the event payload without finding and updating every handler for the event. For example, instead of: + - [24.1](#24.1) (DOM 이벤트, Backbone 이벤트)처럼 자신의 이벤트 페이로드 값을 전달하려면 원시값 대신 해시인수를 전달합니다. 이렇게 하면 나중에 개발자가 이벤트에 관련된 모든 핸들러를 찾아 업데이트하지 않고 이벤트 페이로드에 값을 추가할 수 있습니다. 예를 들면: ```javascript // bad @@ -2179,7 +2174,7 @@ Other Style Guides }); ``` - prefer: + 이쪽이 더 선호됨: ```javascript // good @@ -2197,7 +2192,7 @@ Other Style Guides ## jQuery - - [25.1](#25.1) Prefix jQuery object variables with a `$`. + - [25.1](#25.1) jQuery 개체 변수 앞에 `$`를 부여합니다. ```javascript // bad @@ -2210,7 +2205,7 @@ Other Style Guides const $sidebarBtn = $('.sidebar-btn'); ``` - - [25.2](#25.2) Cache jQuery lookups. + - [25.2](#25.2) jQuery의 검색 결과를 캐시합니다. ```javascript // bad @@ -2237,8 +2232,8 @@ Other Style Guides } ``` - - [25.3](#25.3) For DOM queries use Cascading `$('.sidebar ul')` or parent > child `$('.sidebar > ul')`. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) - - [25.4](#25.4) Use `find` with scoped jQuery object queries. + - [25.3](#25.3) DOM의 검색에는 `$('.sidebar ul')` 또는 `$('.sidebar > ul')`과 같은 Cascading을 사용하세요. [jsPerf](http://jsperf.com/jquery-find-vs-context-sel/16) + - [25.4](#25.4) jQuery 객체의 검색에는 범위가있는 `find` 를 사용하세요. ```javascript // bad @@ -2262,13 +2257,13 @@ Other Style Guides ## ECMAScript 5 Compatibility - - [26.1](#26.1) Refer to [Kangax](https://twitter.com/kangax/)'s ES5 [compatibility table](http://kangax.github.io/es5-compat-table/). + - [26.1](#26.1) [Kangax](https://twitter.com/kangax/)의 ES5 [호환성 표](http://kangax.github.io/es5-compat-table/)를 참조하세요. **[⬆ back to top](#table-of-contents)** ## ECMAScript 6 Styles - - [27.1](#27.1) This is a collection of links to the various es6 features. + - [27.1](#27.1) 이것은 ES6 명세 링크를 모아 놓은 것입니다. 1. [Arrow Functions](#arrow-functions) 1. [Classes](#constructors) @@ -2288,7 +2283,7 @@ Other Style Guides ## Testing - - [28.1](#28.1) **Yup.** + - [28.1](#28.1) **물론 해야 합니다.** ```javascript function () { @@ -2296,13 +2291,13 @@ Other Style Guides } ``` - - [28.2](#28.2) **No, but seriously**: - - Whichever testing framework you use, you should be writing tests! - - Strive to write many small pure functions, and minimize where mutations occur. - - Be cautious about stubs and mocks - they can make your tests more brittle. - - We primarily use [`mocha`](https://www.npmjs.com/package/mocha) at Airbnb. [`tape`](https://www.npmjs.com/package/tape) is also used occasionally for small, separate modules. - - 100% test coverage is a good goal to strive for, even if it's not always practical to reach it. - - Whenever you fix a bug, _write a regression test_. A bug fixed without a regression test is almost certainly going to break again in the future. + - [28.2](#28.2) **물론 심각하게**: + - 대부분 테스트 프레임워크를 이용하여 테스트를 작성합니다. + - 작은 기능의 함수를 자주 쓰고 이변이 발생할 수 있는 부분을 최소화하기 위해 노력합니다. + - stubs와 mocks에 주의하세요. 이 것들로 인해 테스트가 부서지기 쉽습니다. + - Airbnb는 [`mocha`](https://www.npmjs.com/package/mocha)를 이용하고 있습니다. 작게 분할된 개별 모듈은 [`tape`](https://www.npmjs.com/package/tape) 사용합니다. + - 현실에서 도달할 필요가 없어도 100%의 테스트 커버리지를 목표로하는 것이 좋습니다. + - 버그를 수정할 때 마다 _회귀 테스트를 씁니다_. 회귀 테스트 없는 버그 수정은 나중에 반드시 다시 깨어날 것입니다. **[⬆ back to top](#table-of-contents)** @@ -2404,7 +2399,7 @@ Other Style Guides ## In the Wild - This is a list of organizations that are using this style guide. Send us a pull request and we'll add you to the list. + 이 것은 본 스타일 가이드를 사용하는 조직의 목록입니다. 이 목록에 추가하고 싶다면, pull request를 하거나 issue를 통해 알려주세요. - **Aan Zee**: [AanZee/javascript](https://github.com/AanZee/javascript) - **Adult Swim**: [adult-swim/javascript](https://github.com/adult-swim/javascript) @@ -2471,7 +2466,7 @@ Other Style Guides ## Translation - This style guide is also available in other languages: + 이 스타일 가이드는 다른 언어로도 이용할 수 있습니다. - ![br](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Brazilian Portuguese**: [armoucar/javascript-style-guide](https://github.com/armoucar/javascript-style-guide) - ![bg](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Bulgaria.png) **Bulgarian**: [borislavvv/javascript](https://github.com/borislavvv/javascript) From 60bd2ee9e55a4a36620109ce39100a8412b40a47 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Sun, 10 Jan 2016 23:48:50 +0900 Subject: [PATCH 02/13] FIXED wrong link of 'back to top' --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 21ee88c6d3..0be33249e1 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ - [CSS & Sass](https://github.com/airbnb/css) - [Ruby](https://github.com/airbnb/ruby) -## 목차 +## Table of Contents 1. [Types](#types) 1. [References](#references) From 055f3f9823327dff3c67ba23cb7d4af96e5976fd Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 09:38:55 +0900 Subject: [PATCH 03/13] FIXED wrong word --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 0be33249e1..d67a219205 100644 --- a/README.md +++ b/README.md @@ -167,7 +167,7 @@ }; ``` - - [3.3](#3.3) 예약어 대신에 알기 쉬운 동의어(Readable synonyms)를 사용하십세오. + - [3.3](#3.3) 예약어 대신에 알기 쉬운 동의어(Readable synonyms)를 사용하세요. ```javascript // bad @@ -515,7 +515,7 @@ })(); ``` - - [7.3](#7.3) 함수 이외의 블록 (if 나 while 등)에 함수를 선언하지 마세오. 브라우저는 변수에 함수를 할당하는 것을 처리할 수는 있지만, 모두 다르게 해석됩니다. + - [7.3](#7.3) 함수 이외의 블록 (if 나 while 등)에 함수를 선언하지 마세요. 브라우저는 변수에 함수를 할당하는 것을 처리할 수는 있지만, 모두 다르게 해석됩니다. - [7.4](#7.4) **주의:** ECMA-262에서 `block`은 statements 목록에 정의되지만, 함수 선언은 statements가 없습니다. [이 문제는 ECMA-262의 설명을 참조하세요](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). @@ -1070,7 +1070,7 @@ const dragonball = 'z'; ``` - - [13.3](#13.3) 먼저 `const`를 그룹화하고 그다음으로 `let`을 그룹화 하세오. + - [13.3](#13.3) 먼저 `const`를 그룹화하고 그다음으로 `let`을 그룹화 하세요. > 왜죠? 이전에 할당 된 변수에 따라 나중에 새로운 변수를 추가하는 경우에 유용하기 때문입니다. From cc6f03bfb828ef460529c5802484c1e47d1c08d3 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 09:48:30 +0900 Subject: [PATCH 04/13] FIXED wrong word #2 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index d67a219205..f6b8207cd7 100644 --- a/README.md +++ b/README.md @@ -574,9 +574,9 @@ ```javascript // really bad function handleThings(opts) { - // No! We shouldn't mutate function arguments. - // Double bad: if opts is falsy it'll be set to an object which may - // be what you want but it can introduce subtle bugs. + // 안되! 함수의 매개변수를 조작하지 않습니다. + // 만약 opts가 falsy 인 경우는 바란대로 객체가 설정됩니다. + // 그러나 미묘한 버그를 일으키는 원인이 될수도 있습니다. opts = opts || {}; // ... } From d6b1d472a0b2b96f9e8e083e813031dcb2a645e2 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 18:03:25 +0900 Subject: [PATCH 05/13] Translate to kr --- react/README.md | 58 ++++++++++++++++++++++++------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/react/README.md b/react/README.md index ba23784e1a..17ef574e0b 100644 --- a/react/README.md +++ b/react/README.md @@ -1,4 +1,4 @@ -# Airbnb React/JSX Style Guide +# Airbnb React/JSX 스타일 가이드 *A mostly reasonable approach to React and JSX* @@ -20,14 +20,14 @@ ## Basic Rules - - Only include one React component per file. - - However, multiple [Stateless, or Pure, Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) are allowed per file. eslint rule: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). - - Always use JSX syntax. - - Do not use `React.createElement` unless you're initializing the app from a file that is not JSX. + - 하나의 파일에는 오직 하나의 React 컴포넌트를 사용합니다. + - 그러나, 다중 [스테이트가 없는(Stateless) 또는 순수한 함수나 컴포넌트](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)는 허용됩니다. eslint rule: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). + - 항상 JSX 문법을 사용합니다. + - JSX파일이 아닌 다른 app에서 초기화하는 경우를 제외하고는 `React.createElement`를 사용하지 않습니다. ## Class vs `React.createClass` - - Use `class extends React.Component` unless you have a very good reason to use mixins. + - 특별한 이유로 믹스인(mixin)하는 경우를 제외하고는 `class extends React.Component`를 사용하세요. eslint rules: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md). @@ -49,9 +49,9 @@ ## Naming - - **Extensions**: Use `.jsx` extension for React components. - - **Filename**: Use PascalCase for filenames. E.g., `ReservationCard.jsx`. - - **Reference Naming**: Use PascalCase for React components and camelCase for their instances. + - **확장자**: React 컴포넌트는 `.jsx` 확장자를 사용합니다. + - **파일명**: 파일명에는 PascalCase(대문자로 시작)를 사용합니다. 예), `ReservationCard.jsx`. + - **참조명**: React 컴포넌트의 참조 이름에는 PascalCase를 쓰고 그 인스턴스의 이름에는 camelCase(소문자로 시작)를 사용합니다. eslint rules: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md). @@ -69,7 +69,7 @@ const reservationItem = ; ``` - - **Component Naming**: Use the filename as the component name. For example, `ReservationCard.jsx` should have a reference name of `ReservationCard`. However, for root components of a directory, use `index.jsx` as the filename and use the directory name as the component name: + - **컴포넌트명**: 컴포넌트명으로 파일명을 씁니다. 예), `ReservationCard.jsx` 파일은 `ReservationCard`라는 참조명을 가집니다. 그러나, 루트 컴포넌트가 디렉토리에 구성되었다면 파일명을 `index.jsx`로 쓰고 디렉토리명을 컴포넌트명으로 사용합니다: ```javascript // bad @@ -84,7 +84,7 @@ ## Declaration - - Do not use `displayName` for naming components. Instead, name the component by reference. + - `displayName`을 이용하여 컴포넌트명을 정하지 않습니다. 그대신, 참조에 의해 이름을 지정합니다. ```javascript // bad @@ -100,7 +100,7 @@ ## Alignment - - Follow these alignment styles for JSX syntax + - JSX 구문에 따른 정렬 스타일을 사용합니다. eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md). @@ -129,10 +129,10 @@ ## Quotes - - Always use double quotes (`"`) for JSX attributes, but single quotes for all other JS. + - JSX 속성(attributes)에는 항상 큰 따옴표(`"`)를 사용합니다. 그러나 다른 모든 자바스크립트에는 작은 따옴표(single quotes)를 사용합니다. - > Why? JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes), so double quotes make conjunctions like `"don't"` easier to type. - > Regular HTML attributes also typically use double quotes instead of single, so JSX attributes mirror this convention. + > 왜죠? JSX 속성(attributes)은 [따옴표(quotes)의 탈출(escaped)을 포함할 수 없습니다](http://eslint.org/docs/rules/jsx-quotes). 그래서 큰 따옴표를 이용하여 `"don't"`과 같은 접속사를 쉽게 입력할 수 있습니다. + > 일반적으로 HTML 속성(attributes)에는 작은 따옴표 대신 큰 따옴표를 사용합니다. 그래서 JSX 속성역시 동일한 규칙이 적용됩니다. eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes). @@ -152,7 +152,7 @@ ## Spacing - - Always include a single space in your self-closing tag. + - 자신을 닫는(self-closing) 태그에는 항상 하나의 공백만을 사용합니다. ```javascript // bad @@ -171,7 +171,7 @@ ## Props - - Always use camelCase for prop names. + - prop 이름은 항상 camelCase(소문자로 시작)를 사용합니다. ```javascript // bad @@ -187,7 +187,7 @@ /> ``` - - Omit the value of the prop when it is explicitly `true`. + - 명시적으로 `true` 값을 가지는 prop은 그 값을 생략할 수 있습니다. eslint rules: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md). @@ -205,7 +205,7 @@ ## Parentheses - - Wrap JSX tags in parentheses when they span more than one line. + - JSX 태그가 감싸여(Wrap) 있어 한 줄 이상인 경우 괄호(parentheses)를 사용합니다. eslint rules: [`react/wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md). @@ -235,7 +235,7 @@ ## Tags - - Always self-close tags that have no children. + - 자식(children)을 가지지 않는다면 항상 자신을 닫는(self-close) 태그로 작성합니다. eslint rules: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md). @@ -247,7 +247,7 @@ ``` - - If your component has multi-line properties, close its tag on a new line. + - 만약, 컴포넌트의 속성(properties)을 여러 줄에 있는 경우, 닫는 태그는 다음 줄에 작성합니다. eslint rules: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md). @@ -266,9 +266,9 @@ ## Methods - - Bind event handlers for the render method in the constructor. + - 렌더러 메소드에서 이벤트 핸들러에 바인드(Bind)가 필요한 경우에는 생성자(constructor)에서 합니다. - > Why? A bind call in a the render path creates a brand new function on every single render. + > 왜죠? 렌더러 메소드에서 바인드(bind)를 호출하게 되면 랜더링 할 때 마다 매번 새로운 함수를 생성하게 됩니다. eslint rules: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md). @@ -302,7 +302,7 @@ } ``` - - Do not use underscore prefix for internal methods of a React component. + - React 컴포넌트의 내부 메소드에 밑줄(underscore)을 접두사로 사용하지 않습니다. ```javascript // bad @@ -326,7 +326,7 @@ ## Ordering - - Ordering for `class extends React.Component`: + - `class extends React.Component`의 오더링(Ordering): 1. `constructor` 1. optional `static` methods @@ -343,7 +343,7 @@ 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` 1. `render` - - How to define `propTypes`, `defaultProps`, `contextTypes`, etc... + - `propTypes`, `defaultProps`, `contextTypes`, 등을 어떻게 정의할까요... ```javascript import React, { PropTypes } from 'react'; @@ -374,7 +374,7 @@ export default Link; ``` - - Ordering for `React.createClass`: + - `React.createClass`의 오더링(Ordering): 1. `displayName` 1. `propTypes` @@ -402,9 +402,9 @@ ## `isMounted` - - Do not use `isMounted`. + - `isMounted`는 사용하지 않습니다. - > Why? [`isMounted` is an anti-pattern][anti-pattern], is not available when using ES6 classes, and is on its way to being officially deprecated. + > 왜죠? [`isMounted`는 안티-패턴(anti-pattern)][anti-pattern]입니다. ES6 클래스에서는 사용할수도 없습니다. 그리고 공식적으로 사용되지 않게(deprecated) 될 것입니다. [anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html From 3e913b12b04b8b1f5fe21046ba64180701290d0d Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 18:05:31 +0900 Subject: [PATCH 06/13] Update README.md --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 17ef574e0b..74faf38ee3 100644 --- a/react/README.md +++ b/react/README.md @@ -1,6 +1,6 @@ # Airbnb React/JSX 스타일 가이드 -*A mostly reasonable approach to React and JSX* +*React와 JSX에 대한 가장 합리적인 접근 방식* ## Table of Contents From 7cc8c17caf6ba3c3f0e03bc01edfe551c89840d0 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 18:10:06 +0900 Subject: [PATCH 07/13] Update README.md --- react/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/react/README.md b/react/README.md index 74faf38ee3..402c08e54a 100644 --- a/react/README.md +++ b/react/README.md @@ -329,7 +329,7 @@ - `class extends React.Component`의 오더링(Ordering): 1. `constructor` - 1. optional `static` methods + 1. 추가적인(optional) `static` 메소드 1. `getChildContext` 1. `componentWillMount` 1. `componentDidMount` @@ -338,9 +338,9 @@ 1. `componentWillUpdate` 1. `componentDidUpdate` 1. `componentWillUnmount` - 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` - 1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()` - 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` + 1. `onClickSubmit()`와 같은 *clickHandlers 또는 eventHandlers* 또는 `onChangeDescription()` + 1. `getSelectReason()`와 같은 *`render`를 위한 getter methods* 또는 `getFooterContent()` + 1. `renderNavigation()`와 같은 *추가적인 렌더러 메소드* 또는 `renderProfilePicture()` 1. `render` - `propTypes`, `defaultProps`, `contextTypes`, 등을 어떻게 정의할까요... @@ -393,9 +393,9 @@ 1. `componentWillUpdate` 1. `componentDidUpdate` 1. `componentWillUnmount` - 1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()` - 1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()` - 1. *Optional render methods* like `renderNavigation()` or `renderProfilePicture()` + 1. `onClickSubmit()`와 같은 *clickHandlers 또는 eventHandlers* 또는 `onChangeDescription()` + 1. `getSelectReason()`와 같은 *`render`를 위한 getter methods* 또는 `getFooterContent()` + 1. `renderNavigation()`와 같은 *추가적인 렌더러 메소드* 또는 `renderProfilePicture()` 1. `render` eslint rules: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md). From 3243c7380bf9a3ac33e8ffca0d4513b70faf8437 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 19:06:05 +0900 Subject: [PATCH 08/13] Update README.md --- react/README.md | 48 ++++++++++++++++++++++++------------------------ 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/react/README.md b/react/README.md index 402c08e54a..0263182232 100644 --- a/react/README.md +++ b/react/README.md @@ -4,28 +4,28 @@ ## Table of Contents - 1. [Basic Rules](#basic-rules) - 1. [Class vs `React.createClass`](#class-vs-reactcreateclass) - 1. [Naming](#naming) - 1. [Declaration](#declaration) - 1. [Alignment](#alignment) - 1. [Quotes](#quotes) - 1. [Spacing](#spacing) - 1. [Props](#props) - 1. [Parentheses](#parentheses) - 1. [Tags](#tags) - 1. [Methods](#methods) - 1. [Ordering](#ordering) + 1. [기본 규칙(Basic Rules)](#기본-규칙basic-rules) + 1. [클래스 대 `React.createClass`(Class vs `React.createClass`)](#클래스-대-reactcreateclassclass-vs-reactcreateclass) + 1. [명명(Naming)](#명명naming) + 1. [선언(Declaration)](#선언declaration) + 1. [조정(Alignment)](#조정alignment) + 1. [인용(Quotes)](#인용quotes) + 1. [공백(Spacing)](#공백spacing) + 1. [속성(Props)](#속성props) + 1. [괄호(Parentheses)](#괄호parentheses) + 1. [태그(Tags)](#태그tags) + 1. [메소드(Methods)](#메소드methods) + 1. [오더링(Ordering)](#오더링ordering) 1. [`isMounted`](#ismounted) -## Basic Rules +## 기본 규칙(Basic Rules) - 하나의 파일에는 오직 하나의 React 컴포넌트를 사용합니다. - 그러나, 다중 [스테이트가 없는(Stateless) 또는 순수한 함수나 컴포넌트](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)는 허용됩니다. eslint rule: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). - 항상 JSX 문법을 사용합니다. - JSX파일이 아닌 다른 app에서 초기화하는 경우를 제외하고는 `React.createElement`를 사용하지 않습니다. -## Class vs `React.createClass` +## 클래스 대 `React.createClass`(Class vs `React.createClass`) - 특별한 이유로 믹스인(mixin)하는 경우를 제외하고는 `class extends React.Component`를 사용하세요. @@ -47,7 +47,7 @@ } ``` -## Naming +## 명명(Naming) - **확장자**: React 컴포넌트는 `.jsx` 확장자를 사용합니다. - **파일명**: 파일명에는 PascalCase(대문자로 시작)를 사용합니다. 예), `ReservationCard.jsx`. @@ -82,7 +82,7 @@ import Footer from './Footer'; ``` -## Declaration +## 선언(Declaration) - `displayName`을 이용하여 컴포넌트명을 정하지 않습니다. 그대신, 참조에 의해 이름을 지정합니다. @@ -98,7 +98,7 @@ } ``` -## Alignment +## 조정(Alignment) - JSX 구문에 따른 정렬 스타일을 사용합니다. @@ -127,7 +127,7 @@ ``` -## Quotes +## 인용(Quotes) - JSX 속성(attributes)에는 항상 큰 따옴표(`"`)를 사용합니다. 그러나 다른 모든 자바스크립트에는 작은 따옴표(single quotes)를 사용합니다. @@ -150,7 +150,7 @@ ``` -## Spacing +## 공백(Spacing) - 자신을 닫는(self-closing) 태그에는 항상 하나의 공백만을 사용합니다. @@ -169,7 +169,7 @@ ``` -## Props +## 속성(Props) - prop 이름은 항상 camelCase(소문자로 시작)를 사용합니다. @@ -203,7 +203,7 @@ /> ``` -## Parentheses +## 괄호(Parentheses) - JSX 태그가 감싸여(Wrap) 있어 한 줄 이상인 경우 괄호(parentheses)를 사용합니다. @@ -233,7 +233,7 @@ } ``` -## Tags +## 태그(Tags) - 자식(children)을 가지지 않는다면 항상 자신을 닫는(self-close) 태그로 작성합니다. @@ -264,7 +264,7 @@ /> ``` -## Methods +## 메소드(Methods) - 렌더러 메소드에서 이벤트 핸들러에 바인드(Bind)가 필요한 경우에는 생성자(constructor)에서 합니다. @@ -324,7 +324,7 @@ } ``` -## Ordering +## 오더링(Ordering) - `class extends React.Component`의 오더링(Ordering): From 8fced5a48214d537aca36537d889e3d187a2e5d6 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 23:05:40 +0900 Subject: [PATCH 09/13] Update README.md --- README.md | 380 +++++++++++++++++++++++++++--------------------------- 1 file changed, 190 insertions(+), 190 deletions(-) diff --git a/README.md b/README.md index f6b8207cd7..12cb8e9572 100644 --- a/README.md +++ b/README.md @@ -11,46 +11,46 @@ - [CSS & Sass](https://github.com/airbnb/css) - [Ruby](https://github.com/airbnb/ruby) -## Table of Contents - - 1. [Types](#types) - 1. [References](#references) - 1. [Objects](#objects) - 1. [Arrays](#arrays) - 1. [Destructuring](#destructuring) - 1. [Strings](#strings) - 1. [Functions](#functions) - 1. [Arrow Functions](#arrow-functions) - 1. [Constructors](#constructors) - 1. [Modules](#modules) - 1. [Iterators and Generators](#iterators-and-generators) - 1. [Properties](#properties) - 1. [Variables](#variables) - 1. [Hoisting](#hoisting) - 1. [Comparison Operators & Equality](#comparison-operators--equality) - 1. [Blocks](#blocks) - 1. [Comments](#comments) - 1. [Whitespace](#whitespace) - 1. [Commas](#commas) - 1. [Semicolons](#semicolons) - 1. [Type Casting & Coercion](#type-casting--coercion) - 1. [Naming Conventions](#naming-conventions) - 1. [Accessors](#accessors) - 1. [Events](#events) +## 목차 + + 1. [유형(Types)](#유형types) + 1. [참조(References)](#참조references) + 1. [객체(Objects)](#객체objects) + 1. [배열(Arrays)](#배열arrays) + 1. [구조화 대입(Destructuring)](#구조화-대입destructuring) + 1. [문자열(Strings)](#문자열strings) + 1. [함수(Functions)](#함수functions) + 1. [애로우 함수(Arrow Functions)](#애로우-함수arrow-functions) + 1. [생성자(Constructors)](#생성자constructors) + 1. [모듈(Modules)](#모듈modules) + 1. [이터레이터와 제너레이터(Iterators and Generators)](#이터레이터와-제너레이터iterators-and-generators) + 1. [속성(Properties)](#속성properties) + 1. [변수(Variables)](#변수variables) + 1. [호이스팅(Hoisting)](#호이스팅hoisting) + 1. [조건식과 등가현(Comparison Operators & Equality)](#조건식과-등가식comparison-operators--equality) + 1. [블록(Blocks)](#블록blocks) + 1. [주석(Comments)](#주석comments) + 1. [공백(Whitespace)](#공백whitespace) + 1. [쉼표(Commas)](#쉼표commas) + 1. [세미콜론(Semicolons)](#세미콜론semicolons) + 1. [형변환과 강제(Type Casting & Coercion)](#형변환과-강제type-casting--coercion) + 1. [명명 규칙(Naming Conventions)](#명명-규칙naming-conventions) + 1. [액세서(Accessors)](#액세서accessors) + 1. [이벤트(Events)](#이벤트events) 1. [jQuery](#jquery) - 1. [ECMAScript 5 Compatibility](#ecmascript-5-compatibility) - 1. [ECMAScript 6 Styles](#ecmascript-6-styles) - 1. [Testing](#testing) - 1. [Performance](#performance) - 1. [Resources](#resources) - 1. [In the Wild](#in-the-wild) - 1. [Translation](#translation) - 1. [The JavaScript Style Guide Guide](#the-javascript-style-guide-guide) - 1. [Chat With Us About JavaScript](#chat-with-us-about-javascript) - 1. [Contributors](#contributors) - 1. [License](#license) - -## Types + 1. [ECMAScript 5 호환성(ECMAScript 5 Compatibility)](#ecmascript-5-호환성ecmascript-5-compatibility) + 1. [ECMAScript 6 스타일(ECMAScript 6 Styles)](#ecmascript-6-스타일ecmascript-6-styles) + 1. [테스팅(Testing)](#테스팅testing) + 1. [성능(Performance)](#성능performance) + 1. [참고(Resources)](#참고resources) + 1. [기여(In the Wild)](#기여in-the-wild) + 1. [번역(Translation)](#번역translation) + 1. [자바스크립트 스타일 가이드 안내서(The JavaScript Style Guide Guide)](#자바스크립트-스타일-가이드-안내서the-javascript-style-guide-guide) + 1. [자바스크립트 스타일 가이드 채팅(Chat With Us About JavaScript)](#자바스크립트-스타일-가이드-채팅chat-with-us-about-javascript) + 1. [참여자(Contributors)](#참여자contributors) + 1. [라이센스(License)](#라이센스license) + +## 유형(Types) - [1.1](#1.1) **Primitives**: 원시형(Primitive type)은 그 값을 직접 조작합니다. @@ -83,13 +83,13 @@ console.log(foo[0], bar[0]); // => 9, 9 ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## References +## 참조(References) - [2.1](#2.1) 모든 참조에는 `const`를 사용하고 `var`를 사용하지 않습니다. - > 왜죠? 참조를 다시 할당할 수 없으므로, 버그로 연결되거나 이해하기 어려운 코드가 되는 것을 방지합니다. + > 왜죠? 참조를 다시 할당할 수 없어서, 버그로 연결되거나 이해하기 어려운 코드가 되는 것을 예방합니다. eslint rules: [`prefer-const`](http://eslint.org/docs/rules/prefer-const.html), [`no-const-assign`](http://eslint.org/docs/rules/no-const-assign.html). @@ -135,11 +135,11 @@ console.log(b); // ReferenceError ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Objects +## 객체(Objects) - - [3.1](#3.1) 개체를 만들 때에는 리터럴 구문을 사용합니다. + - [3.1](#3.1) 객체를 만들 때에는 리터럴 구문을 사용합니다. eslint rules: [`no-new-object`](http://eslint.org/docs/rules/no-new-object.html). @@ -151,7 +151,7 @@ const item = {}; ``` - - [3.2](#3.2) 코드가 브라우저에서 실행되는 경우 [예약어](http://es5.github.io/#x7.6.1)를 키로 사용하지 마세요. 이것은 IE8에서 작동하지 않습니다. [More info](https://github.com/airbnb/javascript/issues/61). ES6 모듈과 서버 사이드에서는 사용할 수 있습니다. + - [3.2](#3.2) 코드가 브라우저에서 실행되는 경우 [예약어](http://es5.github.io/#x7.6.1)를 키로 사용하지 마세요. 이것은 IE8에서 작동하지 않습니다. [더 알아보기](https://github.com/airbnb/javascript/issues/61). ES6 모듈과 서버 사이드에서는 사용할 수 있습니다. ```javascript // bad @@ -167,7 +167,7 @@ }; ``` - - [3.3](#3.3) 예약어 대신에 알기 쉬운 동의어(Readable synonyms)를 사용하세요. + - [3.3](#3.3) 예약어 대신에 알기 쉬운 동의어(Readable Synonyms)를 사용하세요. ```javascript // bad @@ -187,9 +187,9 @@ ``` - - [3.4](#3.4) 동적인 속성 이름을 가진 객체를 만들 때에는 계산된 속성 이름(Computed property names)을 사용하세요. + - [3.4](#3.4) 동적인 속성 이름을 가진 객체를 만들 때에는 계산된 속성 이름(Computed Property Names)을 사용하세요. - > 왜죠? 이렇게하면 객체 속성을 1개의 장소에서 정의 할 수 있습니다. + > 왜죠? 이렇게하면 객체 속성을 한 개의 장소에서 정의 할 수 있습니다. ```javascript @@ -213,7 +213,7 @@ ``` - - [3.5](#3.5) 메소드에 단축 구문(Shorthand)을 사용하세요. + - [3.5](#3.5) 메소드에 단축 구문(Object Shorthand)을 사용하세요. eslint rules: [`object-shorthand`](http://eslint.org/docs/rules/object-shorthand.html). @@ -238,7 +238,7 @@ ``` - - [3.6](#3.6) 속성에 단축 구문을 사용하세요. + - [3.6](#3.6) 속성에 단축 구문(Object Concise)을 사용하세요. > 왜죠? 표현이나 설명이 간결해지기 때문입니다. @@ -258,7 +258,7 @@ }; ``` - - [3.7](#3.7) 속성의 단축 구문은 객체 선언의 시작 부분에 무리를 지어줍니다. + - [3.7](#3.7) 속성의 단축 구문(Object Concise)은 객체 선언의 시작 부분에 무리를 지어줍니다. > 왜죠? 어떤 속성이 단축 구문을 사용하고 있는지를 알기가 쉽기 때문입니다. @@ -287,7 +287,7 @@ }; ``` - - [3.8](#3.8) 이용한 속성에 작은 따옴표를 사용하는 경우는 오직 잘못된 식별자인 경우에만 사용합니다. + - [3.8](#3.8) 속성 이름에 작은 따옴표를 사용하는 경우는 오직 잘못된 식별자(Invalid Identifiers)일 때입니다. > 왜죠? 주관적으로 쉽게 읽을 수 있는 것을 항상 고민해야 합니다. 이 것은 구문이 강조되고, 수많은 JS엔진에 쉽게 최적화되어 있습니다. @@ -309,9 +309,9 @@ }; ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Arrays +## 배열(Arrays) - [4.1](#4.1) 배열을 만들 때 리터럴 구문을 사용하세요. @@ -353,18 +353,18 @@ // good const itemsCopy = [...items]; ``` - - [4.4](#4.4) array-like 객체를 배열로 변환하려면 Array#from을 사용하세요. + - [4.4](#4.4) Array-Like 객체를 배열로 변환하려면 Array#from을 사용하세요. ```javascript const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Destructuring +## 구조화 대입(Destructuring) - - [5.1](#5.1) 여러 속성에서 객체에 접근할 때 객체 구조화 대입을 사용하세요. + - [5.1](#5.1) 여러 속성에서 객체에 접근할 때 객체 구조화 대입(Destructuring)을 사용하세요. > 왜죠? 구조화 대입을 이용하여 그 속성에 대한 중간 참조를 줄일 수 있습니다. @@ -389,7 +389,7 @@ } ``` - - [5.2](#5.2) 배열의 구조 대입(Destructuring)을 사용하세요. + - [5.2](#5.2) 배열에 구조화 대입(Destructuring)을 사용하세요. ```javascript const arr = [1, 2, 3, 4]; @@ -402,34 +402,34 @@ const [first, second] = arr; ``` - - [5.3](#5.3) 여러 값을 반환하는 경우, 배열의 구조 대입이 아니라 객체의 구조 대입을 사용하세요. + - [5.3](#5.3) 여러 값을 반환하는 경우, 배열의 구조화 대입이 아니라 객체의 구조화 대입을 사용하세요. > 왜죠? 이렇게하면 나중에 새 속성을 추가하거나 호출에 영향을 주지않고 순서를 변경할 수 있습니다. ```javascript // bad function processInput(input) { - // then a miracle occurs + // 그러면 기적이 일어난다 return [left, right, top, bottom]; } - // the caller needs to think about the order of return data + // 호출자에 반환되는 데이터의 순서를 고려해야 함 const [left, __, top] = processInput(input); // good function processInput(input) { - // then a miracle occurs + // 그러면 기적이 일어난다 return { left, right, top, bottom }; } - // the caller selects only the data they need + // 호출하면서 필요한 데이터만 선택할 수 있음 const { left, right } = processInput(input); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Strings +## 문자열(Strings) - [6.1](#6.1) 문자열에는 작은 따옴표`''`를 사용하세요. @@ -443,7 +443,7 @@ const name = 'Capt. Janeway'; ``` - - [6.2](#6.2) 100자 이상의 문자열은 문자열 연결을 사용하여 여러 행에 걸쳐 기술할 수 있습니다. + - [6.2](#6.2) 100자 이상의 문자열은 여러 행을 사용하여 연결할 수 있습니다. - [6.3](#6.3) 주의: 문자열 연결이 많으면 성능에 영향을 줄 수 있습니다. [jsPerf](http://jsperf.com/ya-string-concat) & [Discussion](https://github.com/airbnb/javascript/issues/40). ```javascript @@ -463,9 +463,9 @@ ``` - - [6.4](#6.4) 프로그램에서 문자열을 생성하는 경우, 문자열 연결이 아니라 template strings을 사용하세요. + - [6.4](#6.4) 프로그램에서 문자열을 생성하는 경우, 문자열 연결이 아니라 템플릿 문자열(Template Strings)을 사용하세요. - > 왜죠? Template strings 문자열 완성 기능과 다중 문자열 기능을 가진 간결한 구문으로 가독성이 좋아지기 때문입니다. + > 왜죠? 템플릿 문자열의 문자열 완성 기능과 다중 문자열 기능을 가진 간결한 구문으로 가독성이 좋아지기 때문입니다. eslint rules: [`prefer-template`](http://eslint.org/docs/rules/prefer-template.html). @@ -487,14 +487,14 @@ ``` - [6.5](#6.5) 절대로 `eval()`을 사용하지 않습니다. 이것은 지금까지 수많은 취약점을 만들어 왔기 때문입니다. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Functions +## 함수(Functions) - [7.1](#7.1) 함수 선언 대신에 함수 표현식을 사용합니다. - > 왜죠? 이름이 붙은 함수 선언은 콜스택에서 쉽게 알수 있습니다. 또한 함수 선언의 몸 전체가 Hoist됩니다. 반면 함수는 참조만 Hoist됩니다. 이 규칙은 함수 부분을 항상 [Arrow Functions](#arrow-functions)로 대체 사용할 수 있습니다. + > 왜죠? 이름이 붙은 함수 선언은 콜스택에서 쉽게 알수 있습니다. 또한 함수 선언의 몸 전체가 Hoist됩니다. 반면 함수는 참조만 Hoist됩니다. 이 규칙은 함수 부분을 항상 [애로우 함수](#애로우-함수arrow-functions)로 대체 사용할 수 있습니다. ```javascript // bad @@ -506,16 +506,16 @@ } ``` - - [7.2](#7.2) 함수식(Function expressions): + - [7.2](#7.2) 함수 표현식(Function expressions): ```javascript - // immediately-invoked function expression (IIFE) + // 즉시-호출(Immediately-Invoked) 함수 표현식(IIFE) (() => { console.log('Welcome to the Internet. Please follow me.'); })(); ``` - - [7.3](#7.3) 함수 이외의 블록 (if 나 while 등)에 함수를 선언하지 마세요. 브라우저는 변수에 함수를 할당하는 것을 처리할 수는 있지만, 모두 다르게 해석됩니다. + - [7.3](#7.3) 함수 이외의 블록 (`if`나 `while` 등)에 함수를 선언하지 않습니다. 브라우저는 변수에 함수를 할당하는 처리를 할 수는 있지만, 모두 다르게 해석됩니다. - [7.4](#7.4) **주의:** ECMA-262에서 `block`은 statements 목록에 정의되지만, 함수 선언은 statements가 없습니다. [이 문제는 ECMA-262의 설명을 참조하세요](http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf#page=97). @@ -536,7 +536,7 @@ } ``` - - [7.5](#7.5) 매개변수(parameter)에 `arguments`를 절대 지정하지 않습니다. 이것은 함수 Scope로 전달 될 `arguments`객체의 참조를 덮어 써버릴 것입니다. + - [7.5](#7.5) 매개변수(parameter)에 `arguments`를 절대로 지정하지 않습니다. 이것은 함수 영역으로 전달 될 `arguments`객체의 참조를 덮어 써버릴 것입니다. ```javascript // bad @@ -551,9 +551,9 @@ ``` - - [7.6](#7.6) `arguments`를 사용하지 않습니다. 대신 rest syntax인 `...`을 사용하세요. + - [7.6](#7.6) `arguments`를 사용하지 않습니다. 대신 레스트(Rest) 문법인 `...`을 사용하세요. - > 왜죠? `...` 를 이용하여 여러가지 매개변수를 모두 사용할 수 있습니다. 추가로 rest 매개변수인 `arguments`는 Array-like 객체가 아니라 진정한 Array입니다. + > 왜죠? `...` 를 이용하여 여러가지 매개변수를 모두 사용할 수 있습니다. 추가로 rest 매개변수인 `arguments`는 Array-Like 객체가 아니라 진정한 배열(Array)입니다. ```javascript // bad @@ -569,7 +569,7 @@ ``` - - [7.7](#7.7) 함수의 매개변수를 조작하지 말고 기본 매개변수를 사용하세요. + - [7.7](#7.7) 함수의 매개변수를 조작하지 말고 기본 매개변수(Default Parameters)를 사용하세요. ```javascript // really bad @@ -695,15 +695,15 @@ } ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Arrow Functions +## 애로우 함수(Arrow Functions) - - [8.1](#8.1) (익명 함수 통과와 같은) 함수를 이용하는 경우, Arrow 함수를 사용하세요. + - [8.1](#8.1) 함수 표현식을 사용하는 경우(익명 함수와 같은), 애로우 함수(Arrow Functions)를 사용하세요. - > 왜죠? 애로우 함수는 함수가 실행되는 컨텍스트의 `this`를 속박합니다. 이것은 일반적으로 예상대로 작동하고 구문이 더 간결합니다. + > 왜죠? 애로우 함수는 함수가 실행되는 컨텍스트의 `this`를 가두어줍니다. 이것은 너무나 원했던 것이며 구문도 더욱 간결해집니다. - > 언제 쓰죠? 복잡한 함수 논리를 정의한 함수의 바깥쪽으로 이동하고 싶은 경우. + > 언제 쓰죠? 복잡한 함수 논리를 정의한 함수의 바깥쪽으로 이동하고 싶은 경우입니다. eslint rules: [`prefer-arrow-callback`](http://eslint.org/docs/rules/prefer-arrow-callback.html), [`arrow-spacing`](http://eslint.org/docs/rules/arrow-spacing.html). @@ -721,7 +721,7 @@ }); ``` - - [8.2](#8.2) 함수의 본체가 하나의 식으로 구성되어있는 경우 중괄호를 생략하고 암묵적 return을 사용할 수 있습니다. 그렇지 않으면 `return` 문을 사용해야 합니다. + - [8.2](#8.2) 함수의 본체가 하나의 표현식으로 구성되어있는 경우 중괄호`{}`를 생략하고 암묵적 return을 사용할 수 있습니다. 그렇지 않으면 `return` 문을 사용해야 합니다. > 왜죠? 가독성이 좋아지기 때문입니다. 여러 함수가 연결되는 경우에 쉽게 읽을 수 있습니다. @@ -746,7 +746,7 @@ }); ``` - - [8.3](#8.3) 식의 길이가 여러 행에 걸치는 경우 가독성을 향상시키기 위해 괄호 안에 써주세요. + - [8.3](#8.3) 구문의 길이가 여러 행에 걸치는 경우 가독성을 향상시키기 위해 괄호`()` 안에 써주세요. > 왜죠? 함수의 시작과 끝 부분을 알아보기 쉽게 합니다. @@ -765,7 +765,7 @@ ``` - - [8.4](#8.4) 함수의 인수가 1개인 경우 괄호를 생략할 수 있습니다. + - [8.4](#8.4) 함수의 인수가 한 개인 경우 괄호`()`를 생략할 수 있습니다. > 왜죠? 시각적 혼란이 덜하기 때문입니다. @@ -797,10 +797,10 @@ }); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Constructors +## 생성자(Constructors) - [9.1](#9.1) `prototype`의 직접 조작을 피하고 항상 `class`를 사용하세요. @@ -909,14 +909,14 @@ } ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Modules +## 모듈(Modules) - - [10.1](#10.1) 비표준 모듈 시스템이 아니라면 항상 (`import`/`export`) 를 사용하세요. 이렇게 함으로써 원하는 모듈 시스템에 언제든지 transpile 할 수 있습니다. + - [10.1](#10.1) 비표준 모듈 시스템이 아니라면 항상 (`import`/`export`) 를 사용하세요. 이렇게 함으로써 원하는 모듈 시스템에 언제든지 트랜스파일(Transpile) 할 수 있습니다. - > 왜죠? 모듈은 곧 미래입니다. 미래를 선점하고 사용합시다. + > 왜죠? 모듈은 곧 미래입니다. 미래를 선점하고 애용합시다. ```javascript // bad @@ -944,9 +944,9 @@ import AirbnbStyleGuide from './AirbnbStyleGuide'; ``` - - [10.3](#10.3) import 문에서 직접 export하지 않습니다. + - [10.3](#10.3) import 문에서 직접 추출(Export)하지 않습니다. - > 왜죠? 한개의 라인이라 간결하기는 하지만, import와 export하는 방법을 명확하게 함으로써 일관성을 유지할 수 있습니다. + > 왜죠? 한개의 라인이라 간결하기는 하지만, import와 export하는 방법을 명확하게 구분함으로써 일관성을 유지할 수 있습니다. ```javascript // bad @@ -959,13 +959,13 @@ export default es6; ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Iterators and Generators +## 이터레이터와 제너레이터(Iterators and Generators) - - [11.1](#11.1) iterators를 사용하지 않습니다. `for-of` 루프 대신 `map()`과 `reduce()`같은 Javascript의 고급 함수(higher-order functions)을 사용하세요. + - [11.1](#11.1) 이터레이터(Iterators)를 사용하지 않습니다. `for-of` 루프 대신 `map()`과 `reduce()`같은 자바스크립트의 고급함수(higher-order functions)를 사용하세요. - > 왜죠? 이것은 immutable(불변)의 규칙을 적용합니다. 값을 반환하는 함수를 처리하는 것이 부작용을 추측하기가 더 쉽습니다. + > 왜죠? 이것은 불변(Immutable)의 규칙을 적용합니다. 값을 반환하는 함수를 처리하는 것이 부작용을 예측하기가 더 쉽습니다. eslint rules: [`no-iterator`](http://eslint.org/docs/rules/no-iterator.html). @@ -990,16 +990,16 @@ sum === 15; ``` - - [11.2](#11.2) 현재 generators는 사용하지 않습니다. + - [11.2](#11.2) 현재 제너레이터(Generators)는 사용하지 않는 것이 좋습니다. - > 왜죠? ES5의 transpile이 잘 작동하지 않습니다. + > 왜죠? ES5에서 트랜스파일(Transpile)이 올바로 작동하지 않습니다. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Properties +## 속성(Properties) - - [12.1](#12.1) 속성에 접근하려면 점을 사용하세요. + - [12.1](#12.1) 속성에 접근하려면 점`.`을 사용하세요. eslint rules: [`dot-notation`](http://eslint.org/docs/rules/dot-notation.html). @@ -1031,10 +1031,10 @@ const isJedi = getProp('jedi'); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Variables +## 변수(Variables) - [13.1](#13.1) 변수를 선언 할 때는 항상 `const`를 사용하세요. 그렇지 않을 경우 전역 변수로 선언됩니다. 글로벌 네임 스페이스가 오염되지 않도록 캡틴 플래닛(역자주: 환경보호와 생태를 테마로 한 슈퍼히어로 애니메이션)도 경고하고 있습니다. @@ -1048,7 +1048,7 @@ - [13.2](#13.2) 하나의 변수 선언에 대해 하나의 `const`를 사용하세요. - > 왜죠? 이 방법은 새로운 변수를 쉽게 추가할 수 있습니다. 또한 구분 기호의 차이에 의한 `;`를 `,`로 다시금 대체하는 작업에 대해 신경쓸 필요가 없습니다. + > 왜죠? 이 방법은 새로운 변수를 쉽게 추가할 수 있습니다. 또한 구분 기호의 차이에 의한 `;`을 `,`로 다시금 대체하는 작업에 대해 신경쓸 필요가 없습니다. eslint rules: [`one-var`](http://eslint.org/docs/rules/one-var.html). @@ -1070,7 +1070,7 @@ const dragonball = 'z'; ``` - - [13.3](#13.3) 먼저 `const`를 그룹화하고 그다음으로 `let`을 그룹화 하세요. + - [13.3](#13.3) 먼저 `const`를 그룹화하고 그 다음으로 `let`을 그룹화 하세요. > 왜죠? 이전에 할당 된 변수에 따라 나중에 새로운 변수를 추가하는 경우에 유용하기 때문입니다. @@ -1095,9 +1095,9 @@ let length; ``` - - [13.4](#13.4) 변수를 할당할 때는 필요하고 합리적인 장소에 넣습니다. + - [13.4](#13.4) 변수를 할당을 필요로 하는 부분에서 적당한 장소에 배치해야 합니다. - > 왜죠? `let`과 `const`는 함수 Scope에는 없는 블록 Scope이기 때문입니다. + > 왜죠? `let`과 `const`는 함수 범위에는 없는 블록 범위이기 때문입니다. ```javascript // good @@ -1142,10 +1142,10 @@ } ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Hoisting +## 호이스팅(Hoisting) - [14.1](#14.1) `var` 선언은 할당이 없는 상태로 범위(Scope)의 위로 Hoist될 수 있습니다. 하지만 `const`와 `let` 선언은 시간적 데드 존([Temporal Dead Zones (TDZ)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let))이라는 새로운 개념의 혜택을 받고 있습니다. 이것은 왜 typeof가 안전하지 않은가([typeof is no longer safe](http://es-discourse.com/t/why-typeof-is-no-longer-safe/15))를 알고있는 것이 중요합니다. @@ -1164,7 +1164,7 @@ var declaredButNotAssigned = true; } - // 인터프린터는 변수 선언을 Scope의 시작 부분에 Hoist합니다. + // 인터프린터는 변수 선언을 범위(Scope)의 시작부분에 Hoist합니다. // 위의 예는 다음과 같이 다시 작성할 수 있습니다: function example() { let declaredButNotAssigned; @@ -1235,14 +1235,14 @@ - 더 자세한 정보는 [Ben Cherry](http://www.adequatelygood.com/)의 [JavaScript Scoping & Hoisting](http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting/)을 참조하세요. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Comparison Operators & Equality +## 조건식과 등가식(Comparison Operators & Equality) - [15.1](#15.1) `==`와 `!=` 보다는 `===`와 `!==`를 사용하세요. - - [15.2](#15.2) `if`와 같은 조건문은 `ToBoolean`방법에 의한 강제 형 변환으로 구분되고 항상 다음과 같은 간단한 규칙을 따릅니다: + - [15.2](#15.2) `if`와 같은 조건문은 `ToBoolean`방법에 의한 강제 형(Type) 변환으로 구분되고 항상 다음과 같은 간단한 규칙을 따릅니다: eslint rules: [`eqeqeq`](http://eslint.org/docs/rules/eqeqeq.html). @@ -1286,12 +1286,12 @@ - [15.4](#15.4) 더 자세한 내용은 여기를 참조하세요. [Truth Equality and JavaScript](http://javascriptweblog.wordpress.com/2011/02/07/truth-equality-and-javascript/#more-2108) by Angus Croll. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Blocks +## 블록(Blocks) - - [16.1](#16.1) 여러 줄의 블록은 중괄호를 사용합니다. + - [16.1](#16.1) 여러 줄의 블록은 중괄호`{}`를 사용합니다. ```javascript // bad @@ -1315,7 +1315,7 @@ } ``` - - [16.2](#16.2) 여러 블록에 걸친 `if`와 `else`를 사용하는 경우, `else`는 `if`블록의 끝 중괄호와 같은 행에 두세요. + - [16.2](#16.2) 여러 블록에 걸친 `if`와 `else`를 사용하는 경우, `else`는 `if`블록의 끝 중괄호`{}`와 같은 행에 두세요. eslint rules: [`brace-style`](http://eslint.org/docs/rules/brace-style.html). @@ -1339,10 +1339,10 @@ ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Comments +## 주석(Comments) - [17.1](#17.1) 여러 줄의 주석에는 `/** ... */`를 사용하세요. 그 안에는 설명과 모든 매개변수와 반환 값에 대한 형식과 값을 표기합니다. @@ -1442,10 +1442,10 @@ } ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Whitespace +## 공백(Whitespace) - [18.1](#18.1) 탭에 공백 2개를 설정하세요. @@ -1468,7 +1468,7 @@ } ``` - - [18.2](#18.2) 중괄호 앞에 공백을 넣어주세요. + - [18.2](#18.2) 중괄호`{}` 앞에 공백을 넣어주세요. eslint rules: [`space-before-blocks`](http://eslint.org/docs/rules/space-before-blocks.html). @@ -1496,7 +1496,7 @@ }); ``` - - [18.3](#18.3) 제어 구문(`if`, `while` 등)의 괄호 앞에 공백을 넣어주세요. 함수 선언과 함수 호출시 인수 목록 앞에는 공백을 넣지 않습니다. + - [18.3](#18.3) 제어 구문(`if`, `while` 등)의 괄호`()` 앞에 공백을 넣어주세요. 함수 선언과 함수 호출시 인수 목록 앞에는 공백을 넣지 않습니다. eslint rules: [`space-after-keywords`](http://eslint.org/docs/rules/space-after-keywords.html), [`space-before-keywords`](http://eslint.org/docs/rules/space-before-keywords.html). @@ -1558,7 +1558,7 @@ })(this);↵ ``` - - [18.6](#18.6) 메소드 체인이 길어지는 경우 적절히 들여쓰기(indentation) 하세요. 행이 메소드 호출이 아닌 새로운 문장임을 강조하기 위해 선두에 점을 배치하세요. + - [18.6](#18.6) 메소드 체인이 길어지는 경우 적절히 들여쓰기(indentation) 하세요. 행이 메소드 호출이 아닌 새로운 문장임을 강조하기 위해 선두에 점`.`을 배치하세요. ```javascript // bad @@ -1688,7 +1688,7 @@ } ``` - - [18.9](#18.9) 괄호 안에 공백을 추가하지 않습니다. + - [18.9](#18.9) 괄호`()` 안에 공백을 추가하지 않습니다. eslint rules: [`space-in-parens`](http://eslint.org/docs/rules/space-in-parens.html). @@ -1714,7 +1714,7 @@ } ``` - - [18.10](#18.10) 대괄호 안에 공백을 추가하지 않습니다. + - [18.10](#18.10) 대괄호`[]` 안에 공백을 추가하지 않습니다. eslint rules: [`array-bracket-spacing`](http://eslint.org/docs/rules/array-bracket-spacing.html). @@ -1728,7 +1728,7 @@ console.log(foo[0]); ``` - - [18.11](#18.11) 중괄호 안에 공백을 추가하지 않습니다. + - [18.11](#18.11) 중괄호`{}` 안에 공백을 추가하지 않습니다. eslint rules: [`object-curly-spacing`](http://eslint.org/docs/rules/object-curly-spacing.html). @@ -1767,9 +1767,9 @@ .fail(() => console.log('You have failed this city.')); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Commas +## 쉼표(Commas) - [19.1](#19.1) 쉼표로 시작: **제발 그만하세요.** @@ -1811,7 +1811,7 @@ eslint rules: [`comma-dangle`](http://eslint.org/docs/rules/comma-dangle.html). - > 왜죠? 이것은 깨끗한 git의 차이로 이어집니다. 또한 Babel관 같은 트랜스 컴파일러는 끝에 불필요한 쉼표를 알아서 제거합니다. 이것은 기존 브라우저에서 [불필요한 쉼표 문제](es5/README.md#commas)를 걱정할 필요가 없다는 것을 의미합니다. + > 왜죠? 이것은 git의 diff를 깨끗하게 합니다. 또한 Babel과 같은 트랜스 컴파일러는 끝에 불필요한 쉼표를 알아서 제거합니다. 이것은 기존 브라우저에서 [불필요한 쉼표 문제](es5/README.md#commas)를 걱정할 필요가 없다는 것을 의미합니다. ```javascript // bad - git diff without trailing comma @@ -1852,10 +1852,10 @@ ]; ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Semicolons +## 세미콜론(Semicolons) - [20.1](#20.1) **물론 사용합시다.** @@ -1883,12 +1883,12 @@ [Read more](http://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214%237365214). -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Type Casting & Coercion +## 형변환과 강제(Type Casting & Coercion) - - [21.1](#21.1) 문장의 시작 부분에서 형을 강제합니다. + - [21.1](#21.1) 문장의 시작 부분에서 형(Type)을 강제합니다. - [21.2](#21.2) String: ```javascript @@ -1901,7 +1901,7 @@ const totalScore = String(this.reviewScore); ``` - - [21.3](#21.3) Number: `Number`로 형 변환하려면 `parseInt`를 사용하세요. 항상 형변환을 위한 기수(radix)를 인수로 전달합니다. + - [21.3](#21.3) Number: `Number`형으로 변환하려면 `parseInt`를 사용하세요. 항상 형변환을 위한 기수(radix)를 인수로 전달합니다. eslint rules: [`radix`](http://eslint.org/docs/rules/radix). @@ -1962,10 +1962,10 @@ const hasAge = !!age; ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Naming Conventions +## 명명 규칙(Naming Conventions) - [22.1](#22.1) 하나의 문자로 구성된 이름은 피하세요. 이름에서 의도를 읽을 수 있도록 해야 합니다. @@ -2033,7 +2033,7 @@ this._firstName = 'Panda'; ``` - - [22.5](#22.5) `this`에 대한 참조를 저장하지 않습니다. Arrow 함수 또는 Function#bind를 사용하세요. + - [22.5](#22.5) `this`에 대한 참조를 저장하지 않습니다. 애로우 함수 또는 Function#bind를 사용하세요. ```javascript // bad @@ -2060,7 +2060,7 @@ } ``` - - [22.6](#22.6) 파일을 하나의 클래스로 export 할 경우 파일 이름은 클래스 이름과 정확하게 일치해야 합니다. + - [22.6](#22.6) 파일을 하나의 클래스로 추출(Export)할 경우 파일 이름은 클래스 이름과 정확하게 일치해야 합니다. ```javascript // file contents @@ -2089,7 +2089,7 @@ export default makeStyleGuide; ``` - - [22.8](#22.8) 싱글톤(singleton) / function library / 단순한 객체(bare object)를 export하는 경우, PascalCase(대문자로 시작)를 사용하세요. + - [22.8](#22.8) 싱글톤(singleton) / 함수 라이브러리(function library) / 단순한 객체(bare object)를 추출하는 경우, PascalCase(대문자로 시작)를 사용하세요. ```javascript const AirbnbStyleGuide = { @@ -2101,10 +2101,10 @@ ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Accessors +## 액세서(Accessors) - [23.1](#23.1) 속성에 대한 접근자(Accessor) 함수는 필요하지 않습니다. - [23.2](#23.2) 접근자 함수가 필요한 경우 `getVal()`과 `setVal('hello')`로 하세요. @@ -2137,7 +2137,7 @@ } ``` - - [23.4](#23.4) 일관된 것이라면, `get()`과 `set()` 함수를 만들수 있습니다. + - [23.4](#23.4) 일관된다면, `get()`과 `set()` 함수를 작성해도 좋습니다. ```javascript class Jedi { @@ -2156,10 +2156,10 @@ } ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Events +## 이벤트(Events) - [24.1](#24.1) (DOM 이벤트, Backbone 이벤트)처럼 자신의 이벤트 페이로드 값을 전달하려면 원시값 대신 해시인수를 전달합니다. 이렇게 하면 나중에 개발자가 이벤트에 관련된 모든 핸들러를 찾아 업데이트하지 않고 이벤트 페이로드에 값을 추가할 수 있습니다. 예를 들면: @@ -2174,7 +2174,7 @@ }); ``` - 이쪽이 더 선호됨: + 보다 아래쪽이 더 선호됨: ```javascript // good @@ -2187,12 +2187,12 @@ }); ``` - **[⬆ back to top](#table-of-contents)** + **[⬆ 목록으로](#목차)** ## jQuery - - [25.1](#25.1) jQuery 개체 변수 앞에 `$`를 부여합니다. + - [25.1](#25.1) jQuery 객체 변수 앞에는 `$`로 구분합니다. ```javascript // bad @@ -2252,36 +2252,36 @@ $sidebar.find('ul').hide(); ``` -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## ECMAScript 5 Compatibility +## ECMAScript 5 호환성(ECMAScript 5 Compatibility) - [26.1](#26.1) [Kangax](https://twitter.com/kangax/)의 ES5 [호환성 표](http://kangax.github.io/es5-compat-table/)를 참조하세요. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## ECMAScript 6 Styles +## ECMAScript 6 스타일(ECMAScript 6 Styles) - [27.1](#27.1) 이것은 ES6 명세 링크를 모아 놓은 것입니다. -1. [Arrow Functions](#arrow-functions) -1. [Classes](#constructors) -1. [Object Shorthand](#es6-object-shorthand) -1. [Object Concise](#es6-object-concise) -1. [Object Computed Properties](#es6-computed-properties) -1. [Template Strings](#es6-template-literals) -1. [Destructuring](#destructuring) -1. [Default Parameters](#es6-default-parameters) -1. [Rest](#es6-rest) -1. [Array Spreads](#es6-array-spreads) -1. [Let and Const](#references) -1. [Iterators and Generators](#iterators-and-generators) -1. [Modules](#modules) +1. [애로우 함수(Arrow Functions)](#애로우-함수arrow-functions) +1. [클래스(Classes)](#생성자constructors) +1. [객체 단축 구문(Object Shorthand)](#es6-object-shorthand) +1. [속성 단축 구문(Object Concise)](#es6-object-concise) +1. [계산된 속성 이름(Object Computed Properties)](#es6-computed-properties) +1. [템플릿 문자열(Template Strings)](#es6-template-literals) +1. [구조화 대입(Destructuring)](#구조화-대입destructuring) +1. [기본 매개변수(Default Parameters)](#es6-default-parameters) +1. [레스트(Rest)](#es6-rest) +1. [배열 스프레드(Array Spreads)](#es6-array-spreads) +1. [Let과 Const(Let and Const)](#참조references) +1. [이터레이터와 제너레이터(Iterators and Generators)](#이터레이터와-제너레이터iterators-and-generators) +1. [모듈(Modules)](#모듈modules) -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Testing +## 테스팅(Testing) - [28.1](#28.1) **물론 해야 합니다.** @@ -2294,15 +2294,15 @@ - [28.2](#28.2) **물론 심각하게**: - 대부분 테스트 프레임워크를 이용하여 테스트를 작성합니다. - 작은 기능의 함수를 자주 쓰고 이변이 발생할 수 있는 부분을 최소화하기 위해 노력합니다. - - stubs와 mocks에 주의하세요. 이 것들로 인해 테스트가 부서지기 쉽습니다. - - Airbnb는 [`mocha`](https://www.npmjs.com/package/mocha)를 이용하고 있습니다. 작게 분할된 개별 모듈은 [`tape`](https://www.npmjs.com/package/tape) 사용합니다. - - 현실에서 도달할 필요가 없어도 100%의 테스트 커버리지를 목표로하는 것이 좋습니다. - - 버그를 수정할 때 마다 _회귀 테스트를 씁니다_. 회귀 테스트 없는 버그 수정은 나중에 반드시 다시 깨어날 것입니다. + - stubs와 mocks에 주의하세요. 이 것들로 인해 테스트가 깨지기 쉽습니다. + - Airbnb는 [`mocha`](https://www.npmjs.com/package/mocha)를 이용하고 있습니다. 작게 분할된 개별 모듈은 [`tape`](https://www.npmjs.com/package/tape)을 사용합니다. + - 지금은 달성할 필요가 없어도 100%의 테스트 커버리지를 목표로하는 것이 좋습니다. + - 버그를 수정할 때 마다 _회귀 테스트를 씁니다_. 회귀 테스트 없는 버그 수정은 나중에 반드시 다시 출현할 것입니다. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Performance +## 성능(Performance) - [On Layout & Web Performance](http://www.kellegous.com/j/2013/01/26/layout-performance/) - [String vs Array Concat](http://jsperf.com/string-vs-array-concat/2) @@ -2313,10 +2313,10 @@ - [Long String Concatenation](http://jsperf.com/ya-string-concat) - Loading... -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Resources +## 참고(Resources) **Learning ES6** @@ -2395,9 +2395,9 @@ - [JavaScript Jabber](https://devchat.tv/js-jabber/) -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## In the Wild +## 기여(In the Wild) 이 것은 본 스타일 가이드를 사용하는 조직의 목록입니다. 이 목록에 추가하고 싶다면, pull request를 하거나 issue를 통해 알려주세요. @@ -2462,9 +2462,9 @@ - **Zillow**: [zillow/javascript](https://github.com/zillow/javascript) - **ZocDoc**: [ZocDoc/javascript](https://github.com/ZocDoc/javascript) -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Translation +## 번역(Translation) 이 스타일 가이드는 다른 언어로도 이용할 수 있습니다. @@ -2483,20 +2483,20 @@ - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [paolocarrasco/javascript-style-guide](https://github.com/paolocarrasco/javascript-style-guide) - ![th](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Thailand.png) **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide) -## The JavaScript Style Guide Guide +## 자바스크립트 스타일 가이드 안내서(The JavaScript Style Guide Guide) - [Reference](https://github.com/airbnb/javascript/wiki/The-JavaScript-Style-Guide-Guide) -## Chat With Us About JavaScript +## 자바스크립트 스타일 가이드 채팅(Chat With Us About JavaScript) - Find us on [gitter](https://gitter.im/airbnb/javascript). -## Contributors +## 참여자(Contributors) - [View Contributors](https://github.com/airbnb/javascript/graphs/contributors) -## License +## 라이센스(License) (The MIT License) @@ -2521,9 +2521,9 @@ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** -## Amendments +## 조항(Amendments) We encourage you to fork this guide and change the rules to fit your team's style guide. Below, you may list some amendments to the style guide. This allows you to periodically update your style guide without having to deal with merge conflicts. From 434f2c5fee42b371b1c249639f9f20dbf00eede8 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 23:07:13 +0900 Subject: [PATCH 10/13] Update README.md --- react/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react/README.md b/react/README.md index 0263182232..5fa2aa5337 100644 --- a/react/README.md +++ b/react/README.md @@ -2,9 +2,9 @@ *React와 JSX에 대한 가장 합리적인 접근 방식* -## Table of Contents +## 목차 - 1. [기본 규칙(Basic Rules)](#기본-규칙basic-rules) + 1. [기본 규칙(Basic Rules)]차기본-규칙basic-rules) 1. [클래스 대 `React.createClass`(Class vs `React.createClass`)](#클래스-대-reactcreateclassclass-vs-reactcreateclass) 1. [명명(Naming)](#명명naming) 1. [선언(Declaration)](#선언declaration) @@ -410,4 +410,4 @@ eslint rules: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md). -**[⬆ back to top](#table-of-contents)** +**[⬆ 목록으로](#목차)** From a40073eec78f5ff2cdb0a216280eade8578b6391 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Mon, 11 Jan 2016 23:07:52 +0900 Subject: [PATCH 11/13] Update README.md --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 5fa2aa5337..028ecd557c 100644 --- a/react/README.md +++ b/react/README.md @@ -4,7 +4,7 @@ ## 목차 - 1. [기본 규칙(Basic Rules)]차기본-규칙basic-rules) + 1. [기본 규칙(Basic Rules)](#기본-규칙basic-rules) 1. [클래스 대 `React.createClass`(Class vs `React.createClass`)](#클래스-대-reactcreateclassclass-vs-reactcreateclass) 1. [명명(Naming)](#명명naming) 1. [선언(Declaration)](#선언declaration) From 54c689d8d8551a3f0a3e5244f4af85fa95cdbbba Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Tue, 12 Jan 2016 15:52:27 +0900 Subject: [PATCH 12/13] Update README.md --- react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/README.md b/react/README.md index 028ecd557c..c0ab0d6d0a 100644 --- a/react/README.md +++ b/react/README.md @@ -131,7 +131,7 @@ - JSX 속성(attributes)에는 항상 큰 따옴표(`"`)를 사용합니다. 그러나 다른 모든 자바스크립트에는 작은 따옴표(single quotes)를 사용합니다. - > 왜죠? JSX 속성(attributes)은 [따옴표(quotes)의 탈출(escaped)을 포함할 수 없습니다](http://eslint.org/docs/rules/jsx-quotes). 그래서 큰 따옴표를 이용하여 `"don't"`과 같은 접속사를 쉽게 입력할 수 있습니다. + > 왜죠? JSX 속성(attributes)은 [따옴표(quotes)의 탈출(escaped)을 포함할 수 없습니다](http://eslint.org/docs/rules/jsx-quotes). 그래서 큰 따옴표를 이용하여 `"don't"`와 같은 접속사를 쉽게 입력할 수 있습니다. > 일반적으로 HTML 속성(attributes)에는 작은 따옴표 대신 큰 따옴표를 사용합니다. 그래서 JSX 속성역시 동일한 규칙이 적용됩니다. eslint rules: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes). From 0227bf1802414550d898839bc68cff4376506cc1 Mon Sep 17 00:00:00 2001 From: Joon Kyoung Date: Tue, 12 Jan 2016 16:59:33 +0900 Subject: [PATCH 13/13] Update README.md --- react/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/react/README.md b/react/README.md index c0ab0d6d0a..d06b34e0be 100644 --- a/react/README.md +++ b/react/README.md @@ -15,7 +15,7 @@ 1. [괄호(Parentheses)](#괄호parentheses) 1. [태그(Tags)](#태그tags) 1. [메소드(Methods)](#메소드methods) - 1. [오더링(Ordering)](#오더링ordering) + 1. [호출순서(Ordering)](#호출순서ordering) 1. [`isMounted`](#ismounted) ## 기본 규칙(Basic Rules) @@ -324,9 +324,9 @@ } ``` -## 오더링(Ordering) +## 호출순서(Ordering) - - `class extends React.Component`의 오더링(Ordering): + - `class extends React.Component`의 호출순서(Ordering): 1. `constructor` 1. 추가적인(optional) `static` 메소드 @@ -374,7 +374,7 @@ export default Link; ``` - - `React.createClass`의 오더링(Ordering): + - `React.createClass`의 호출순서(Ordering): 1. `displayName` 1. `propTypes`