136 lines
4.9 KiB
Markdown
136 lines
4.9 KiB
Markdown
# sample.admin.react
|
|
|
|
신규 프로젝트 초기 구성 참고용 Sample Admin React
|
|
|
|
## Tech Stack
|
|
- Typescript
|
|
- CoreUI Free React Admin Template
|
|
|
|
|
|
## Build/Run
|
|
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
$ npm install
|
|
```
|
|
|
|
### Basic usage
|
|
|
|
```bash
|
|
# dev server with hot reload at http://localhost:3000
|
|
$ npm start
|
|
```
|
|
|
|
vite.config.ts 에서 포트 변경 가능함
|
|
|
|
vscode 계열 IDE 에서 F5 로 debug 실행 가능
|
|
|
|
#### Build
|
|
|
|
Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
|
|
|
|
```bash
|
|
# build for production with minification
|
|
$ npm run build
|
|
```
|
|
|
|
build 결과물 테스트
|
|
```
|
|
npx serve -s build
|
|
```
|
|
--listen 5000 옵션등으로 포트 지정하지 않으면 3000 포트 사용
|
|
|
|
|
|
### local test url
|
|
- 단독 접속 테스트
|
|
- http://localhost:3000/
|
|
- vmware nginx 통해서 frontend + backend 통합 접속
|
|
- http://192.168.70.101/
|
|
- vmware nginx 설정 필요
|
|
|
|
## 프로젝트 구조
|
|
|
|
### 상위구조
|
|
|
|
```
|
|
sample.admin.react
|
|
├─ .vscode : VS Code 설정 경로
|
|
│ └─ launch.json : 디버그 실행 설정
|
|
├─ build : 빌드 결과물 경로 (npm run build 실행 시 생성)
|
|
├─ node_modules : npm 패키지 설치 경로
|
|
├─ public : 정적 파일 경로 (빌드 시 그대로 복사)
|
|
│ ├─ favicon.ico : 파비콘 이미지
|
|
│ └─ manifest.json : PWA 매니페스트 설정
|
|
├─ src : React 소스 경로
|
|
├─ .browserslistrc : 지원 브라우저 목록 설정
|
|
├─ .editorconfig : 에디터 공통 설정 (들여쓰기, 인코딩 등)
|
|
├─ .gitattributes : Git 파일 속성 설정
|
|
├─ .gitignore : Git 제외 파일 목록
|
|
├─ .prettierignore : Prettier 제외 파일 목록
|
|
├─ .prettierrc.js : Prettier 코드 포맷팅 설정
|
|
├─ eslint.config.mjs : ESLint 코드 검사 설정
|
|
├─ index.html : HTML 템플릿 (Vite 진입점)
|
|
├─ LICENSE : 라이선스 파일
|
|
├─ package.json : 프로젝트 설정 및 의존성 정의
|
|
├─ package-lock.json : 의존성 버전 잠금 파일
|
|
├─ README.md : 프로젝트 설명 문서
|
|
├─ tsconfig.json : TypeScript 컴파일러 설정
|
|
└─ vite.config.mjs : Vite 빌드 도구 설정
|
|
```
|
|
|
|
### React 소스 구조
|
|
|
|
```
|
|
src
|
|
├─ assets : 이미지, 브랜드 로고 등 정적 자원 경로
|
|
├─ axios : API 통신 관련 설정 경로
|
|
│ ├─ authService.ts : 인증 관련 API (로그인, 로그아웃, 토큰 관리)
|
|
│ └─ axios.ts : Axios 인스턴스 및 인터셉터 설정
|
|
├─ components : 재사용 가능한 공통 컴포넌트 경로
|
|
│ ├─ header
|
|
│ │ └─ AppHeaderDropdown.tsx : 헤더 우측 사용자 드롭다운 메뉴
|
|
│ ├─ AppBreadcrumb.tsx : 브레드크럼 네비게이션 컴포넌트
|
|
│ ├─ AppContent.tsx : 메인 콘텐츠 영역 (라우트 렌더링)
|
|
│ ├─ AppFooter.tsx : 하단 푸터 컴포넌트
|
|
│ ├─ AppHeader.tsx : 상단 헤더 컴포넌트
|
|
│ ├─ AppSidebar.tsx : 좌측 사이드바 컴포넌트
|
|
│ ├─ AppSidebarNav.tsx : 사이드바 네비게이션 메뉴 컴포넌트
|
|
│ └─ index.ts : 컴포넌트 export 모음
|
|
├─ context : React Context 경로
|
|
│ └─ AuthContext.tsx : 인증 상태 관리 Context (로그인 상태, 사용자 정보)
|
|
├─ hooks : 커스텀 훅 경로
|
|
│ └─ useAuth.ts : 인증 Context 사용을 위한 커스텀 훅
|
|
├─ layout : 레이아웃 컴포넌트 경로
|
|
│ └─ DefaultLayout.tsx : 기본 레이아웃 (사이드바 + 헤더 + 콘텐츠 + 푸터)
|
|
├─ routes : 라우팅 관련 경로
|
|
│ ├─ ProtectedRoute.tsx : 인증 필요 라우트 보호 컴포넌트
|
|
│ └─ routes.ts : 라우트 정의 (경로, 컴포넌트 매핑)
|
|
├─ scss : 스타일시트 경로
|
|
│ └─ style.scss : 전역 스타일 정의
|
|
├─ services : 도메인별 API 서비스 경로
|
|
│ ├─ adminMemberService.ts : 어드민 회원 관리 API
|
|
│ └─ adminMenuService.ts : 어드민 메뉴 관리 API
|
|
├─ views : 화면(페이지) 컴포넌트 경로
|
|
│ ├─ admin : 어드민 관리 화면 경로
|
|
│ │ ├─ AdminMemberManagement.tsx : 어드민 회원 관리 화면
|
|
│ │ └─ AdminMenuManagement.tsx : 어드민 메뉴 관리 화면
|
|
│ ├─ dashboard : 대시보드 화면 경로
|
|
│ │ └─ Dashboard.tsx : 대시보드 메인 화면
|
|
│ └─ pages : 인증 외 페이지 경로
|
|
│ ├─ login
|
|
│ │ └─ Login.tsx : 로그인 화면
|
|
│ ├─ register
|
|
│ │ └─ Register.tsx : 어드민 회원가입 신청 화면
|
|
│ ├─ page404
|
|
│ │ └─ Page404.tsx : 404 에러 화면
|
|
│ └─ page500
|
|
│ └─ Page500.tsx : 500 에러 화면
|
|
├─ _nav.tsx : 사이드바 네비게이션 메뉴 정의 (정적 메뉴)
|
|
├─ App.tsx : 애플리케이션 루트 컴포넌트 (라우터 설정)
|
|
├─ index.tsx : 애플리케이션 진입점 (ReactDOM 렌더링)
|
|
└─ store.tsx : Redux 스토어 설정 (사이드바 상태 관리)
|
|
```
|
|
|