폴더 구조

폴더 구조를 어떻게 해야 가장 직관적일까? 항상 고민이다. 폴더 구조에 대해 처음 접한 게 아토믹 디자인 패턴을 이전 프로젝트에서 도입했을때라 atom, modules, templates 이런식으로 잡게 된다. 그런데 작업을 하면서 딱히 효용을 느끼지 못했다.. 섹션마다 컨텐츠가 달라 재사용 한 구다리가 많지 않다.. 흠

before

📦components
 ┣ 📂atoms
 ┃ ┣ 📜accordion.tsx
 ┃ ┣ 📜education.tsx
 ┃ ┣ 📜etcItem.tsx
 ┃ ┣ 📜gnbItem.tsx
 ┃ ┣ 📜loading.tsx
 ┃ ┣ 📜logo.tsx
 ┃ ┣ 📜overlay.tsx
 ┃ ┣ 📜projectImg.tsx
 ┃ ┣ 📜projectItem.tsx
 ┃ ┣ 📜skillItem.tsx
 ┃ ┣ 📜skillLogo.tsx
 ┃ ┗ 📜tab.tsx
 ┣ 📂modules
 ┃ ┣ 📂aboutme
 ┃ ┃ ┣ 📜introduce.tsx
 ┃ ┃ ┣ 📜mySkill.tsx
 ┃ ┃ ┣ 📜myStrength.tsx
 ┃ ┃ ┗ 📜tmi.tsx
 ┃ ┣ 📂common
 ┃ ┃ ┗ 📜contact.tsx
 ┃ ┣ 📂education
 ┃ ┃ ┣ 📜careerEtc.tsx
 ┃ ┃ ┗ 📜swEducation.tsx
 ┃ ┣ 📂project
 ┃ ┃ ┗ 📜projects.tsx
 ┃ ┣ 📜aboutMe.tsx
 ┃ ┣ 📜education.tsx
 ┃ ┣ 📜gnb.tsx
 ┃ ┗ 📜project.tsx
 ┣ 📂templates
 ┃ ┣ 📜footer.tsx
 ┃ ┣ 📜header.tsx
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜main.tsx
 ┗ 📂utils
 ┃ ┗ 📜filtering.tsx
 📦hooks
 ┗ 📜useToogle.tsx
 📦pages
 ┣ 📂api
 ┃ ┣ 📜notion.tsx
 ┃ ┗ 📜notionApi.tsx
 ┣ 📂projects
 ┃ ┗ 📜first-project.tsx
 ┣ 📜404.tsx
 ┣ 📜_app.tsx
 ┗ 📜index.tsx
 📦public
 ┣ 📂essets
 ┃ ┗ 📜beanEater.gif
 ┣ 📂images
 ┃ ┣ 📂project
 ┃ ┃ ┣ 📜omu.jpg
 ┃ ┃ ┣ 📜portfolio.jpg
 ┃ ┃ ┗ 📜todo.jpg
 ┃ ┣ 📂skillLogos
 ┃ ┃ ┣ 📜css3.svg
 ┃ ┃ ┣ 📜figma.svg
 ┃ ┃ ┣ 📜html5.svg
 ┃ ┃ ┣ 📜javascript.svg
 ┃ ┃ ┗ 📜react.svg
 ┃ ┗ 📜profile.webp
 ┗ 📜favicon.ico
 📦styles
 ┣ 📂common
 ┃ ┗ 📜common.module.scss
 ┣ 📂layouts
 ┃ ┣ 📜education.module.scss
 ┃ ┣ 📜etc.module.scss
 ┃ ┣ 📜footer.module.scss
 ┃ ┣ 📜header.module.scss
 ┃ ┣ 📜intro.module.scss
 ┃ ┣ 📜project.module.scss
 ┃ ┣ 📜skill.module.scss
 ┃ ┣ 📜strength.module.scss
 ┃ ┗ 📜tmi.module.scss
 ┣ 📂utils
 ┣ 📜_mixins.scss
 ┣ 📜_variables.module.scss
 ┗ 📜globals.scss
 📦types
 ┗ 📜types.tsx

after

components부분만...
atomic 구조에서 페이지중심으로 폴더구조를 변경했다.
header/main/footer로 나누어지는데 여기서 공통부분은 common으로 따로 분리했다.
그리고 main이 컨텐츠 부분인데 크게 aboutme/education/project로 나누어진다.
aboutme - introduce/skill/strength/tmi
education - career/education
project - project
으로 이루어져있다.

구조가 보이도록 하려면 header/main/footer로 일단 폴더를 나누는 게 좋을까 했는데 depth가 너무 깊어지는 건 아닐까 싶기도 하고 common을 따로 뺐으니 일단 이정도로만 나누었다.

📦components
 ┣ 📂aboutme
 ┃ ┣ 📂introduce
 ┃ ┃ ┗ 📜introduce.tsx
 ┃ ┣ 📂mySkill
 ┃ ┃ ┣ 📜mySkill.tsx
 ┃ ┃ ┣ 📜skillItem.tsx
 ┃ ┃ ┗ 📜skillLogo.tsx
 ┃ ┣ 📂myStrength
 ┃ ┃ ┗ 📜myStrength.tsx
 ┃ ┣ 📂tmi
 ┃ ┃ ┗ 📜tmi.tsx
 ┃ ┗ 📜aboutMe.tsx
 ┣ 📂common
 ┃ ┣ 📜accordion.tsx
 ┃ ┣ 📜contact.tsx
 ┃ ┣ 📜footer.tsx
 ┃ ┣ 📜gnb.tsx
 ┃ ┣ 📜gnbItem.tsx
 ┃ ┣ 📜loading.tsx
 ┃ ┣ 📜logo.tsx
 ┃ ┣ 📜overlay.tsx
 ┃ ┗ 📜tab.tsx
 ┣ 📂education
 ┃ ┣ 📜careerEtc.tsx
 ┃ ┣ 📜education.tsx
 ┃ ┣ 📜educationItem.tsx
 ┃ ┣ 📜etcItem.tsx
 ┃ ┗ 📜swEducation.tsx
 ┣ 📂project
 ┃ ┣ 📜project.tsx
 ┃ ┣ 📜projectImg.tsx
 ┃ ┣ 📜projectItem.tsx
 ┃ ┗ 📜projects.tsx
 ┣ 📜header.tsx
 ┣ 📜layout.tsx
 ┗ 📜main.tsx