06. CV패턴 구현 (템플릿엔진 (mustache))

Jan 26, 2024

Contents

일단 구현이 된 형태는 JoinForm에 접속하여 ID, PW, E-mail을 입력하면 main으로 넘어가고 아닌 경우에는 error를 발생하는 웹 사이트를 구현하였다. 코드를 참고하면서 설명을 읽어보면 더욱 이해가 될 것이다. 참고로 톰캣과 스프링에서 디스패쳐를 구현 해주기 때문에 나는 유효성 검사와 컨트롤러만 구현하였다. 이제부터는 쭉 이렇게 구현이 될 것이니 참고하기 바란다!

코드 모음

Controller

UserController


package com.example.demo.controller;

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

//@RestController // 리턴시에 그 문자를 그대로 응답
@Controller     // 리턴시에 파일을 응답 -> 파일을 찾아서 포워드(forword) 해줌
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);

        // 1

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

        // 2

        return "redirect:/main";
    }

//    @GetMapping("/joinForm/{id}")
//    public String joinForm(@PathVariable int id) {
//        System.out.println("id : " + id);
//        return "joinForm";
//    } // 이러면 뒤에 어떤 숫자를 넣든 같은 페이지가 나온다.
}

BoardController


package com.example.demo.controller;

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

@Controller
public class BoardController {

    @GetMapping("/main")
    public String main() {
        return "main";
    }
}

mustache (템플릿 엔진)

mustache 파일 만드는법

템플릿 폴더 밑에 만든 확장자 파일을 mustache를 만들어서 찾으련는 클레스에 @controller로 어노테이션을 붙이면

main


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

joinForm


<!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" required maxlength="10">
    <input type="password" name="password" placeholder="password" required>
    <input type="email" name="email" placeholder="email" required>
    <button>
        회원 가입
    </button>
</form>
</body>
</html>

error-404


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>에러 : 잘못된 요청을 하셨어요</h1>
</body>
</html>

결국에는 코드를 보면 앞의 정리한 내용과 동일한 것이 대부분이다. 그러니 새롭게 알게 된 내용을 부분의 내용을 들고 와서 따로 정리하겠다. Controller-UserController 부분의 어느 코드인지 언급 하여 설명을 적어 두겠다.

구현 과정

mustache - joinForm

input의 데이터를 Button 클릭 시 action(안에적은 내용으로 이동)을 받도록 하는 방법 (액션 발동) → Button을 submit 으로 type을 지정하면 가능한데 form 안의 Button은 기본 값으로 submit type을 가지고 있어서 생략이 가능하다!

💡

HTML에서 <form> 태그는 사용자 입력을 받기 위한 폼을 정의하는 태그입니다. 폼은 웹 페이지에서 사용자가 데이터를 입력하고 서버로 제출할 수 있는 기능을 제공합니다.


<form action="/join" method="post">
    <input type="text" name="username" placeholder="username" required maxlength="10">
    <input type="password" name="password" placeholder="password" required>
    <input type="email" name="email" placeholder="email" required>
    <button>
        회원 가입
    </button>
</form>

🌟

프론트의 유효성 검사 방법 required → 입력 하기전에 넘어가지 않도록 한다. 값이 없으면 submit 안되도록

maxlength="4" → 4이상으로 입력이 안됨 프론트의 유효성 검사

하지만 비정상적인 접근으로 뚫릴 수 있으니까 백도 유효성 검사를 꼭 해야 한다.

required,maxlength="10"

Controller - UserController(코드 확인하기)

“mustache - joinForm” 에서 입력 받는 키값의 데이터를 받는 방법


@PostMapping("/join")
public String join(HttpServletRequest request) {
    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 "main";
}


@PostMapping("/join")
public String join(String username, String password, String email) {
    System.out.println("username : " + username);
    System.out.println("password : " + password);
    System.out.println("email : " + email);
    return "main";
}