[번역] 구글의 javascript 스타일 가이드

in wdev •  7 years ago  (edited)

1_ouYvMzYuksK-IH1BPNKD0A.jpg

출처 : https://medium.freecodecamp.org/google-publishes-a-javascript-style-guide-here-are-some-key-lessons-1810b8ad050b

1. tab 대신에 space 를 사용

  • space 2칸을 추천함.

// bad
function foo() {
∙∙∙∙let name;
}

// bad
function bar() {
∙let name;
}

// good
function baz() {
∙∙let name;
}

2. 세미콜론은 필요


// bad
let luke = {}
let leia = {}
[luke, leia].forEach(jedi => jedi.father = 'vader')

// good
let luke = {};
let leia = {};
[luke, leia].forEach((jedi) => {
  jedi.father = 'vader';
});

3. ES6 모듈은 아직사용하지 말것

  • 내보내기(export) 및 가져오기(import) 키워드 사용금지
  • 표준화 된 이후 사용하기 바랍니다.

// Don't do this kind of thing yet:
//------ lib.js ------
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

4. 수평 정렬은 권장되지 않음 (금지는 아님)


// bad
{
  tiny:   42,  
  longer: 435, 
};

// good
{
  tiny: 42, 
  longer: 435,
};

5. var 는 더이상 사용하지 말것

  • 모든 지역 변수를 const 또는 let으로 선언하십시오.
  • 변수를 재 할당해야하는 경우가 아니면 const를 사용하십시오.
  • var 키워드는 사용하지 않아야합니다.

// bad
var example = 42;

// good
let example = 42;

6. 화살표함수(=>) 를 사용 바랍니다.

  • 화살표 함수는 간결한 구문을 제공하고 이에 대한 많은 어려움을 수정합니다.
  • 함수 키워드보다 화살표 함수를 선호합니다.
  • 특히 중첩 된 함수의 경우 유용합니다.

// bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

7. 연결 대신 템플릿 문자열 사용

  • 여러 문자열이 관련되어있는 경우 특히 복잡한 문자열 연결에 대해 템플릿 문자열 (`로 구분)을 사용하십시오.

// bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// good
function sayHi(name) {
  return `How are you, ${name}?`;
}

8. 긴 문자열에는 줄 연속을 사용하지 마십시오.

  • ES5에서는 이것을 허용하지만 슬래시 뒤에 공백이 오는 경우에는 까다로운 오류가 발생할 수 있습니다.

// bad (sorry, this doesn't show up well on mobile)
const longString = 'This is a very long string that \
    far exceeds the 80 column limit. It unfortunately \
    contains long stretches of spaces due to how the \
    continued lines are indented.';

// good
const longString = 'This is a very long string that ' + 
    'far exceeds the 80 column limit. It does not contain ' + 
    'long stretches of spaces since the concatenated ' +
    'strings are cleaner.';

9. for 반복문에서 “for… of” 는 선호 되는 타입입니다.

  • for ... in 루프는 객체에 더 좋았고
  • for ... 배열에 더 적합하다고 생각했습니다.

for ... of 더 알아보기


let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

10. eval 을 사용하지 마세요

  • eval 또는 Function (... 문자열) 생성자를 사용하지 마십시오 (코드 로더 제외).
  • 이러한 기능은 잠재적으로 위험하며 단순히 CSP 환경에서 작동하지 않습니다.

// bad
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
eval( 'var result = obj.' + propName );

// good
let obj = { a: 20, b: 30 };
let propName = getPropName();  // returns "a" or "b"
let result = obj[ propName ];  //  obj[ "a" ] is the same as obj.a 

11. 상수는 밑줄로 구분 된 ALL_UPPERCASE (대문자+언더스코어로만 구성) 로만 명명한다.


// bad
const number = 5;

// good
const NUMBER = 5;

12. 큰 따옴표가 아닌 작은 따옴표 사용

  • 팁 : 문자열에 작은 따옴표 문자가 포함되어 있으면 따옴표를 이스케이프하지 않아도되도록 템플릿 문자열을 사용하는 것이 좋습니다.

// bad
let directive = "No identification of self or mission."

// bad
let saying = 'Say it ain\u0027t so.';

// good
let directive = 'No identification of self or mission.';

// good
let saying = `Say it ain't so`;

마지막으로 ...

  • 이것들은 명령이 아닙니다. Google은 많은 기술 대기업 중 하나 일뿐입니다.
  • 개인적으로 Airbnb의 사양이 Google보다 더 매력적이라고 생각합니다.
  • 이러한 특정 규칙을 취하는건 모든 종류의 코드를 작성할 때 문체의 일관성을 염두에 두는 것이 중요합니다.
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

몇몇은 저도 좀 고쳐나가야겠군요. 감사합니다

넵, 저도 var 를 자주 쓰긴 했는데 이젠 안쓰려고여...

lambda function은 사용하고 싶어도 아직 눈에 안익어서 힘든... ㅠㅜ

lambda 를 모르면 간첩이 될지도 모릅니다.. ^^

쓰다보면 깔끔하고 이전보다 보기도 좋은거 같아요

Airbnb 는 React 하는 회사라 ES6 를 받아들이고 있지요.
Google 에서는 React 를 안쓸 것 같은데요... Angular 도 안쓴다는 소문이...
하지만 직원중에 누군가는 쓸것 같네요...

저도 전에 angularjs도 쓰다가 버전업 되면서 확 바뀌어서 -_-;
덮었던 기억이 ... 거기다 typescript 도 훅 치고 들어오고 아...

그래서 그냥 요즘은 springboot로 rest-api 만들고 vuejs 써서 call해서 쓰거나
아니면 nodejs에 express 써서 웹 후딱 구성하여 쓰긴하는데
( python 에 flask 는 python협업이 힘들어서 포기 ㅋ )

아직도 잘 모르겠네요, 웹

  ·  7 years ago (edited)

airbnb것도 궁금해지네요. var를 써도 괜찮은것이 아닌가 하는 생각땜에 마니 쓰게 됩니다 ㅎㅎ

함 찾아봐야 겠네요 ^^

템플릿 문자열 ;; 이걸 모르고있었네요. 감사합니다.

템플릿 문자열이 좋긴하죠 ^^

잘못 알고 있던 것들이 좀 있네요;;
좋은 정보 감사합니다.

네~~