SpringBoot & React Project & typeScript

🖥️ 프로젝트 소개

🕰️ 개발 기간

⚙️ 개발 환경

🛠️ 주요 라이브러리

react & typescript

springboot

🔧 주요 설정

경로 별칭 (Path Aliases)

// tsconfig.json & vite.config.js
{
 "@/*": ["src/*"],
 "@pages/*": ["src/pages/*"],
 "@component/*": ["src/components/*"],
 "@api/*": ["src/api/*"],
 "@data/*": ["src/data/*"],
 "@assets/*": ["src/assets/*"],
 "@utils/*": ["src/utils/*"],
 "@store/*": ["src/store/*"],
 "@hooks/*": ["src/hooks/*"],
 "@router/*": ["src/router/*"],
 "@layout/*": ["src/layout/*"]
}

📌 시작하기

1. 아래처럼 git을 clone하거나 zip으로 다운로드

$ git clone https://github.com/e1-mslee/reactProject.git

📁 프로젝트 구조

bs3_study
├─ backend
│ ├─ .mvn
│ │ └─ wrapper
│ │ └─ maven-wrapper.properties
│ ├─ Dockerfile
│ ├─ HELP.md
│ ├─ mvnw
│ ├─ mvnw.cmd
│ ├─ pom.xml
│ └─ src
│ ├─ main
│ │ ├─ java
│ │ │ └─ com
│ │ │ └─ e1
│ │ │ └─ backend
│ │ │ ├─ auth
│ │ │ │ └─ TokenProvider.java
│ │ │ ├─ BackendApplication.java
│ │ │ ├─ config
│ │ │ │ ├─ RedisConfig.java
│ │ │ │ ├─ SecurityConfig.java
│ │ │ │ └─ WebConfig.java
│ │ │ ├─ Controller
│ │ │ │ ├─ ApiController.java
│ │ │ │ ├─ AuthController.java
│ │ │ │ └─ KjoApiController.java
│ │ │ ├─ dto
│ │ │ │ ├─ CustomUserDetails.java
│ │ │ │ ├─ UserDto.java
│ │ │ │ └─ UserEntity.java
│ │ │ ├─ filter
│ │ │ │ └─ JwtAuthenticationFilter.java
│ │ │ ├─ mapper
│ │ │ │ ├─ ApiMapper.java
│ │ │ │ ├─ KjoApiMapper.java
│ │ │ │ └─ UserMapper.java
│ │ │ ├─ service
│ │ │ │ ├─ ApiService.java
│ │ │ │ ├─ CustomUserDetailsService.java
│ │ │ │ └─ KjoApiService.java
│ │ │ └─ serviceimpl
│ │ │ ├─ ApiServiceImpl.java
│ │ │ └─ KjoApiServiceImpl.java
│ │ └─ resources
│ │ ├─ application.properties
│ │ ├─ logback-spring.xml
│ │ ├─ mybatis
│ │ │ └─ sql
│ │ │ ├─ kjo
│ │ │ │ └─ kjoApi.xml
│ │ │ └─ lms
│ │ │ └─ api.xml
│ │ ├─ static
│ │ └─ templates
│ └─ test
│ └─ java
│ └─ com
│ └─ e1
│ └─ backend
│ └─ BackendApplicationTests.java
├─ docker-compose.yml
├─ frontend
│ ├─ .dockerignore
│ ├─ .env
│ ├─ .env.production
│ ├─ default.conf
│ ├─ Dockerfile
│ ├─ eslint.config.js
│ ├─ index.html
│ ├─ package-lock.json
│ ├─ package.json
│ ├─ public
│ │ ├─ favicon.ico
│ │ └─ font
│ │ ├─ NotoSansCJKkr-Black.otf
│ │ ├─ NotoSansCJKkr-Bold.otf
│ │ ├─ NotoSansCJKkr-DemiLight.otf
│ │ ├─ NotoSansCJKkr-Light.otf
│ │ ├─ NotoSansCJKkr-Medium.otf
│ │ ├─ NotoSansCJKkr-Regular.otf
│ │ ├─ NotoSansCJKkr-Thin.otf
│ │ ├─ NotoSansMonoCJKkr-Bold.otf
│ │ ├─ NotoSansMonoCJKkr-Regular.otf
│ │ └─ Roboto-Regular.ttf
│ ├─ README.md
│ ├─ src
│ │ ├─ .prettierignore
│ │ ├─ .prettierrc.yml
│ │ ├─ api
│ │ │ ├─ api.ts
│ │ │ ├─ Auth.ts
│ │ │ ├─ lmsApi.ts
│ │ │ ├─ lmsDocApi.ts
│ │ │ ├─ lmsHeaderApi.ts
│ │ │ ├─ lmsPopApi.ts
│ │ │ └─ types.ts
│ │ ├─ App.css
│ │ ├─ App.tsx
│ │ ├─ assets
│ │ │ └─ Logo.png
│ │ ├─ components
│ │ │ └─ BaseButton.jsx
│ │ ├─ data
│ │ │ ├─ data.ts
│ │ │ └─ menuItems.tsx
│ │ ├─ hooks
│ │ │ └─ useRemoveWijmoLink.ts
│ │ ├─ index.css
│ │ ├─ layout
│ │ │ ├─ Footer.tsx
│ │ │ ├─ Header.tsx
│ │ │ └─ Sidebar.tsx
│ │ ├─ main.tsx
│ │ ├─ pages
│ │ │ ├─ Home.tsx
│ │ │ ├─ kjo
│ │ │ │ ├─ kjo.css
│ │ │ │ ├─ Kjo.tsx
│ │ │ │ ├─ kjoHeaderPopup.tsx
│ │ │ │ └─ KjoPop.tsx
│ │ │ ├─ lms
│ │ │ │ ├─ Lms.css
│ │ │ │ ├─ Lms.tsx
│ │ │ │ ├─ LmsDoc.tsx
│ │ │ │ ├─ LmsHeader.tsx
│ │ │ │ └─ LmsPop.tsx
│ │ │ ├─ Login.css
│ │ │ ├─ Login.tsx
│ │ │ └─ Notfound.tsx
│ │ ├─ router
│ │ │ └─ routes
│ │ │ ├─ MainRoute.tsx
│ │ │ └─ PopupRoute.tsx
│ │ ├─ store
│ │ │ ├─ commonStore.ts
│ │ │ ├─ kjo
│ │ │ │ ├─ kjoHeaderStore.ts
│ │ │ │ ├─ kjoPopupStore.ts
│ │ │ │ └─ kjoStroe.ts
│ │ │ └─ lms
│ │ │ ├─ lmsDocStore.ts
│ │ │ ├─ lmsHeaderStore.ts
│ │ │ ├─ lmsPopStore.ts
│ │ │ └─ lmsStore.ts
│ │ └─ utils
│ │ ├─ openPop.ts
│ │ └─ tableUtils.ts
│ ├─ tsconfig.json
│ ├─ vite-env.d.ts
│ └─ vite.config.js
├─ Jenkinsfile
├─ README.md
├─ table.sql
└─ UDA 시스템관리.pptx

2. frontend 폴더 경로로 이동 ( package.json이 있는 폴더) 후 npm 설치

$ cd /frontend
$ npm install

3. frontend 폴더에서 react 실행

$ npm run dev

4. backend 폴더에서 Springboot 실행 (BackendApplication.java)

🚀 배포

Jenkins 파이프라인 통한 자동화 배포

환경별 빌드 및 배포 스크립트

인증 시스템

jwt을 통해 access tocken과 refresh tocken을 통해 인증(redis 서버를 통한 동기화)

이후 자세한 실행 내용은 React_Springboot 개발환경_메뉴얼_이민수.pptx 참조