open webui 프론트엔드 소스분석
by 개발자   2025-02-20 16:01:51   조회수:135

frontend/

├── src/

│   ├── components/           # 재사용 가능한 컴포넌트

│   │   ├── common/          # 공통 컴포넌트

│   │   │   ├── Button.tsx

│   │   │   ├── Input.tsx

│   │   │   └── Modal.tsx

│   │   │

│   │   ├── chat/           # 채팅 관련 컴포넌트

│   │   │   ├── ChatBox.tsx

│   │   │   ├── MessageList.tsx

│   │   │   └── InputBox.tsx

│   │   │

│   │   └── layout/         # 레이아웃 컴포넌트

│   │       ├── Header.tsx

│   │       ├── Sidebar.tsx

│   │       └── Footer.tsx

│   │

│   ├── pages/              # 페이지 컴포넌트

│   │   ├── Home.tsx

│   │   ├── Chat.tsx

│   │   ├── Settings.tsx

│   │   └── Models.tsx

│   │

│   ├── store/              # 상태 관리

│   │   ├── index.ts

│   │   ├── chatSlice.ts

│   │   └── userSlice.ts

│   │

│   ├── hooks/              # 커스텀 훅

│   │   ├── useChat.ts

│   │   └── useAuth.ts

│   │

│   ├── services/           # API 통신

│   │   ├── api.ts

│   │   ├── chatService.ts

│   │   └── authService.ts

│   │

│   ├── styles/             # 스타일 파일

│   │   ├── global.css

│   │   └── variables.css

│   │

│   └── utils/              # 유틸리티 함수

│       ├── formatter.ts

│       └── validator.ts


주요 디렉토리와 파일들의 역할:
  • components/
  • common/: 버튼, 입력 필드 등 재사용 가능한 기본 UI 컴포넌트
  • chat/: 채팅 관련 특화 컴포넌트
  • layout/: 페이지 레이아웃을 구성하는 컴포넌트
  • pages/
  • 각 라우트에 해당하는 페이지 컴포넌트
  • 컴포넌트들을 조합하여 완성된 페이지 구성
  • store/
  • Redux/Zustand 등을 사용한 상태 관리
  • 전역 상태 및 액션 정의
  • hooks/
  • 재사용 가능한 로직을 분리한 커스텀 훅
  • 컴포넌트에서 자주 사용되는 기능 모듈화
  • 5. services/
  • 백엔드 API 통신 관련 로직
  • axios 등을 사용한 HTTP 요청 처리
  • styles/
  • 전역 스타일 및 테마 설정
  • CSS 변수 및 공통 스타일 정의
  • utils/
  • 데이터 포맷팅, 유효성 검사 등 유틸리티 함수
  • 공통으로 사용되는 헬퍼 함수들
  • 주요 기술 스택:
  • React/TypeScript
  • Redux/Zustand (상태 관리)
  • TailwindCSS/Styled-components (스타일링)
  • Axios (HTTP 클라이언트)
  • React Router (라우팅)
  • 이 구조는 모던 React 애플리케이션의 모범 사례를 따르고 있으며, 컴포넌트의 재사용성과 코드의 유지보수성을 고려하여 설계되어 있습니다.