sample.admin.react

신규 프로젝트 초기 구성 참고용 Sample Admin React

Tech Stack

• Typescript
• CoreUI Free React Admin Template

Build/Run

Installation

$ npm install

Basic usage

# 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.

# 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 스토어 설정 (사이드바 상태 관리)