15. BLOG만들기-회원가입 구현

Jan 30, 2024

Contents

1. View 확인 2. redirect가 잘 되는지 확인 3. 리다이렉션의 원리 4. 요청 DTO 만들기 5. UserController가 UserRepository 의존하기 6. save 함수 호출 7. h2-console 가서 값 확인하기

1. View 확인

💡

<확인할 것들> 1. /join 식별자 요청 2. post 요청 → db변경을 할 예정이기 때문에 3. enctype 확인 4. html 파일의 input 태그에 name 값 확인 → name이 없으면 데이터 전송이 안 된다. 5. form안의 button type 확인 → submit이 아니면 버튼을 눌러도 전송되지 않는다.

2. redirect가 잘 되는지 확인

리다이렉트(Redirect)

: 쉽게 말하자면 요청한 애가 자기 안의 다른걸 다시 요청하는 것을 말한다.


@Controller
public class UserController {

    @PostMapping("/join")
    public String join(){

        return "redirect:/loginForm";
    }
}

버튼을 누르면 /join이 떠야하는데 return "redirect:/loginForm"; 코드로 인해 /join이 아닌 /loginForm이 뜬다.

→ /loginForm을 호출해서 응답한다.

어떻게 해서 최종적으로 /loginForm이 뜨게 되는 걸까?

3. 리다이렉션의 원리

헤더의 Status Code에 302가 적혀 있으면 Location에 적힌 주소로 다시 요청하도록 프로토콜이 정해져 있다.

→ /join 요청을 받고 응답해줄 때, Status Code의 302값을 보고 Location 키에 있는 /loginForm을 다시 요청하게 된다. loginForm을 요청하고 응답받을 때는 200(Status Code)을 응답받는다.

⇒ http요청(/join, /loginForm)이 두 번 일어나게 되고, /loginForm 페이지를 재사용 할 수 있다.

4. 요청 DTO 만들기

1. 정보 받는 법 3가지


String username = request.getParameter("username");


join(String username){}


join(DTO){}

우리는 3번 방법을 사용할 것이다.

2. JoinDTO 만들기

💡

데이터 전송 객체(DTO)란 프로세스 사이에서 데이터를 전송하는 객체를 말합니다. DTO 기법을 사용하면 중요한 정보를 노출시키지 않고 두 시스템(API와 서버 등) 간 통신을 원활하게 촉진할 수 있습니다. DTO는 프로그래밍 직업을 가진 사람들이 흔히 사용하는 솔루션입니다.


package shop.mtcoding.blog.user;

import lombok.Data;

public class UserRequest {

    @Data
    public static class JoinDTO {
        private String username;
        private String password;
        private String email;
    }
}

UserRequest


@PostMapping("/join")
    public String join(UserRequest.JoinDTO requestDTO){
        System.out.println(requestDTO);
        return "redirect:/loginForm";
    }

UserController

3. 데이터 잘 받는지 검증해보기

회원가입 후에 데이터가 제대로 들어오는지 콘솔창을 확인한다.

4. BoardRepository 만들기


package shop.mtcoding.blog.user;

import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;


@Repository // IoC에 new하는 방법
public class UserRepository {

    // DB에 접근할 수 있는 매니저 객체
    // 스프링이 만들어서 IoC에 넣어둔다.
    // DI에서 꺼내 쓰기만 하면된다.
    private EntityManager em;

    // 생성자 주입 (DI 코드)
    public UserRepository(EntityManager em) {
        this.em = em;
    }

    @Transactional // db에 write 할때는 필수
    public void save(UserRequest.JoinDTO requestDTO){
        Query query = em.createNativeQuery("insert into user_tb(username, password, email, created_at) values(?,?,?, now())");
        query.setParameter(1, requestDTO.getUsername());
        query.setParameter(2, requestDTO.getPassword());
        query.setParameter(3, requestDTO.getEmail());
        query.executeUpdate();
    }
}

5. UserController가 UserRepository 의존하기

6. save 함수 호출


@PostMapping("/join")
public String join(UserRequest.JoinDTO requestDTO){
    System.out.println(requestDTO);

    userRepository.save(requestDTO); // 모델에 위임하기
    return "redirect:/loginForm";
}