9. Modules(JS style guide)

import/export > non-standard 모듈 시스템

---

Always use modules (import/export) over a non-standard module system. You can always transpile to your preferred module system.

• `import` `export` 를 쓰면 원하는 모듈시스템에 언제라도 옮겨서 트랜디한 스타일링을 할 수 있다.

// 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;

wildcard import X

---

Do not use wildcard imports.

• default Export 인지 named export 인지 확인하기 어려울 때가 있다. 주의해야 한다.

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

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

from 으로 Import 후 직접적인 export => X

---

And do not export directly from an import.

• 한줄짜리는 간결하지만 import 와 export 방법을 명확히 한가지로 해서 일관성을 갖는 것이 가능하다.

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

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

하나의 path : 하나의 import eslint: no-duplicate-imports

• 하나의 path 에서 여러개의 import 를 쓴다면 유지보수가 어렵다.

// 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';

mutable: export X eslint: import, no-mutable-exports

---

• 특수한 경우를 제외하고 상수 reference 만 export 한다.

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

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

모듈에 export 가 하나만 있을 때 : export default > named export import prefer-default-export

---

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

// bad
export function foo() {}

// good
export default function foo() {}

모든 import 는 non-import 명령문 위에 두기 eslint: import/first

---

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

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

import bar from 'bar';

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

foo.init();

여러줄의 imports : 들여쓰기(indent) eslint: object-curly-newline

---

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

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

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

import 문: Webpack loader 구문 X eslint: import/no-webpack-loader-syntax

---

• import 에서 webpack 구문을 사용하면 코드를 모듈 번들러에 연결된다.
• `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';

import/extensions : 자바스크립트 파일이름 extensions X(eslint: import/extensions)

---

• extensions 포함의 문제점, 확장자를 명시하면 리팩토링이 금지된다. 예를들어 , TODO .js -> .jsx .. 등 js 관련 확장자를 다 수정해 줘야하는 문제점이 있다.

// 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';