리팩토링 - 폴더구조

폴더구조를 바꿔야 하는 이유?

 

위를 보면 알 수 있듯, 우리 프로젝트의 폴더구조는 굉장히 복잡하다. 컴포넌트 폴더 안에 따로 구분 없이 기능이 적혀있는 폴더들이 가득하기 때문에 구조를 처음 보는 사람은 절대 이해하기 어려울 것이다 (우리도 네이밍 때문에 헷갈리곤 했다).

 

그래서 어떻게?

팀원들끼리 상의한 결과 DDD (Domain-Driven Design) 설계 방식을 따라가면 좋지 않을까? 결론이 나왔고 '각자 폴더구조를 정리해 오자!'라고 얘기했지만 셋 모두 비효율적이라 느꼈기에 다시금 상의를 진행하였다. 이미 우리의 폴더구조는 어느 정도 페이지별로 구분이 되어있었기 때문에 여기에 맞게 작업을 진행하기로 했다.

 

이해하기 어렵거나 비슷한 네이밍을 가진 파일, 폴더의 이름을 변경하였고, layout의 기능만 하는 파일들을 따로 정리해 주었으며, 컴포넌트 폴더의 내부구조를 변경해 주었다.

 

결과

내가 수정한 폴더구조

├─ client
│  ├─ src
│  │  ├─ api
│  │  │  └─ api.ts
│  │  ├─ App.css
│  │  ├─ App.tsx
│  │  ├─ assets
│  │  ├─ components
│  │  │  ├─ admin
│  │  │  │  ├─ AdminMediaForm.tsx
│  │  │  │  ├─ AdminReport.tsx
│  │  │  │  ├─ DeleteMediaBtn.tsx
│  │  │  │  ├─ PatchMediaBtn.tsx
│  │  │  │  ├─ ReportDetail.tsx
│  │  │  │  └─ ReportModal.tsx
│  │  │  ├─ authentication
│  │  │  │  ├─ AdditionalInfo.tsx
│  │  │  │  ├─ Authentication.tsx
│  │  │  │  ├─ LoginForm.tsx
│  │  │  │  ├─ Logo.tsx
│  │  │  │  ├─ SignupForm.tsx
│  │  │  │  └─ SocialLogin.tsx
│  │  │  ├─ comments
│  │  │  │  ├─ CommentContent.tsx
│  │  │  │  ├─ CommentForm.tsx
│  │  │  │  ├─ Comments.tsx
│  │  │  │  └─ CommentSection.tsx
│  │  │  ├─ common
│  │  │  │  ├─ button
│  │  │  │  │  ├─ CloseBtn.tsx
│  │  │  │  │  ├─ MoveBtn.tsx
│  │  │  │  │  └─ TopButton.tsx
│  │  │  │  ├─ item
│  │  │  │  │  ├─ ItemCard.tsx
│  │  │  │  │  └─ SkeletonItemCard.tsx
│  │  │  │  ├─ layout
│  │  │  │  │  ├─ Banner.tsx
│  │  │  │  │  ├─ Error.tsx
│  │  │  │  │  ├─ QuestionCard.tsx
│  │  │  │  │  └─ Tag.tsx
│  │  │  │  ├─ modal
│  │  │  │  │  └─ Modal.tsx
│  │  │  │  └─ toast
│  │  │  │     └─ Toast.tsx
│  │  │  ├─ detail
│  │  │  │  ├─ Bookmark.tsx
│  │  │  │  ├─ BookmarkLoading.tsx
│  │  │  │  ├─ ContentDetail.tsx
│  │  │  │  ├─ ContentDetailLoading.tsx
│  │  │  │  ├─ Recommend.tsx
│  │  │  │  ├─ RecommendContent.tsx
│  │  │  │  ├─ RecommendContentLoading.tsx
│  │  │  │  ├─ RecommendLoading.tsx
│  │  │  │  └─ ReportBtn.tsx
│  │  │  ├─ filter
│  │  │  │  ├─ BannerSlide.tsx
│  │  │  │  ├─ GenreBtn.tsx
│  │  │  │  ├─ GenreSlide.tsx
│  │  │  │  ├─ InfinityScroll.tsx
│  │  │  │  ├─ InfinityScrollLoading.tsx
│  │  │  │  ├─ ListBtns.tsx
│  │  │  │  ├─ MobileGenreModal.tsx
│  │  │  │  ├─ OttBtn.tsx
│  │  │  │  └─ SliderLoading.tsx
│  │  │  ├─ main
│  │  │  │  ├─ Footer.tsx
│  │  │  │  ├─ header
│  │  │  │  │  ├─ Dropdown.tsx
│  │  │  │  │  ├─ Header.tsx
│  │  │  │  │  ├─ LoginSignup.tsx
│  │  │  │  │  ├─ MainLogo.tsx
│  │  │  │  │  ├─ MemberMenu.tsx
│  │  │  │  │  ├─ Navigation.tsx
│  │  │  │  │  ├─ SearchBar.tsx
│  │  │  │  │  └─ UserProfile.tsx
│  │  │  │  ├─ MainBanner.tsx
│  │  │  │  ├─ MainSlider.tsx
│  │  │  │  ├─ MainSliderSection.tsx
│  │  │  │  ├─ MobileGNB.tsx
│  │  │  │  └─ recommendModal
│  │  │  │     ├─ FirstQuestion.tsx
│  │  │  │     ├─ QuestionData.tsx
│  │  │  │     ├─ QuestionResult.tsx
│  │  │  │     ├─ RecommendModal.tsx
│  │  │  │     ├─ SecondQuestion.tsx
│  │  │  │     └─ ThirdQuestion.tsx
│  │  │  └─ member
│  │  │     ├─ Ad.tsx
│  │  │     ├─ memberContents
│  │  │     │  ├─ ContentsList.tsx
│  │  │     │  ├─ MemberContents.tsx
│  │  │     │  └─ ReviewList.tsx
│  │  │     ├─ MemberInfo
│  │  │     │  ├─ Information.tsx
│  │  │     │  ├─ MemberInfo.tsx
│  │  │     │  └─ MemberProfile.tsx
│  │  │     ├─ MemberLikesModal.tsx
│  │  │     └─ profileModal
│  │  │        ├─ DefaultImgs.tsx
│  │  │        ├─ ImgUpload.tsx
│  │  │        └─ ProfileModal.tsx
│  │  ├─ constant
│  │  │  └─ constantValue.ts
│  │  ├─ index.css
│  │  ├─ main.tsx
│  │  ├─ pages
│  │  │  ├─ Admin.tsx
│  │  │  ├─ Auth.tsx
│  │  │  ├─ Content.tsx
│  │  │  ├─ List.tsx
│  │  │  ├─ Main.tsx
│  │  │  ├─ Member.tsx
│  │  │  ├─ Movie.tsx
│  │  │  ├─ Root.tsx
│  │  │  ├─ Search.tsx
│  │  │  └─ TV.tsx
│  │  ├─ recoil
│  │  │  └─ atoms
│  │  │     └─ Atoms.ts
│  │  ├─ styles
│  │  │  ├─ global-styles.ts
│  │  │  └─ style.ts
│  │  ├─ types
│  │  │  └─ types.ts
│  │  ├─ utils
│  │  │  ├─ auth.ts
│  │  │  ├─ convertResponse.ts
│  │  │  ├─ datetime.ts
│  │  │  ├─ notify.ts
│  │  │  ├─ scrollToTop.ts
│  │  │  ├─ useIsLoggedIn.ts
│  │  │  └─ useTokens.ts

 

개편된 폴더구조

├── api
├── assets
│   └── fonts
├── components
│   ├── @common
│   │   ├── InfiniteScroll
│   │   ├── Itemcard
│   │   ├── button
│   │   ├── slider
│   │   ├── toast
│   │   └── topbutton
│   ├── @layout
│   │   ├── banners
│   │   ├── footer
│   │   ├── header
│   │   ├── mobileGNB
│   │   └── navigators
│   ├── admin
│   ├── authentication
│   ├── comments
│   ├── mediaDetail
│   │   ├── bookmark
│   │   ├── recommend
│   │   ├── relatedMedia
│   │   └── report
│   ├── member
│   │   ├── MemberInfo
│   │   ├── memberContents
│   │   └── profileModal
│   └── recommend
│       ├── buttons
│       └── questions
├── constant
├── hooks
├── pages
├── recoil
│   └── atoms
├── styles
├── types
└── utils

 

셋이서 각자 폴더구조를 변경해왔고 그에 대한 발표를 했으며, 가장 잘 정리했다고 생각되는 폴더구조를 채택하여 도입하였다. 원하는 파일을 찾는데 수월해졌기 때문에 이전과 비교하면 페이지별로, 기능별로 구조가 개선되었다고 생각한다. 바뀐 폴더구조에 만족하였고 앞으로 더 좋은 폴더구조에 대해서 생각해 봐야겠다.