폴더 구성에는 프로젝트 또는 회사마다 폴더 구조를 다르게 설정하므로 정답은 없습니다.
참고하셔서 프로젝트 스타일에 맞게 구성하시길 바랍니다.
📁 project\
js App.js (실제 보여질 컴포넌트, 라우팅 구성)
js Index.js (Root DOM Node에 App 컴포넌트를 렌더링)
⬇️ src\
⬇️ app\
js store.js (Redux Store 생성)
⬇️ auth\ (인증 관련 폴더)
js register.js (회원가입 처리)
js RequireAuth.js (기능 처리 후 페이지 유지)
⬇️ assets\ (이미지 폴더)
⬇️ images\
🖼️ logo.png
🖼️ main.jpg
⬇️ icons\
🖼️ search.svg
🖼️ error.svg
⬇️ features\
⬇️ counter\ (Redux State와 Actions 사용)
js Count.js
js countSlice.js
⬇️ components\ (재사용 가능한 컴포넌트)
⬇️ common\ (공통적으로 사용되는 컴포넌트)
js Button.js
js Modal.js
js Loading.js
⬇️ layout (레이아웃 구성 컴포넌트)
js Header.js
js Footer.js
js Navbar.js
⬇️ pages\ (렌더링될 페이지 컴포넌트)
js Main.js
js About.js
js Login.js
⬇️ styles\ (스타일 관련 폴더)
⬇️ css\
# index.css
⬇️ utils\ (데이터 가공 처리, 날짜 포맷 등 유틸리티 함수들을 모아 놓은 폴더)
js formatDate.js
js calculate.js