Spring boot + React 시작하기 1 (로그인 및 회원가입, 회원 관리 만들기) - 기본설정

 연습용 프로젝트를 생성하면서 Sample로 진행 내역을 남겨봄 

 

연습용 프로젝트는 Spring boot + React로 로그인 / 회원가입 및 회원관리 페이지를 만들어 보려고 한다.

개발 환경은 M1 Mac Os, Spring boot, React를 사용한다.

 

0. 시작 전 GPT한테 어떤 식으로 프로젝트 진행하면 되는지 물어봄

기초적인 지식이기도 하고... 작성자는 몰라서 물어봤지만 귀찮은 독자는 읽지 말자.

그리고 GPT라 무조건 믿으면 안됨

* Model-View-Controller (MVC) 패턴:
    * Model: 데이터와 비즈니스 로직을 담당하는 부분입니다.
    * View: 사용자 인터페이스를 담당하는 부분으로, 웹 애플리케이션에서는 HTML, JSP, Thymeleaf 등으로 구성됩니다.
    * Controller: 사용자 입력을 처리하고, Model과 View를 연결하는 부분입니다.
    
* Spring Boot 프로젝트 구조:
    * 일반적으로 Spring Boot 프로젝트는 패키지별로 구분되는 구조를 가지고 있습니다. 예를 들면, com.example.myapp와 같은 패키지 구조가 있을 수 있습니다.

* Controller:
    * Controller는 사용자의 요청을 받아들이고, 그에 맞는 처리를 담당합니다.
    * 각각의 요청에 대한 메서드를 가지고 있으며, 주로 @Controller 또는 @RestController 어노테이션을 사용합니다.
    * 예를 들어, 사용자가 웹 페이지에서 어떤 정보를 요청하면 해당 정보를 가공하여 전달하는 역할을 합니다.

* Service:
    * Service는 비즈니스 로직을 담당하며, 주로 Controller에서 받은 요청을 처리하는 역할을 합니다.
    * Controller에서는 비즈니스 로직에 집중하지 않고, 해당 로직을 Service에 위임하여 모듈화하게 됩니다.
    * 주로 @Service 어노테이션을 사용합니다.

* Repository (또는 DAO - Data Access Object):
    * Repository는 데이터베이스와의 상호작용을 담당합니다. 데이터를 조회하거나 수정하는 등의 기능을 수행합니다.
    * 주로 @Repository 어노테이션을 사용합니다.

* DTO (Data Transfer Object):
    * DTO는 데이터 전송을 위한 객체로, 서비스 간에 데이터를 주고받을 때 사용됩니다.
    * Controller에서 Service로, 또는 Service에서 Repository로 데이터를 전달할 때 DTO를 이용하여 데이터를 캡슐화합니다.

========================================================================================================

설계 및 작성 순서:
* 도메인 모델 정의:
    * 프로젝트의 주요 엔터티와 비즈니스 로직을 고려하여 도메인 모델을 정의합니다.
* Repository 작성:
    * 데이터베이스와의 상호작용을 담당하는 Repository를 작성합니다.
* DTO 작성:
    * 데이터 전송을 위한 객체인 DTO를 작성합니다.
* Service 작성:
    * 비즈니스 로직을 수행하는 Service를 작성합니다.
* Controller 작성:
    * 사용자의 요청을 받아들이고, 해당 요청에 따른 비즈니스 로직을 호출하는 Controller를 작성합니다.
* View 작성 (선택적):
    * 웹 애플리케이션의 경우, 사용자에게 보여지는 View를 작성합니다.

---

본 게시물의 흐름도 :

Spring boot 패키지 생성 > React App 생성 > Database Table 생성 > Lombok, Mysql, Java dependencies 추가 > application.properties 작성> Entity 작성 > Repository 작성 > React(Front) 구성 > Controller 작성

 

환경 : Mac OS, JDK17, Gradle, Spring 3.2.2

1. Intellij Spring boot 프로젝트 생성

 

2. 프로젝트 구성

프로젝트 구성의 경우 개인마다 구조를 잡는 방식이 다르기 때문에 참고용으로 사용하자.

(프로젝트명을 중간에 수정하였다. v2는 신경쓰지 말자.)

 

참고로 화면단은 React로 구성했다.

해당 경로에 ssg-fe 폴더를 만들고 해당 경로에 ReactApp을 생성하였다.

https://seokbong.tistory.com/116

React node로 react app 만들기 및 실행

 

 

3. 이 시점에서의 gradle 및 application.properties 설정

이 역시 구성 방식이나 어떠한 패키지를 쓰는지 등등...

프로젝트마다 너무나도 다르다.

작성자는 이 시점에서 Mysql을 연결하기 위해 다음과 같이 설정하였다.

 

* 참고로 DB는 우선 Table 하나만을 구성하였다.

CREATE TABLE user (
    id varchar(255) NOT NULL PRIMARY KEY,
    email varchar(255) NOT NULL,
    name varchar(255),
    password varchar(255) NOT NULL,
    phone_number varchar(20),
    user_type varchar(255) DEFAULT 'counselor',
    token varchar(255) NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    edited_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    last_login_at datetime(6)
);

 

3.1. bulid.gradle

 - 작성 후 Gradle을 reload하자.

plugins {
    id 'java'
    id 'org.springframework.boot' version '3.2.2'
    id 'io.spring.dependency-management' version '1.1.4'
}

group = 'com.ssg.demo.v2'
version = '0.0.1-SNAPSHOT'

java {
    sourceCompatibility = '17'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-web-services'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'

    // Lombok
    implementation 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'

    // Mysql
    implementation 'mysql:mysql-connector-java:8.0.28'

    // spring-boot-starter-data-jpa
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
}

tasks.named('test') {
    useJUnitPlatform()
}

 

3.2. application.properties

 - password 부분은 본인 Mysql 비밀번호를 작성하여 넣어야 한다.

 - url에는 Database의 이름을 입력 (3306이 일반적인 mysql 디폴트 포트 번호임)

 - username을 따로 생성 안한 경우는 "root" 일 것

 - ""나 '', []는 입력하지 않는다.

 - db 환경에 따라 값이 다를 수 있음

spring.datasource.url=jdbc:mysql://localhost:3306/[database name 입력]
spring.datasource.username=[username 입력 (따로 설정 안했다면 root 입력)]
spring.datasource.password=[비밀번호 입력]
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL8Dialect

 

3.3. Spring Boot 실행하여 DB Connection 확인

 - 본인은 Hibernate, HikariPool 관련하여 Connect가 됐는지 확인하였음.

[main] com.zaxxer.hikari.pool.HikariPool        : HikariPool-1 - Added connection com.mysql.cj.jdbc.ConnectionImpl@
[main] com.zaxxer.hikari.HikariDataSource       : HikariPool-1 - Start completed.

 

4. Entity, Repository 작성

 

UserEntity.java

• 역할: 데이터베이스의 테이블과 매핑되는 객체입니다. 즉, 애플리케이션에서 사용되는 데이터의 구조를 정의합니다.
• 특징: 필드(멤버 변수)와 해당 필드에 접근할 수 있는 메소드(게터 및 세터)로 구성됩니다.
• 예시: 만약 "User"라는 테이블이 데이터베이스에 있다면, 그에 상응하는 Java 클래스가 User 엔티티가 됩니다.

 - 본인 Database와 일치시키면 된다.

 - 우선 UserEntity 하나를 작성함

package com.ssg.demo.v2.ssgdemov2.Entity;

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;

import jakarta.persistence.Entity;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import jakarta.time.LocalDateTime;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
@Entity
@Table(name="user")				// 본인 테이블명과 맞춰주어야 함
public class UserEntity {
    @Id
    private String id;
    private String email;
    private String password;
    private String name;
    private String phoneNumber;
    private String userType;
    private String token;
    private LocalDateTime createdAt;
    private LocalDateTime editedAt;
    private LocalDateTime lastLoginAt;
}

 

UserRepository.java

 

• 역할: 데이터베이스와의 상호 작용을 담당합니다. CRUD(Create, Read, Update, Delete) 작업을 수행할 메소드를 제공합니다.
• 특징: Spring Data JPA를 이용하여 인터페이스를 정의하며, 해당 인터페이스를 상속받는 클래스는 기본적인 CRUD 메소드를 자동으로 구현받습니다.

package com.ssg.demo.v2.ssgdemov2.Repository;

import com.ssg.demo.v2.ssgdemov2.Entity.UserEntity;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.repository.NoRepositoryBean;
//import org.springframework.stereotype.Repository;

//@Repository
@NoRepositoryBean
public interface UserRepository extends JpaRepository<UserEntity, String> {

}

 

 

 

5. Controller 작성

 

 

MainController.java

• 역할: 클라이언트의 HTTP 요청을 처리하고, 해당 요청에 대한 응답을 생성하는 역할을 합니다. 비즈니스 로직을 직접 처리하지는 않고, 서비스나 리포지토리를 통해 처리된 결과를 반환합니다.
• 특징: Spring MVC에서 컨트롤러는 @Controller 어노테이션을 사용하여 표시되며, 주로 요청 매핑과 관련된 메소드를 정의합니다.

React - Spring boot 연결을 확인하기 위해 테스트 코드 작성

*React Cors 문제를 해결하기 위해 @CrossOrigin 어노테이션을 추가하였다. 본인의 React 포트가 다르다면 해당 포트 번호로 맞춰주어야 한다.

package com.ssg.demo.v2.ssgdemov2.Controller;

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping("/")
public class MainController {
    @GetMapping("check")
    public String check() {
        return "Success";
    }
}

 

6. 요청 확인

React에서 해당 url로 GET 요청이 정상적으로 처리되는지 확인하자.

 

 

내용이 너무 길어지기 때문에 본격적인 개발 스토리는 다음 게시글로 작성하겠습니다.

 

 

 

 

 

 

 

---

2. Spring boot + React 시작하기 2 (로그인 및 회원가입, 회원 관리 만들기) - 회원 가입

https://seokbong.tistory.com/247

Spring boot + React 시작하기 2 (로그인 및 회원가입, 회원 관리 만들기) - 회원 가입

 

 

---

[1]. SpringBoot Setting : https://oppr123.tistory.com/53

[2]. SpringBoot - React Setting : https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85

[3]. SpringBoot - React local proxy 404 error : https://velog.io/@postlist/Spring-Boot-React-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%97%B0%EB%8F%99