[ESLint&airbnb] 기억해 둘 스타일 가드

[리액트 사용시]

 

1.  Prevent missing React when using JSX

'React' must be in scope when using JSX.

JSX 표현식을 사용하는 모든 파일 최상단에 import React from 'react'; 를 써주자

React 를 글로벌 변수에 등록해 사용한다면 무시해도 됨.

하지만 그렇지 않을때는 파일 내에서 직접적으로 React 객체를 사용하지 않는다 해도 명시해줘야 함.

자세한 내용은 문서 참고 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md

yannickcr/eslint-plugin-react

 

 

2. Prevent using string references

ref 사용시 문자열 말고 callback function으로 주자

// bad
<Foo
  ref="myRef"
/>

// good
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

자세한 내용은 문서 참고 github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md

yannickcr/eslint-plugin-react

 

 

3. click-events-have-key-events

인터렉티브한 태그(button 태그 등)가 아닌 정적 태그에 onClick 이벤트를 바인딩하려면

aria-hidden="true"로 줘서 화면에서 보이지 않게 하거나, 하나 이상의 키보드 리스너(onKeyUp, onKeyDown, onKeyPres)를 함께 등록해줘야 한다.

자세한 내용은 문서 참고 github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

jsx-eslint/eslint-plugin-jsx-a11y

 

[네이밍 규칙]

카카오 인턴 지원 준비 중 발견한 글을 계기로 최신 네이밍 규칙을 찾아보게 되었다. 

실제 워다타 프로젝트를 진행하며 발견한(elsint가 수정하라 요구한) 것들은 아니지만 이번 계기로 airbnb style guide를 둘러보다 놀란 것들 정리함.

올드한 컨벤션에 갇히지 말자!! 이하 내용에 대한 자세한 내용은 문서 참고

github.com/airbnb/javascript#naming--leading-underscore

airbnb/javascript

 

 

1.  Do not use trailing or leading underscores

프라이빗한 변수는 이름 앞에 언더라인 _ 을 붙여주는 게 예의라고 생각했으나 JS는 아님! 왜?

사실상 JS에서 private 한 property나 methods가 없어요. 개념적 프라이빗 표기가 개발자들이 실제로 코드를 해석하는 데 오해를 불러일으킨다면... 코드가 무너지고 가정이 무너지고 사회가 무너지고 

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';
this._firstName = 'Panda';

// good
this.firstName = 'Panda';

// good, in environments where WeakMaps are available
// see https://kangax.github.io/compat-table/es6/#test-WeakMap
const firstNames = new WeakMap();
firstNames.set(this, 'Panda');

 

2. Don’t save references to this. Use arrow functions or bind.

this를 저장하지 마세요. 전역이 아닌 this를 매핑하고 싶다면 bind 또는 arrow function이 있습니다!

arrow function을 애용하기 때문에 this를 임의로 저장하는 방식을 현재 사용하고 있진 않지만 이전에 고전적인 방식으로 플젝 할 때는 bind대신 THIS = this로 많이 썼다; 필요하면 사용해도 되는 줄 알고 무분별하게 썼었는데... arrow가 싫다면 차라리 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);
  };
}

 

3. A base filename should exactly match the name of its default export.

파일명과 export 명과 import 할 떄 이름의 스타일을 섞지 말아라. PascalCase, camelCase, snake_case 막 섞어 쓰면 혼난다. 

이건 항상 주의하고 있는 내용이긴 하지만 snake는 몰라도 Pascal이나 camel은 생각없이 작성하다보면 섞일 때가 종종 있다. 그러면 안돼안돼

 

 

사실 네이밍 규칙은 아주 기초적인 부분이다.

그러나 모든 코드의 크랙킹은 그 기초가 흔들리는 것에서부터 발생한다. 올드한 컨벤션을 정석이라 믿고 있었던 내용들, 다시 한 번 강조한내용들. 잊지 말자.

 

 

[기타 기본적인 것들]

camel case를 사용하자

className도 첫글자 소문자로... 왜 다 대문자로 했지?? 바꿔야 함