inblog logo
|
vosw1
    Spring

    Spring으로 구현

    Jan 26, 2024
    Spring으로 구현
    @RestController // 리턴시 그 문자를 그대로 응답
@Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것
     

    1. UserController 구현

    package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

//@RestController // 리턴시 그 문자를 그대로 응답
@Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것
public class UserController { // 메모리에 띄워야 함

    @GetMapping("/joinForm")
    public String joinForm(){
        return "joinForm";
    }
}
    notion image
    • mustache는 저장소가 정해져 있음
    notion image
    notion image
    • 폴더 이름, 확장자 생략 가능->View Resolver 클래스가 붙여줌
    - 포워드(내부적 요청)와 동일
    서버가 클라이언트에게 응답을 전달하는 개념
     
    • mustache : 템플릿 엔진
    데이터와 템플릿을 결합하여 동적으로 문서를 생성하는 데 사용
    mustache 플러그 인 설치
    설치 후 바로 실행이 안될 수 있으니 실행시켜야 함!
    notion image
    html > mustache로 변경
    notion image
     
    notion image
    • form태그 : input태그를 한번에 날리기 위해 사용
    notion image
    • name이 없으면 키 값이 안 날라감
    • 폼태그에서 데이터를 요청하면 바디로 날아감
    그 바디 데이터는 마임 타임 : xform
    바디 데이터는 마임 타임 : x-www-form-urlencoded
    • get요청은 쿼리 스트링해서 날라감
    • input타입의 종류가 많음
    • submit은 버튼이랑 달리 액션을 발동시키는 것: 해당 주소로 통신 요청을 하는것
    form태그 안에 있으면 디폴트 값이 submit!
    밖에 있으면 디폴트 값이 버튼! 다름!
     

    2. joinForm page 구현

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>회원가입 페이지</h1>
<hr>
<form action="/join" method="post">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <input type="email" name="email" placeholder="email">
    <button>회원가입</button>
</form>
</body>
</html>
    notion image
    notion image

    3. 값을 받는 4가지 방법

    • join메서드를 때리는 애? 디스패처 서블릿
    톰캣이 디스패처 서블릿을 호출
    톰캣이 만들어서 객체(HttpServletRequest, HttpServletResponse) 전달해줌
     
    1) 적기만 하면 됨
    @PostMapping("/join")
    public String join(HttpServletRequest request) {
       String username = request.getParameter("username");
       String password = request.getParameter("password");
       String email = request.getParameter("email");
     
    2) 파라미터에 바로 입력
    바디 데이터가 날아오니까 가능한 것 아니면 터짐!
    @PostMapping("/join")
    public String join(@Valid @ModelAttribute UserForm userF, BindingResult bindingResult) {
              }
     
    3) @Valid
    유효성 검사를 엄청 편하게 만들어줌
    @ModelAttribute // 커맨드 객체를 모델에 추가
@Valid // 유효성 검사를 활성화
BindingResult // 파라미터를 통해 유효성 검사 결과를 확인
    @PostMapping("/submitForm")
public String submitForm(@Valid @ModelAttribute MyForm myForm, BindingResult bindingResult) {
    if (bindingResult.hasErrors()) {
        // 유효성 검사 에러가 있을 때 처리
        return "errorPage";
    }
    return "";
}
     
    1), 2)번 방법으로 값 받아오기
    package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

//@RestController // 리턴시 그 문자를 그대로 응답
@Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것
public class UserController { // 메모리에 띄워야 함

    @GetMapping("/joinForm")
    public String joinForm() {
        return "joinForm"; // 폴더이름도 확장자 생략 가능->뷰 리절브 클래스가 붙여줌 - 포워드(내부적 요청)와 동일
    }

    @PostMapping("/join")
    public String join(String username, String password, String email) {
//        String username = request.getParameter("username");
//        String password = request.getParameter("password");
//        String email = request.getParameter("email");

        System.out.println("username : " + username);
        System.out.println("password : " + password);
        System.out.println("email : " + email);
        return "";
    }
}
    notion image
    if (username.length() > 10) {}
// 파일 리턴이라 응답이 두 번 되어서 끈김(반이중이니까)
if (username.length() > 10) {    return;} //끊어버리면 디스패처가 발동 안함
     

    4. error page 만들기

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>error</title>
</head>
<body>
<h1>에러 : 잘못된 요청을 하셨어요</h1>
</body>
</html>
    notion image
    정상적으로 해도 에러가 뜸 > 버그가 있음
    이름 error라고 하지말것!
    notion image
    notion image

    5. main 페이지 만들기

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>main page</h1>
<hr>
</body>
</html>
     

    6. 유효성 검사 후 DB에 연결해서 삽입하기

    • 검사 전에 연결하면 제약 조건 위배로 오류가 터질 수 있음
    • 이때 DB에서 오류가 나도 컨트롤러가 자기 역할을 안해서 오류 → 컨트롤러의 잘못임!
    레이어의 책임을 분명하게 해야함!
     

    7. 프론트에서 유효성 검사하기

    유효성 검사는 프론트와 백엔트 모두 해야함!

    백엔드는 유효성 검사 필수!!

    프론트가 안하면 ux가 안 좋아질 뿐, 백엔드가 안하면 망함
     
    정상적인 접근으로는 불가능하지만 보낼 수 있는 방법이 있음
    ex) postman 툴로 제약 조건 무시하고 마음대로 post 요청 가능
    notion image
    notion image
    notion image
     

    8. main page 만들기

    package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class BoardController { //main을 바로 호출하는 컨트롤러
    
    @GetMapping("/main")
    public String main() {
        return "main";
    }
}
    notion image

    9. redirection 사용하기

    return "redirect:/main"; // 이미있으니 리다이렉션해야함
    redirection : 컨트롤러가 있으면 뷰를 리턴하는게 아니라 만들어놓은 컨트롤러를 리턴!
    재사용!
    package controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

//@RestController // 리턴시 그 문자를 그대로 응답
@Controller // 리턴시 파일명을 찾아 응답해줌 -> 포워드 해주는 것
public class UserController { // 메모리에 띄워야 함

    @GetMapping("/joinForm")
    public String joinForm() {
        return "joinForm"; // 폴더이름도 확장자 생략 가능->뷰 리절브 클래스가 붙여줌 - 포워드(내부적 요청)와 동일
    }

    @PostMapping("/join")
    public String join(String username, String password, String email) {
//        String username = request.getParameter("username");
//        String password = request.getParameter("password");
//        String email = request.getParameter("email");

        System.out.println("username : " + username);
        System.out.println("password : " + password);
        System.out.println("email : " + email);

        if (username.length() > 10) {
            return "error-404";
        }

        return "redirect:/main"; // 이미있으니 리다이렉션해야함
    }
}
    Share article

    vosw1

    RSS·Powered by Inblog