Front-end(React)와 Back-end(JPA) 연동시키기

React로 제작했던 간단한 커큐니티 사이트의 프론트엔드와 JPA를 이용한 백엔드에 연결시켜 정상적으로 작동될 수 있도록 실습을 진행해보려고 한다.

간단하게 엔티티의 구조는 Member와 Board로 구성해 @ManyToOne으로 관계를 형성한다.

 

H2데이터베이스 테이블 구조

 

포스트맨으로 회원가입에 대한 요청을 하게되면

데이터베이스에 입력한 정보가 저장이 됩니다.

 

그리고 로그인 같은 경우도

서비스에서 userId를 memberRepository에 보내서 jpql을 사용하여 회원의 아이디와 일치 하는 맴버를 받아오고 그 맴버의 비밀번호와 지금 웹에서 입력된 비밀번호가 일치하는지 비교하여 일치하다면 로그인이 성공하도록 구현하였습니다.

 

 

회원탈퇴 기능은 로그인 되어있는 아이디가 탈퇴 요청을 보내게 되면 유저가 삭제됩니다.

마찬가지로 회원정보 수정 기능도 구현하여 포스트맨에서 테스트를 해보았을 때 정상적으로 작동되는 것을 확인했습니다.

이로써 기본적인 CRUD기능을 구현해보았고

 

마지막으로 

 

React 프론트엔드와 Spring Boot + JPA 백엔드를 연동하여 CRUD 기능을 구현하는 과정은 웹 애플리케이션 개발의 핵심 흐름을 실습을 통해 익히는 매우 중요한 단계입니다. 프론트에서 HTTP 요청을 통해 데이터를 전송하고, 백엔드에서는 이를 DTO로 받아 JPA Entity로 변환한 뒤 데이터베이스와 연동하여 처리하는 구조를 구현함으로써, 전체 애플리케이션의 데이터 흐름을 명확히 이해할 수 있습니다. 이 과정에서 RESTful API 설계, 비동기 통신 처리, CORS 설정, DTO와 Entity 간의 매핑, 에러 핸들링 등 실무에서 반드시 필요한 개념들을 체득할 수 있으며, 프론트와 백엔드 간의 명확한 역할 분리와 협업 방식도 자연스럽게 알게된 것 같다.

 

GIT주소 : https://github.com/Hwang1123/homeWork

GitHub - Hwang1123/homeWork

REACT - cafe-project

JPA - reactbackend