디자인 패턴

소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 전형적인 해결책

→ 코드에서 반복되는 디자인 문제들을 해결하기 위해 맞춤화할 수 있는 미리 만들어진 청사진

패턴은 재사용할 수 있는 코드 조각이 아니라 특정 문제를 해결하는 방식을 알려주는 일반적인 개념

• 변경 전 (= 기존 구조)

기존 구조가 가진 단점

• 일관성 부족
  • 일부 컴포넌트는 루트에, 일부는 하위 폴더에 존재
• common/Widgets 와 같은 폴더는 너무 깊게 중첩되어 있음
• common 폴더 속 컴포넌트들이 얼마나 많이 사용되는지 불분명
• common 폴더에 너무 다양한 컴포넌트들이 혼재되어 있음
• 📁charts와 📁Charts 역할이 겹칠 가능성 있음
• home/layout/HomeLayout.tsx와 dashboard/layout/DashboardLayout.tsx 등 레이아웃 파일이 각각의 도메인 폴더 안에 위치
• common/Widgets 폴더와 home/HomeMainWidgets.tsx 파일이 Widget 이라는 단어를 포함하지만 Widgets 폴더 속 컴포넌트들과 HomeMainWidgets의 역할이 다름 → 확장성이 떨어짐

변경한 구조

개선된것

Atomic Design 원칙을 적용하여 컴포넌트의 재사용성과 확장성 향상됨

• 구조적 일관성: 컴포넌트의 복잡성과 역할에 따라 명확하게 구조화
• 재사용성 향상: 작은 단위의 컴포넌트를 별도로 관리
• 확장성: 새로운 컴포넌트를 추가할 때 어디에 위치시켜야 할지 명확해짐