이번 프로젝트에서는 폴더 구조 변경을 진짜 많이 했었음.
처음에는 기존에 사용하던 폴더 구조 방식으로 만들었음.
// 기존 폴더 구조
src/
├── components/ # 재사용 컴포넌트
│ ├── global/ # 공통 컴포넌트
│ │ ├── ErrorMessage.tsx
│ │ ├── LoadingSpinner.tsx
│ │ ├── LoginButton.tsx
│ │ ├── PlayButton.tsx
│ │ └── 등...
│ │
│ ├── home/ # homepage에서 사용되는 컴포넌트
│ ├── playlist/ # playlist에서 사용되는 컴포넌트
│ ├── search/ # search에서 사용되는 컴포넌트
│ └── side-bar/ # side-bar에서 사용되는 컴포넌트
│
├── hooks/ # 커스텀 훅
│
├── layout/ # 레이아웃 컴포넌트
│ ├── homepage/ # home에서 사용되는 레이아웃
│ ├── playlist/ # playlist에서 사용되는 레이아웃
│ ├── searchpage/ # search에서 사용되는 레이아웃
│ ├── AppLayout.tsx # AppLayout
│ └── 등...
│
├── models/ # 타입 정의 폴더
│
├── pages/ # 페이지 컴포넌트(라우팅되는 각 페이지들)
│
├── ...
│
├── ...그런데 페이지가 많아지고, 컴포넌트들을 계속 만들게 되면서 이 폴더 구조를 좀 더 명확히 해야겠다(?)라는 생각을 가졌음.
이 생각을 가지게 된 이유는 바로 components 폴더 구조 때문임.
기존에는 라우팅을 기준으로 나누었는데, 이게 components에 대한 명확한 역할이 사라진 것 같다는 느낌이 들었음.
왜냐면 global한 컴포넌트와 각 page에서만 사용되는 컴포넌트가 동일한 components 폴더에 있어, 각 page에 사용되는 컴포넌트들도 모든 페이지에 재사용이 가능한 컴포넌트다라는 인식을 줄 수 있을 것 같았기 때문임.
그래서, 모든 페이지에 재사용이 가능한 컴포넌트들만 두기 위해 폴더 구조 변경에 들어갔음.
상위 components 폴더 구조 변경
1. global/ → common/
모든 페이지 재사용 가능한 컴포넌트들이다라는 의미를 주기 위해 폴더명 이름을 변경했음.
그리고 그 폴더 안에는 components라는 폴더를 만들어 그 안에 재사용이 가능한 컴포넌트들을 두었음.
components 폴더를 생성한 이유는, 이 common이라는 폴더 안에 ContextAPI 컴포넌트도 있었기 때문에 이것을 구분하기 위해 components 폴더를 생성함.
그리고 그 후에는 공통으로 사용되는 style 폴더도 생성함.
src/
├── common/ # 재사용 컴포넌트
│ ├── components/ # 공통 컴포넌트
│ │ ├── ErrorMessage.tsx
│ │ ├── LoadingSpinner.tsx
│ │ ├── LoginButton.tsx
│ │ ├── PlayButton.tsx
│ │ └── 등...
│ │
│ ├── style/ # 공통으로 사용되는 style
│ │ ├── ListContainer.tsx
│ │ └── SearchStyle.tsx
│ │
│ └── ContextProvider.tsx
│2. side-bar/
side-bar 관련 컴포넌트들은 원래 src/components/side-bar 폴더에 있었음.(Side-bar 레이아웃 제외)
그리고 이 관련 컴포넌트들은 src/common/components/side-bar/ 폴더를 생성해 그 안에 관련 컴포넌트들을 두었음.
하지만, 다른 common 컴포넌트들과는 다르게 별도의 side-bar 폴더를 생성하여 구분을 지었음.
그리고 그 side-bar/ 안에는 library-body/ 폴더를 생성해, side-bar에서 사용되는 컴포넌트를 두었음.
src/
├── common/ # 재사용 컴포넌트
│ ├── components/ # 공통 컴포넌트
│ │ ├── ErrorMessage.tsx
│ │ ├── LoadingSpinner.tsx
│ │ ├── LoginButton.tsx
│ │ ├── PlayButton.tsx
│ │ ├── side-bar/
│ │ │ ├── library-body/
│ │ │ ├── Library.tsx
│ │ │ └── LibraryHead.tsx
│ │ └── 등...
│ │
│ ├── style/ # 공통으로 사용되는 style
│ │ ├── ListContainer.tsx
│ │ └── SearchStyle.tsx
│ │
│ └── ContextProvider.tsx
│추가
근데 이 포스팅 쓰면서 폴더 구조를common에서layout으로 옮김.
아무리 생각해도 현재 프로젝트에서는 재사용 컴포넌트는 아니어서...src/ ├── common/ # 재사용 컴포넌트 │ ├── components/ # 공통 컴포넌트 │ │ ├── ErrorMessage.tsx │ │ ├── LoadingSpinner.tsx │ │ ├── LoginButton.tsx │ │ ├── PlayButton.tsx │ │ └── 등... │ │ │ ├── style/ # 공통으로 사용되는 style │ │ ├── ListContainer.tsx │ │ └── SearchStyle.tsx │ │ │ └── ContextProvider.tsx │ ├── ... ├── ... ├── layout │ ├── side-bar │ │ ├── library-body/ │ │ ├── Library.tsx │ │ └── LibraryHead.tsx │ │ │ ├── AppLayout.tsx │ ├── Side-bar.tsx │ ├── 등...참고
common/style/도 별도src/style로 폴더 분리함.
3. 상위 components의 pages 컴포넌트 폴더 위치 변경
폴더 변경의 가장 큰 이유였던, 상위 컴포넌트 폴더에 있던 각 pages의 컴포넌트들의 폴더 위치를 변경함.
일단, 위에서도 썼다시피, 상위 컴포넌트에 있어 모든 페이지에서 재사용이 가능한 컴포넌트라고 오해를 불러 일으킬 수 있어서 각 해당pages에 컴포넌트 폴더를 생성해서 위치를 이동시켰다.
이렇게 하니, 확실히 컴포넌트 관리도 쉬워지고 common이라는 폴더의 역할이 명확해져서 앞으로는 이 폴더 구조 형태를 유지할 것 같음.
src/
├── common/ # 재사용 컴포넌트
├── layout/
├── ...
├── ...
├── pages
│ ├── homePage/
│ │ ├── components/
│ │ └── HomePage.tsx
│ │
│ ├── playlistPage/
│ │
│ ├── searchPage/마무리
폴더 구조 변경은 일단 이렇게 마무리가 되었음.
그리고 이 작업을 하면서 기존에 만들었던 컴포넌트 파일 위치 변경도 많이 이루어졌고, layout도 많이 만들었음.
확실히 컴포넌트들이 많아지니, 폴더 구조 변경 리팩토링은 내가 기존에 했던 폴더 구조 방식에서는 필수적으로 해야했던 부분이었던 것 같음.
이 작업을 하면서 좀 더 효율적인 구조 방식과 폴더마다의 명확한 역할에 대해 좀 더 알게 되었음.
다음 프로젝트에서는 이번 폴더 리팩토링 기억을 되짚어보며 의미가 명확한 구조를 짤거같음.
