Node 프로그래밍 시 유의사항 ver.18 명명규칙 (Naming Conventions) & 접근자 (Accessors) & 이벤트 (Events)

// 출처 https://github.com/ParkSB/javascript-style-guide#%EB%AA%A9%EC%B0%A8

// 명명규칙 (Naming Conventions) & 접근자 (Accessors) & 이벤트 (Events)

// 1 한 문자로 된 이름은 피하세요. 이름으로부터 의도가 읽혀질 수 있게 해주세요. eslint: id-length

// 2 객체, 함수, 인스턴스에는 캐멀케이스(camelCase)를 사용하세요. eslint: camelcase

// 3 클래스나 생성자에는 파스칼케이스(PascalCase)를 사용하세요. eslint: new-cap

// 4 언더스코어를 사용하지 마세요. eslint: no-underscore-dangle

// 5 참조를 this에 저장하지 마세요. 화살표 함수나 Function#bind를 사용하세요.

// bad

function foo() {

const self = this;

return function () {

console.log(self);

};

}

// bad

function foo() {

const that = this;

return function () {

console.log(that);

};

}

// good

function foo() {

return () => {

console.log(this);

};

}

// 6 파일 이름은 default export의 이름과 일치해야 합니다.

// file 1 contents

class CheckBox {

// ...

}

export default CheckBox;

// file 2 contents

export default function fortyTwo() { return 42; }

// file 3 contents

export default function insideDirectory() {}

// in some other file

// bad

import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename

import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export

import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export

// bad

import CheckBox from './check_box'; // PascalCase import/export, snake_case filename

import forty_two from './forty_two'; // snake_case import/filename, camelCase export

import inside_directory from './inside_directory'; // snake_case import, camelCase export

import index from './inside_directory/index'; // requiring the index file explicitly

import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly

// good

import CheckBox from './CheckBox'; // PascalCase export/import/filename

import fortyTwo from './fortyTwo'; // camelCase export/import/filename

import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"

// ^ supports both insideDirectory.js and insideDirectory/index.js

// 7 함수를 export-default할 때 캐멀케이스(camelCase)를 사용하세요.

파일 이름은 함수 이름과 같아야 합니다.

function makeStyleGuide() {

// ...

}

export default makeStyleGuide;

// 8 생성자 / 클래스 / 싱글톤 / 함수 라이브러리 / 단순 객체를

export할 때 파스칼케이스(PascalCase)를 사용하세요.

const AirbnbStyleGuide = {

es6: {

},

};

export default AirbnbStyleGuide;

// 9 두문자어와 이니셜은 모두 대문자이거나 모두 소문자이어야 합니다.

// 왜? 이름은 가독성을 위한 것이지 컴퓨터 알고리즘을 위한 것이 아니기 때문입니다.

// bad

import SmsContainer from './containers/SmsContainer';

// bad

const HttpRequests = [

// ...

];

// good

import SMSContainer from './containers/SMSContainer';

// good

const HTTPRequests = [

// ...

];

// also good

const httpRequests = [

// ...

];

// best

import TextMessageContainer from './containers/TextMessageContainer';

// best

const requests = [

// ...

];

// // 10 상수 이름을 대문자로 짓는 것은 해당 상수가

// (1) 내보내기 될 때,

// (2) const 타입일 때 (값이 재할당되지 못할 때),

// (3) 그 상수와 상수가 중첩된 속성이 절대 변하지 않는다는 것을 신뢰할 수 있을 때만 하세요.

// 왜? 이것은 변수가 영원히 변하지 않는다는 것을 확신할 수 없을 때 도움을 주기 위한

추가적인 도구입니다. 대문자 변수는 변수와 변수의 속성이 변하지 않는다는 것을 프로그래머에게 알려줍니다.

// 모든 const 변수 이름을 대문자로 짓나요? - 이것은 필수사항이 아니며,

파일 내 상수 이름을 꼭 대문자로 지을 필요는 없습니다. 하지만 내보내기되는

상수 이름은 대문자로 지어야 합니다.

// 내보내기 되는 객체 이름을 대문자로 짓나요? - 최상위 수준의 내보내기를 할 때

대문자로 이름짓고 (예시: EXPORTED_OBJECT.key) 모든 중첩된 속성이 변경되지 않도록 유지합니다.

// bad

const PRIVATE_VARIABLE = 'should not be unnecessarily uppercased within a file';

// bad

export const THING_TO_BE_CHANGED = 'should obviously not be uppercased';

// bad

export let REASSIGNABLE_VARIABLE = 'do not use let with uppercase variables';

// ---

// allowed but does not supply semantic value

export const apiKey = 'SOMEKEY';

// better in most cases

export const API_KEY = 'SOMEKEY';

// ---

// bad - unnecessarily uppercases key while adding no semantic value

export const MAPPING = {

KEY: 'value'

};

// good

export const MAPPING = {

key: 'value'

};

// 11 속성을 위한 접근자 함수는 필수가 아닙니다.

// 12 자바스크립트 getters/setters를 사용하지 마세요.

// 예기치못한 부작용를 일으키고 테스트와 유지보수를 어렵게 만듭니다.

접근자 함수를 만들고 싶다면 대신, getVal()과 setVal('hello')를 사용하세요.

// bad

class Dragon {

get age() {

// ...

}

set age(value) {

// ...

}

}

// good

class Dragon {

getAge() {

// ...

}

setAge(value) {

// ...

}

}

// 13 속성이나 메소드가 boolean이라면, isVal()이나 hasVal()을 사용하세요.

// bad

if (!dragon.age()) {

return false;

}

// good

if (!dragon.hasAge()) {

return false;

}

// 14 get()과 set() 함수를 만들되, 일관성있게 만드세요.

class Jedi {

constructor(options = {}) {

const lightsaber = options.lightsaber || 'blue';

this.set('lightsaber', lightsaber);

}

set(key, val) {

this[key] = val;

}

get(key) {

return this[key];

}

}

// 15 (DOM이벤트나 Backbone 이벤트와 같은) 이벤트로 payload의 값을 넘길 경우

raw값 보다는 해시값을 넘겨주세요. 이렇게하면 이후 기여자가 이벤트에 관련한

모든 핸들러를 찾아서 바꾸는 대신 이벤트 payload에 값을 추가할 수 있습니다. 예를 들면 이렇게요:

// bad

$(this).trigger('listingUpdated', listing.id);

// ...

$(this).on('listingUpdated', (e, listingID) => {

// do something with listingID

});

// 이쪽이 더 좋습니다:

// good

$(this).trigger('listingUpdated', { listingID: listing.id });

// ...

$(this).on('listingUpdated', (e, data) => {

// do something with data.listingID

});