[SpringBoot] React + TypeScript + JPA 프로젝트 (1) - 생성

 

• Java 17
• Gradle
• Spring Boot 3.3.4
• Spring Security 6.3.3
• Oracle 11g
• IntelliJ Ultimate
• DBeaver
• React
• JPA

---

SpringBoot 프로젝트 생성

 

 

 

프로젝트 생성이 끝나면 properties 파일이 생성된다

 

server.port= 7172

# Database
spring.datasource.driver-class-name=oracle.jdbc.OracleDriver
spring.datasource.url=jdbc:oracle:thin:@localhost:1521/XE
spring.datasource.username=DB 아이디
spring.datasource.password=DB 패스워드


# devtools 수정된 코드가 있으면 자동으로 재빌드한다
spring.devtools.livereload.enabled=true
spring.devtools.restart.enabled=true

기본 port는 8080 이며 충돌날 가능성이 많기 때문에 port를 변경해 주었다

DB 연결이 되어있지 않으면 실행 시 오류가 발생하므로 본인에 맞는 DB 로 연결한다

devtools 는 사용여부에 따라 작성 및 false 를 하면 되겠다

 

프로젝트를 실행하면 password 와 함께 시작되었다는 문구를 확인할 수 있다

localhost:7172 로 접속하면 Security login 기본폼이 보이며

Username : user

Password : 콘솔 로그의 password 

를 입력해 주면 에러 페이지와 함께 정상 동작하는 것을 확인할 수 있다

 

 

 

---

React + TypeScript 설치

https://greed-yb.tistory.com/302

[SpringBoot] Intellij + React + TypeScript 프로젝트 생성하기

node.js 설치 및 React + TypeScript 설치는 이전글을 참고하길 바란다

프로젝트는 위에서 생성하였으니 Terminal 에서 명령어 실행부터 하면 된다

(axios 와 router 까지 설치하길 바란다)

 

React 를 설치한 frontend 폴더에서

npm start 로 정상동작하는 것을 확인하였다면

package.json 에 proxy 를 SpringBoot 의 7172 port 로 맞춰주고

아래 주소의 코드를 통해 React 와 Spring 을 같이 빌드할 수 있도록 build.gradle 에 코드를 추가한다

 

https://greed-yb.tistory.com/257

[SpringBoot] Gradle + React 같이 빌드하기

security 를 적용하고 한 번에 build 하여 프로젝트를 실행시키니
권한 문제로 인한 페이지 실행이 되지 않았다

추후 해결 예정으로 적용하지 말길 바란다

 

 

 

 

---

프로젝트 실행

Run 또는 Debug 시작

 

 

console 에 새로 발급된 password

 

 

---

React 와 gradle 을 한 번에 build 하는 방법에 문제가 생겨 각자 실행을 한다

React 는 terminal 에서 설치된 경로로 들어가서 실행해 준다

예) src/main/frontend  : npm start

---

 

 

 

기본 로그인 폼에 

user 와 passwrod 를 입력하고 로그인 성공하면

React 와 SpringBoot 가 한 번에 빌드되어 실행된다

따로 실행시켰기 때문에 localhost:3000 React 서버가 실행되었을 것이다

 

이전에 로그인한 쿠키가 남아있어서 기본 로그인 폼이 안 나왔다면 

관리자 도구를 실행하여 해당 쿠키를 삭제하고 새로고침을 한다면 로그인 화면이 나오니 테스르를 진행하면 된다