barrel를 사용하여 import 구문을 깨끗하게 만들자!

 

Barrel

배럴이란 개념을 사용하면 import 구문을 축약함으로써, 코드를 더 깨끗하게 유지보수할 수 있습니다.

이것을 요약하자면 여러 모듈을 묶어서 다시 export하는 모듈로 정의할 수 있는데,

 

아래 코드처럼 하지말고, ./impl/에 {a, b, c}를 export하는 배럴을 두면 한줄로 축약할 수 있습니다.

// ./src/app.ts
import { a } from "./impl/a";
import { b } from "./impl/b";
import { c } from "./impl/c";
console.log(a, b, c);

 

아래처럼요.

// ./src/app.ts
import { a, b, c } from "./impl/barrel";
console.log(a, b, c);

 

물론 아래처럼 배럴을 정의해야하는 비용은 들겠지만,

각 파일의 import 문을 짧게 만들 수 있으므로, 오히려 이득이 더 큽니다.

// ./src/impl/barrel.ts
export * from "./impl/a";
export * from "./impl/b";
export * from "./impl/c";

 

이 단계가 완료되면, 폴더 계층은 아래처럼 되겠네요.

.
└── src/
    ├── app.ts
    └── impl/
        ├── a.ts
        ├── b.ts
        ├── c.ts
        └── barrel.ts

 

 

index.ts(js)

Node.js가 index.ts(js)를 다루는 규칙을 살펴보면 흥미로운 것이 하나 있습니다.

아래의 항목은 전부 같은 파일을 가르키기 때문이죠.

• src/core/index.ts(js)
• src/core/index
• src/core/
• src/core   (src/core.ts가 없는 경우에만 해당)

 

즉, index.ts파일을 배럴로 사용하면, 좀 더 직관적으로 모듈을 불러올 수 있습니다.

// ./src/app.ts
import { a, b, c } from "./impl"
console.log(a, b, c);

 

최종적인 폴더 계층은 다음과 같습니다.

.
└── src/
    ├── app.ts
    └── impl/
        ├── a.ts
        ├── b.ts
        ├── c.ts
        └── index.ts (as barrel)