프론트엔드 프로젝트 구조 설계 초안 - TEAM-PROJECT-ACC/trip-at-five-client GitHub Wiki

작성자: 장원일

작성일: 250514 (Wed)

수정일: -

여행다섯시 프론트엔드 프로젝트 구조 설계

기반 개념 (원칙)

해당 프로젝트 구조 설계는 아토믹 디자인 패턴에 기반하여 설계

1. 설계 패턴 선정 시 고려 사항

프로젝트의 규모
코드의 가독성
코드의 재사용성
팀원 간 원활한 협업

2. 아토믹 디자인 패턴 선정 이유

여행다섯시 프로젝트 규모에 도전 가능하다.
다른 설계 패턴에 비해 이해하기 쉽다.
공통 코드 영역에 대해서도 팀원 간 역할을 분담할 수 있다.
컴포넌트를 세분화하여 코드의 재사용성을 높일 수 있다.
컴포넌트 간 결합도를 낮춰서 유지 보수하기 쉽다.

3. 아토믹 디자인 패턴 적용 시 고려 사항

컴포넌트 세분화 레벨
폴더/파일 구조

4. 프로젝트 구조 초안

📦src
 ┣ 📂global-assets
 ┃ ┣ 📂icons
 ┃ ┗ 📂images
 ┣ 📂global-components
 ┃ ┣ 📂component
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┣ 📂utils
 ┃ ┃ ┗ 📜component.component.jsx
 ┃ ┗ 📂component2
 ┣ 📂global-hooks
 ┃ ┣ 📂hook
 ┃ ┃ ┗ 📜hook.hook.jsx
 ┃ ┗ 📂hook2
 ┣ 📂global-routes
 ┃ ┗ 📜app.route.jsx
 ┣ 📂global-state-utils
 ┃ ┣ 📂state-util
 ┃ ┃ ┗ 📜context.context.jsx
 ┃ ┗ 📂state-util2
 ┣ 📂global-utils
 ┃ ┣ 📂util
 ┃ ┗ 📂util2
 ┣ 📂pages
 ┃ ┣ 📂page
 ┃ ┃ ┣ 📂local-components
 ┃ ┃ ┣ 📂local-hooks
 ┃ ┃ ┣ 📂local-routes
 ┃ ┃ ┣ 📂local-utils
 ┃ ┃ ┗ 📜page.page.jsx
 ┃ ┗ 📂page2
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

어디까지나 아토믹 디자인 패턴에 기반하여 개인적으로 설계한 구조이며 그대로 반영하여 세분화하는 것보다 벡엔드의 구조와 비슷하게 분할하거나 팀원 간 타협점을 조율하여 구조를 잡아도 될 것 같습니다.

회의 이 후에 변경 사항이나 다른 의견 있으시면 공유 부탁드립니다.