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