[Spring] JPA을 활용한 프로젝트 구조와 회원가입/로그인 흐름

스프링 프로젝트를 만듭니다.

• intellij IDEA 2022.3

• Spring Intializr
  - java 11
  - Grandle - Groovy
  - spring boot 2.7.6

  • Dependencies
    • Lombok
      • Spring Web
      • MySQL Driver
      • Spring Data JPA
      • Thymeleaf

  src > main > java > 패키지.프로젝트명 구조

• controller 패키지
  - api 패키지 > model entity 별로 하나씩 controller를 만들어준다.

  • page 패키지 > PageController
  • CrudController 추상메소드

• interfaces 패키지 > CrudInterface<Req,Res>

• model
  - config: entity 공통요소 설정

  • entity: DB 테이블과 연결되는 entity
  • enumclass: enum클래스 정의
  • network
    • request
      • response
      • Header클래스

• repository: 저장소

• service: api로직

src > main > resources 구조

• static: js/css
• templates: html, templates
• application.yml

회원가입으로 보는 흐름

👩 사용자가 도메인을 통해 들어옴! http://localhost:8890 (PageController)
💌 사용자 회원가입 페이지로 이동 http://localhost:8889/register (PageController)
🔒 회원가입 form 내용을 다 정상적으로 작성 후 완료버튼 클릭!
💥 버튼 클릭시 js fetch를 통해 api url(http://localhost:8890/api/admin)을 post방식으로 전송
(참고)

fetch('http://localhost:8890/api/admin', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            "transaction_time":`${new Date()}`,
            "resultCode":"ok",
            "description":"정상",
            "data":{
            	//우리가 만든데이터
                "userid":`${userid.value}`,
                "userpw":`${userpw.value}`,
                "name":`${name.value}`
            }
        }),
    })
		.then((res) => {
            alert('등록성공')
            location.href='/login';
            return; //리턴을 걸어서 진행하는 것을 막는다!
        })
        .then((data) => {
            console.log(data);
            return;
        })
        .catch((err)=>{
            alert('에러!!');
            location.reload();
        })

💦 api 안에 있던 @RequestMapping("/api/admin") 되있던 AdminApiController가 호출되면서
@PostMapping("")된 메소드를 실행한다. 이때 AdminLogicService의 요청을 매개변수로 담아 create메소드를 실행시킨다.
💨 AdminUserApiLogicService의 create메소드가 실행되면서 AdminUer entity 객체를 생성하고 요청한 값을 넣어 reposity에 저장시킨다 => DB에 저장 이때 Header 객체를 리턴시켜 성공 여부를 알려준다.
💟 다시 js fetch로 돌아와 성공시 .then을 실패시 .catch의 부분을 실행시킨다.

로그인으로 보는 흐름

👩 사용자가 도메인을 통해 들어옴! http://localhost:8890 (PageController)
💌 사용자 로그인 페이지로 이동 http://localhost:8889/login (PageController)
🔒 로그인 form 내용을 다 정상적으로 작성 후 완료버튼 클릭!
💥 버튼 클릭시 form의 post방식으로 action="/loginOk"로 이동! http://localhost:8889/loginOk (pageController)
💦 id,pw을 매개변수로 받는 pagecontroller의 loginOk 메소드에 도착! adminUserApiLogicService로부터 데이터를 읽어오도록한다.
💨 adminUserApiLogicService의 read(id,pw) 메소드로 이동해 repository.findbyIdAndPw으로 실제 등록된 회원인지 판단한다음 성공여부를 리턴시킨다.
💟 다시 pageController의 loginOk로 돌아와 성공에 따른 결과를 보여준다. 로그인이다보니 성공했을경우 세션을 저장하고 메인페이지로 보내준다. 실패할 경우 로그인페이지로 다시 돌아가도록 한다.

세션 저장하는 메소드
HttpSession session = request.getSession();
String name = adminUserApiLogicService.read(userid, userpw).getData().getName();
session.setAttribute("id", userid);
session.setAttribute("name", name);

결론