이번에 처음으로 2주간 팀프로젝트를 하게 되었는데, 혼자 하는 것이 아니라 처음 하는 협업이다 보니, 폴더 구조나 git 컨벤션에 대한 것을 팀원분들끼리 잘 이야기해보면서 프로젝트 세팅을 잘 해두면 좋을 것 같다고 생각해서 폴더 구조에 대해 고민해보았고, 그 와중에 Barrel Exports패턴에 대해 알게 되었다.
Barrel Exports Pattern이란?
Barrel Exports Pattern은 TypeScript와 JavaScript 프로젝트에서 많이 사용되는 패턴으로, 여러 모듈을 단일 진입점에서 한 번에 가져올 수 있도록 하는 방법이다. 이를 통해 코드의 가독성을 높이고 모듈 관리를 용이하게 할 수 있다.
Barrel exports pattern을 사용한 이유
이전에 혼자 과제를 할 때에는 프로젝트의 규모가 크지 않기도 했고,여러 컴포넌트들을 import 할 일도 많지 않았어서 효율적인 폴더 구조에 대해 고민해 본 적이 없었다.
하지만 파일이 jsx과 css로 분리되어있어서 import 할 때에도 매번 파일 경로를 거슬러 올라가야 한다는 불편함을 느끼고 있었다. 배럴 익스포트 구조가 한 페이지 안에 컴포넌트와 스타일을 import할 때 파일 경로의 복잡성과 컴포넌트 관리가 어려웠던 점을 개선해줄 수 있을 거라고 생각했다.
Barrel 파일의 역할
모듈 재수출
Barrel 파일은 특정 디렉토리 내에서 여러 모듈을 한 번에 내보내기 때문에 각 모듈을 개별적으로 가져올 필요 없이 Barrel 파일을 통해 한 번에 가져올 수 있다.
모든 컴포넌트에 적용할 css 속성들을 개별 scss 파일로 만들고 'import.scss' 파일 안에 한꺼번에 import 하여 각 컴포넌트에서 사용할 때, import.scss 만 import 하여 사용할 수 있도록 했다.
코드 간결화
여러 모듈을 사용할 때, 개별 모듈을 하나씩 가져오는 대신 Barrel 파일을 통해 가져오면 코드가 간결해지고, 이것은 코드의 가독성을 향상시킨다.
관리 용이성
새로운 모듈을 추가하거나 제거할 때 Barrel 파일만 수정하면 되므로, 모듈 관리가 쉬워진다. 위의 사진을 예로 들면, 만약 color.scss를 제거하고 싶을 때, barrel exports 구조를 사용하지 않았다면 import 한 파일들에서 일일이 제거해줘야 했을 것이다.
협업에서의 Barrel Exports Pattern의 장점
모듈 관리 용이
barrel exports의 가장 중요한 장점 중 하나는 협업이라고 생각한다. 여러 팀이 공유 UI 구성 요소를 사용하는 애플리케이션에서 작업하는 것을 고려할 때, 프로젝트 구조가 변경되면 애플리케이션에서 import 되었던 파일들이 중단된다.
이번 프로젝트에서는 페이지별로 폴더를 나누고, 컴포넌트 기반 구조를 사용해서 각 컴포넌트별로index.jsx와styles.module.scss파일로 관리하여 유지보수에 용이했다.
결론
Barrel Exports Pattern을 사용하면 프로젝트의 복잡성을 줄이고, 코드의 일관성을 유지하며, 유지보수와 확장이 용이해진다. 특히, 컴포넌트 기반 구조와 결합하여 사용하면 모듈의 재사용성과 관리 용이성을 극대화할 수 있다.
