[Airbnb JS Style Guide] 모듈 (Modules)

우아한테크코스의 자바스크립트 스타일 가이드는 Airbnb 자바스크립트 스타일 가이드를 기준으로 하기에

Airbnb 자바스크립트 스타일 가이드 기준을 보고 이해를 바탕으로 필사하였으며 경중에따라 가감하였습니다.

 

 

처음 프로젝트 시작하기전 module.exports를 오랜만에봐서 정말 생소했다. 

원래 import / default export 만써서 그런 것 같다.  

그래서 이틀전에 module에 대해 다시한번 정리하니 확실히 이해가 잘 되었고 

그 이해한 상태에서 style guide를 보니 훨씬 편했다. 

Module 정리

 

 

모듈 (Modules)

 

1) 항상 모듈(import/ export)을 비표준 모듈 체계 대신 사용하세요. 언제든 선호하는 모듈 시스템으로 트랜스파일할 수 있습니다. 

why? 모듈은 미래입니다. 지금 이 미래를 사용해 봅시다.

// bad
const AirbnbStyleGuide = require('./AirbnbStyleGuide');
module.exports = AirbnbStyleGuide.es6;

// ok
import AirbnbStyleGuide from './AirbnbStyleGuide';
export default AirbnbStyleGuide.es6;

// best
import { es6 } from './AirbnbStyleGuide';
export default es6;

 

2) Do not use wildcard import

why? This makes sure you have a single default export 

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide';

// good
import AirbnbStyleGuide from './AirbnbStyleGuide';

 

3) And do not export directly from an import.

why? Although the one-liner is concise, having one clear way to import and one clear way to export makes things consistent

 

// bad
// filename es6.js
export { es6 as default } from './AirbnbStyleGuide';

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide';
export default es6;

 

4) Only import from a path in one place.

why? Having multiple lines that import from the same path can make code harder to maintain.

// bad
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

// good
import foo, { named1, named2 } from 'foo';

// good
import foo, {
  named1,
  named2,
} from 'foo';

 

5) 가변 바인딩을 export 하지 마세요 

why? 변조는 일반적으로 피해야 하지만, 가변 바인딩을 export할 때는 특히 그렇습니다. 이 기술이 어떤 특별한 상황에 필요할 수도 있지만, 일반적으로는 상수 참조만 export되어야 합니다. 

// bad
let foo = 3;
export { foo };

// good
const foo = 3;
export { foo };

 

6) 한가지만 export하는 모듈에서는 이름 붙여진 export보다는 default export를 사용하세요 .

why? 하나만 export하는 파일의 가독성과 유지보수성이 더 좋기 때문입니다.

// bad
export function foo() {}

// good
export default function foo() {}

 

7) 모든 import 구문을 다른 구문들 위에 두세요

why? import 구문은 호이스트되기 때문에 이것을 가장 위에 두면 예상치 못한 결과를 막을 수 있습니다.

// bad
import foo from 'foo';
foo.init();

import bar from 'bar';

// good
import foo from 'foo';
import bar from 'bar';

foo.init();

 

8) 여러 줄에 걸친 import는 여러 줄의 배열이나 객체 리터럴처럼 들여쓰기하세요

why? 스타일 가이드에 있는 다른 모든 중괄호 블록들 처럼 중괄호는 같은 들여쓰기 규칙을 따릅니다. 콤마가 그렇듯이 말이죠.

// bad
import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path';

// good
import {
  longNameA,
  longNameB,
  longNameC,
  longNameD,
  longNameE,
} from 'path';

 

9) 모듈 import 구문에서 Webpack loader 구문을 사용하지 마세요

why? import에서 Webpack 구문을 사용하면 이 코드가 모듈 번들러에 연결되기 때문입니다. loader 구문은 webpack.config.js에서 사용하세요.

// bad
import fooSass from 'css!sass!foo.scss';
import barCss from 'style!css!bar.css';

// good
import fooSass from 'foo.scss';
import barCss from 'bar.css';

 

 

10) 자바스크립트 파일 확장자를 명시하지 마세요

why? 확장자를 명시하면 모든 소비자에서 import하는 모듈의 세부적 구현을 부적절하게 하드코딩하고, 리팩토링을 막게 됩니다.

// bad
import foo from './foo.js';
import bar from './bar.jsx';
import baz from './baz/index.jsx';

// good
import foo from './foo';
import bar from './bar';
import baz from './baz';