TIL 폴더 배럴 패턴과 구조적 설계의 중요성
#60
Replies: 4 comments 2 replies
-
|
멘토님께서 알려주신 폴더 구조에 대해서는 얕게 나마 이해하고 있었는데,
와 같은 개념으로 불리는 지는 모르고 있었는데 처음 알게 되었어요!💡 또한 결정적으로 배럴 파일에서 그리고
따라서 🟡 2-step re-export는 네이밍 충돌을 해결해야 할 때 아래와 같이 사용한다고 하네요! 📝결론
|
Beta Was this translation helpful? Give feedback.
-
📌 배운 내용 요약위 본문 내용에 이어 추가적으로 고민했던 사항을 정리해봅니다. 🔍 배경 / 문제 상황pages/error의 폴더 구조는 아래와 같습니다. 경로면에서 /error까지 가져오면 명확하면서도 간단할 것 같아 error 바로 안에 index를 생성하고 코드를 아래와 같이 작성했습니다. export * from './notFound';
export * from './serverError';그런데 즉, 예를 들어 다른파일에서 아래와 같이 하나의 함수를 import했을때 // 다른 파일에서
import { someFn } from '@/pages/error';✅ 해결 방법 또는 핵심 정리정리해보면
따라서 아래와 같이 변경합니다. export { default as NotFoundPage } from './notFound';
export { default as ServerErrorPage } from './serverError';🧠 느낀점 및 생각 메모배럴 파일을 구성하는 것뿐만 아니라, 트리쉐이킹 관점에서 어떻게 export/import 구조를 설계해야 하는지까지 고민하게 되었다. 참고주강사님 조언
|
Beta Was this translation helpful? Give feedback.
-
관련해 조금 햇갈릴 수 있는 3가지 export 방식의 차이①
|
Beta Was this translation helpful? Give feedback.
-
|
롤업 테스트 후 알게된 사실 추가 기록합니다. 1. VITE 개발에서는 esbuild를 쓰고, 빌드에서는 Rollup을 씁니다. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
📌 배운 내용 요약
🔍 배경 / 문제 상황
관련 데일리 스크럼
✅ 해결 방법 또는 핵심 정리
| 개념
위에서 정리한 것과 같이 import 후 export하는 2-step re-export(explicit re-export)방식과 바로 export하는 Direct export 방식이 있습니다.
| 여러 파일을 index 배럴파일 하나에 담아 불필요한 렌더링이 되는 케이스
배럴 파일에 있어도 실제로 import한 항목만 번들에 포함되고 불필요한 항목들은 tree shaking으로 제거되기 때문에, 성능상 걱정할 필요가 없습니다. 렌더링은 빌드 이후 번들된 파일 위에서 실행되고 렌더링 할때 브라우저는 번들된 JS 파일만 실행하고 위의 예시에서는 CONSOLE_ERRORS는 아예 존재하지 않기 때문에 렌더링 대상도 아니게 됩니다.
즉, 불필요한 파일은 번들에 포함되지 않고, 번들에 포함되지 않은 파일은 브라우저에서 실행도, 렌더링도 되지 않습니다.
따라서 아래와 같이 사용합니다.
| re-export 방식
2-step방식은 import해서 export하는 배럴 파일의 역할이 명확히 보이는 장점이 있습니다. 반면 조금 귀찮습니다.
Direct export 방식은 하나의 코드로 간단하게 구현할 수 있어 편리합니다.
일장일단이 있지만 우리팀은 Direct export 방식을 선택했습니다.
🧠 느낀점 및 생각 메모
"불필요한 렌더링이 되는 것 아닐까?" 하는 질문 하나에서 출발했지만, 이번 논의를 통해 배럴 파일의 개념과 이점을 더 명확히 이해하게 되었고, 실제 import 시 불필요한 렌더링에 대한 걱정은 tree shaking 덕분에 할 필요가 없다는 점을 확인할 수 있어 좋았습니다.
단순히 "경로를 줄이기 위해 배럴 파일을 사용한다"는 개념에서 더 나아가, 실제로 번들링/렌더링 흐름까지 살펴보며 구조적인 판단 기준을 세울 수 있어서 유익했습니다. 단순한 스타일 가이드 수준을 넘어, 우리 팀만의 기준과 근거 있는 설계가 하나씩 쌓이는 과정 같아서 의미 있었습니다.
Beta Was this translation helpful? Give feedback.
All reactions