STEP 02 - 사용자 관리 기본 코드 추가 및 설정

💡
프로젝트 진행을 위한 기본 코드를 작성할 수 있다.
HttpServletRequest 와 Model 를 구분해서 사용할 수 있다.

 

UserController

package com.tenco.blog_v1.user;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

@Slf4j
@Controller
public class UserController {

    /**
     * 회원가입 페이지 요청
     * 주소설계 : http://localhost:8080/join-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    public String joinForm(Model model) {
        log.info("회원가입 페이지");
        model.addAttribute("name", "회원가입 페이지");
        return "user/join-form"; // 템플릿 경로 : user/join-form.mustache
    }

    /**
     * 로그인 페이지 요청
     * 주소설계 : http://localhost:8080/login-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    public String loginForm(Model model) {
        log.info("로그인 페이지");
        model.addAttribute("name", "로그인 페이지");
        return "user/login-form"; // 템플릿 경로 : user/join-form.mustache
    }

    /**
     * 회원 정보 수정 페이지 요청
     * 주소설계 : http://localhost:8080/user/update-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    public String updateForm(Model model) {
        log.info("회원 수정 페이지");
        model.addAttribute("name", "회원 수정 페이지");
        return "user/update-form"; // 템플릿 경로 : user/join-form.mustache
    }

}

 

💠Spring에서 템플릿 엔진을 사용할 때 데이터를 뷰로 전달하는 방식

HttpServletRequest 객체 사용

• HttpServletRequest는 기본 서블릿 개념에서 사용됩니다.
• 모든 HTTP 요청에 대한 데이터를 관리할 수 있으며, 세션이나 쿠키 같은 정보도 함께 처리할 수 있습니다.
• 서블릿 API와 연관되어 있어 구조가 약간 복잡할 수 있습니다.

Model 객체 사용

• Model은 Spring MVC에서 데이터 전달 전용으로 만들어졌습니다.
• 컨트롤러에서 뷰로 데이터를 간편하게 전달할 수 있습니다.
• 코드가 간결하며, Spring 프레임워크와 깊이 연관되어 있어 유지보수나 코드 가독성

핵심 정리

• Model: 간단하고 Spring MVC에서 자주 사용되는 방식입니다. 일반적인 데이터 전달에 적합합니다.
• HttpServletRequest: 복잡한 요청 처리, 세션 관리가 필요한 경우 적합합니다. 서블릿 기반 작업에 적합합니다.

 

HttpServletRequest 클래스 사용

package com.tenco.blog_v1.user;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Slf4j
@Controller
public class UserController {

    /**
     * 회원가입 페이지 요청
     * 주소설계 : http://localhost:8080/join-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    @GetMapping("/join-form")
    public String joinForm(Model model) {
        log.info("회원가입 페이지");
        model.addAttribute("name", "회원가입 페이지");
        return "user/join-form"; // 템플릿 경로 : user/join-form.mustache
    }

    /**
     * 로그인 페이지 요청
     * 주소설계 : http://localhost:8080/login-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    @GetMapping("/login-form")
    public String loginForm(Model model) {
        log.info("로그인 페이지");
        model.addAttribute("name", "로그인 페이지");
        return "user/login-form"; // 템플릿 경로 : user/join-form.mustache
    }

    /**
     * 회원 정보 수정 페이지 요청
     * 주소설계 : http://localhost:8080/user/update-form
     *
     * @param model
     * @return 문자열
     * 반환되는 문자열을 뷰 리졸버가 처리하며
     * 머스태치 템플릿 엔진을 통해서 뷰 파일을 렌더링 합니다.
     */
    @GetMapping("/user/update-form")
    public String updateForm(Model model) {
        log.info("회원 수정 페이지");
        model.addAttribute("name", "회원 수정 페이지");
        return "user/update-form"; // 템플릿 경로 : user/join-form.mustache
    }

}

 

join-form.mustache

{{> layout/header}}

<main class="container p-5 content">
    <div class="card">
        <div class="card-header"><b>{{name}}</b></div>
        <div class="card-body">
            <form action="/join" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter username" name="username">
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter password" name="password">
                </div>

                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="enter email" name="email">
                </div>

                <button type="submit" class="btn btn-primary form-control">회원가입</button>
            </form>

        </div>
    </div>

</main>

{{> layout/footer}}

 

login-form.mustache

{{> layout/header}}

<main class="container p-5 content">
    <div class="card">
        <div class="card-header"><b>{{name}}</b></div>
        <div class="card-body">
            <form action="/login" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter username" name="username">
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter password" name="password">
                </div>

                <button type="submit" class="btn btn-primary form-control">로그인</button>
            </form>

        </div>
    </div>

</main>

{{> layout/footer}}

 

udpate-form.mustache

{{> layout/header}}

<main class="container p-5 content">
    <div class="card">
        <div class="card-header"><b>{{name}}</b></div>
        <div class="card-body">
            <form action="/user/update" method="post" enctype="application/x-www-form-urlencoded">
                <div class="mb-3">
                    <input type="text" class="form-control" placeholder="enter username" name="username" disabled>
                </div>

                <div class="mb-3">
                    <input type="password" class="form-control" placeholder="enter password" name="password">
                </div>

                <div class="mb-3">
                    <input type="email" class="form-control" placeholder="enter email" name="email">
                </div>

                <button type="submit" class="btn btn-primary form-control">회원정보수정</button>
            </form>

        </div>
    </div>

</main>

{{> layout/footer}}