Skip to content

디렉토리 구조

KimDaeGeon edited this page Aug 26, 2024 · 4 revisions

📁 .vscode : vscode workspace 에 대한 설정파일과 코드 스니펫이 정의된 디렉토리입니다

📁 .github : Github Actions Workflow 와 PR 템플릿이 정의 되어 있습니다

📁 assets : 폰트 등의 assets 들이 저장되어있는 디렉토리입니다

📁 components : 리액트 컴포넌트 들이 저장되어있는 디렉토리입니다

/display : 여러 페이지에서 사용되는 Avatar, Card 와 같은 디스플레이 컴포넌트가 저장된 디렉토리입니다.

/feedback : Alert, Spinner, Toast 와 같은 사용자에게 피드백을 전달하는 컴포넌트가 저장된 디렉토리입니다

/form : Input, Button, CheckBox 와 같은 사용자와 상호작용하는 컴포넌트가 저장된 디렉토리입니다.

/layout : Header, Footer, MainLayout 와 같이 Outlet 을 포함한 컴포넌트가 저장된 디렉토리입니다.

/navigation : NavBar, NavAside, ProgressBar 와 같이 네비게이션과 관련된 컴포넌트가 저장된 디렉토리입니다.

/typography: Title, Paragraph, Text 와 같은 타이포그래피 컴포넌트가 저장된 디렉토리입니다.

📁 components : 도메인별로 사용되는 컴포넌트 디렉토리입니다. 도메인별 하위 디렉토리가 나누어져 있습니다.

📁 constants : 리액트 앱에 사용되는 상수들을 정의해둔 디렉토리입니다.

📁 hooks : 리액트 커스텀 훅을 저장하는 디렉토리입니다

📁 pages : 페이지 컴포넌트를 저장하는 디렉토리 입니다. 도메인별 하위 디렉토리가 나누어져 있습니다. (export default function )

📁 services : 비즈니스 로직이 들어있는 디렉토리입니다

📁 services : 비즈니스 로직이 들어있는 디렉토리입니다

📁 store : 전역 상태관리를 위한 Zustand 파일과 훅이 저장된 디렉토리입니다

📁 styles : 전역 스타일, 폰트 설정 등이 저장된 디렉토리입니다

📄 App.tsx : 앱의 Router, Provider 정의된 파일입니다

📄 Router.tsx : ClientSideRouting 을 위한 React-Router-Dom 컴포넌트들이 정의된 디렉토리입니다

📄 .eslintrc.cjs : ES Lint 코드 컨벤션 규칙들이 정의된 파일입니다

📄 .prettierrc : Prettier 코드 포맷 규칙들이 정의된 파일입니다.

Clone this wiki locally