배럴 파일(Barrel File) 정리

목차 (OPEN)

• 🟥 배럴 파일이란
• 🟧 배럴 파일을 사용하는 이유

 

 

 

🟥 배럴 파일이란

배럴 파일이란 여러 개의 모듈을 한 곳에 모아서 다시 export 하는 파일을 말한다.

즉, 각각의 모듈을 개별적으로 import 하지 않고,

하나의 진입점(entry point)에서 모아서 불러올 수 있게 해주는 것이다.

(보통 파일 이름으로는 index.ts 을 많이 사용한다고 한다.)

 

 

내 경우에는 원래 아래와 같이 chat.ts 파일 안에 말풍선과 관련된 토큰들이 정의되어 있었다.

// src/styles/tokens/chat.ts

export const bubblePalette = {
  bot: { bg: 'bg-blue-50', border: 'border-blue-600', text: 'text-black' },
  me: { bg: 'bg-white', border: 'border-blue-600', text: 'text-black' },
} as const;

export const bubbleMaxW = {
  base: 'max-w-[82%]',
  sm: 'sm:max-w-[75%]',
  md: 'md:max-w-[65%]',
  lg: 'lg:max-w-[55%]',
} as const;

export const bubbleWidthClasses =
  `${bubbleMaxW.base} ${bubbleMaxW.sm} ${bubbleMaxW.md} ${bubbleMaxW.lg}` as const;

 

그리고 같은 디렉토리에 index.ts 를 만들어서 아래와 같이 배럴 파일을 작성해보았다.

// src/styles/tokens/index.ts

export * from './chat';

 

 

이렇게 하면 이제 다른 코드에서 import 할 때 아래와 같이 해주면 된다 😎

// Before
import { bubblePallete, bubbleMaxW } from '@/styles/tokens/chat';


// After
import { bubblePallete, bubbleMaxW } from '@/styles/tokens';

 

 

---

🟧 배럴 파일을 사용하는 이유

배럴 파일을 사용하는 이유로는 크게 4가지가 있다.

• 가독성 향상
  • 여러 모듈을 각각 import 하지 않고, 공통된 진입점 하나만 import 하면 되니까 코드가 훨씬 깔끔해진다.
• 유지보수 용이
  • 파일 구조가 바뀌거나 파일명이 바뀌어도 배럴 파일만 수정하면 되고, 나머지 코드들은 그대로 사용 가능하다.
• 일관성 있는 구조 제공
• 확장성
  • 추후 새로운 토큰이나 유틸리티 파일이 추가되더라도, 배럴 파일에서 한 줄만 추가해주면 된다.