프론트엔드 개발자에게 있어 좋은 폴더 구조는 언제나 뜨거운 감자입니다.

컴포넌트는 그 자체로 재사용이 가능한 각각의 독립된 모듈로 페이지의 구성요소입니다.

이러한 컴포넌트들을 재사용성을 높일 수 있도록 하기 위한 좋은 폴더 구조를 잡는 것은 매우 중요합니다.

이전 프로젝트 경험을 바탕으로 새로운 프로젝트를 진행하기 전에 앞서 폴더 구조 관련 논의 사항으로 Atomic 디자인 패턴을 활용해보자는 의견이 나왔었습니다.

• 참고 레퍼런스

직전 프로젝트 폴더 구조

📦src
 ┣ 📂assets
 ┃ ┗ 📂images
 ┣ 📂components
 ┃ ┣ 📂ChannelTalk
 ┃ ┣ 📂Footer
 ┃ ┣ 📂Header
 ┃ ┗ 📜components.keep
 ┣ 📂hooks
 ┣ 📂pages
 ┃ ┣ 📂Main
 ┃ ┃ ┣ 📂About
 ┃ ┃ ┃ ┣ 📂AboutContent
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┣ 📂Banner
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┣ 📂Curriculum
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┣ 📂OfficialApply
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┣ 📂Project
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┣ 📂Recruit
 ┃ ┃ ┃ ┣ 📂RecruitContent
 ┃ ┃ ┃ ┃ ┣ 📂Culturefit
 ┃ ┃ ┃ ┃ ┣ 📂RecruitPart
 ┃ ┃ ┃ ┃ ┣ 📂RecruitSchedule
 ┃ ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┃ ┗ 📜index.js
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂Networking
 ┃ ┃ ┗ 📜index.js
 ┃ ┣ 📂NotFound
 ┃ ┃ ┗ 📜index.js
 ┣ 📂styles
 ┗ App.css,App.js,index.css,index.js ...

공통 컴포넌트 폴더

페이지별 폴더

이전까지의 프로젝트에서는 단순하게 페이지를 기준으로 공통 컴포넌트 / 페이지에서 사용되는 컴포넌트 만 구분하여 사용했었고 페이지에서 사용되는 컴포넌트의 경우 해당 페이지별 폴더에서만 관리했었습니다.

이렇게 되면서 컴포넌트와 페이지의 구분이 모호했고 유지보수적 측면에서 굉장히 비효율적이었습니다.

따라서

1. 계층별로 구분된 컴포넌트
2. 목적이 분명한 구조
3. 컴포넌트별 유지 보수성 증가

를 기대하며 *Atomic Design Pattern을 도입하게 되었습니다.