Spring MVC Project 회원가입 프로세스

회원가입 프로세스 예시

 

1. Client가 View에서 회원가입 요청

Client에서 View의 JSP페이지에 회원가입 양식을 작성하게 제출 버튼을 누르게 되면, 해당 Form의 데이터가 전송되어 회원가입 요청이 전달된다.

 

해당 예시에서 JSP파일의 코드를 보면,  <form action="${path}/member/enroll" method="post"> 로 설계했기에 "member/enroll"로 "post"방식으로 요청이 간다.

 

input코드들의 name에 따라 데이터가 변수이름을 갖고 전달이 되는데, 아이디는 name="id", 비밀번호는 name="password", 이름은 name="name"의 변수명을 가지게 된다.

 

버튼은 button type="submit" 으로 타입을 제출로 설정했기에 누르면 입력된 데이터로 요청을 제출하는 기능을 가진다.

 

<form action="${path}/member/enroll" method="post">
    <!-- Form -->
    <div class="form-group">
        <label for="exampleInputIcon4">아이디</label>
        <div class="input-group mb-4">
            <div class="input-group-prepend">
                <span class="input-group-text"><span class="fas fa-envelope"></span></span>
            </div>
            <input class="form-control" name="id" id="exampleInputIcon4" placeholder="example" type="text" aria-label="email adress">
        </div>
    </div>
    <!-- End of Form -->
    <div class="form-group">
        <!-- Form -->
        <div class="form-group">
            <label for="password">비밀번호</label>
            <div class="input-group mb-4">
                <div class="input-group-prepend">
                    <span class="input-group-text"><span class="fas fa-unlock-alt"></span></span>
                </div>
                <input class="form-control" name="password" id="password" placeholder="Password" type="password" aria-label="Password" required>
            </div>
        </div>
        <!-- End of Form -->
        <!-- Form -->
    <div class="form-group">
        <label for="exampleInputIcon4">이름</label>
        <div class="input-group mb-4">
            <div class="input-group-prepend">
                <span class="input-group-text"><span class="fas fa-envelope"></span></span>
            </div>
            <input class="form-control" name="name" id="exampleInputIcon4" placeholder="홍길동" type="text" aria-label="email adress">
        </div>
    </div>
    <!-- End of Form -->
    </div>
    <button type="submit" class="btn btn-block btn-primary">Create an account</button>
</form>

 

 

2. Controller로 요청 전달

controller.java에서 다음 코드로 요청이 전달된다.

	@Autowired
	private MemberService service;

	@PostMapping("/member/enroll")
	public String enroll(Model model, @ModelAttribute Member member) {
		int result = 0;
		try {
			result = service.save(member);
		} catch (Exception e) {}
		
		if(result > 0) {
			model.addAttribute("msg", "회원가입에 성공하였습니다.");
			model.addAttribute("location", "/");
		} else {
			model.addAttribute("msg", "회원가입에 실패하였습니다. 입력정보를 확인하세요.");
			model.addAttribute("location", "/member/enroll"); // 리다이렉트 설계
		}
		
		return "common/msg";
	}

 

전달받는 요청의 데이터가 미리 작성했던 java의 Member객체형태를 갖고 있으므로 받는 데이터를 @ModelAttribute Member member로 한꺼번에 다룰 수 있다. 이 데이터를 service의 save메소드로 저장처리를 하고, 결과에 따라 가입 성공/실패를 알린다. service코드의 해당 메소드는 다음과 같다.

	@Autowired
	private MemberMapper mapper;

	@Transactional(rollbackFor = Exception.class)
	public int save(Member member) {
		int result = 0;
		
		if(member.getMno() == 0) { // 저장하기
			result = mapper.insertMember(member);
		} else { // 회원정보 수정
			result = mapper.updateMember(member);
		}
		return result;
	}

 

주의) @Transactional어노테이션이 있어야만 DB의 데이터를 변경하는 SQL구문을 수행할 수 있다.

여기서 save메소드는 신규 회원 (mno == 0) 인 경우 저장을 하고, 기존 회원인 경우 정보수정을 하는 두 가지 처리를 한다. 처리의 SQL구문은 mapper에 연결된 메소드를 호출해서 연결하고 있다.

 

 

3. Mapper에서 SQL구문 전송

mapper.java에서 insertMember메소드를 가지고 있다.

@Mapper
public interface MemberMapper {
	int insertMember(Member member);
}

 

int insertMember는 mapper.xml에 연결된다.

	<insert id="insertMember" parameterType="Member" >
		INSERT INTO MEMBER (
		    mNO, ID, PASSWORD, ROLE, NAME, 
		    STATUS, 
		    ENROLL_DATE, MODIFY_DATE
		) VALUES(
		    0, #{id}, #{password}, DEFAULT, #{name}, 
		    DEFAULT,
		    DEFAULT, DEFAULT
		)
	</insert>

 

parameterType="Member"설계로 Member객체가 연결되고, SQL구문의 #{id}, #{password}, #{name}에 Member객체의 속성들이 이름에 맞게 입력된다.

 

 

4. DB에 데이터 저장

MySQL에서 전달된 구문을 실행하고, 데이터를 저장한다. 저장에 성공하면 MEMBER테이블에 column이 한 줄이 추가되므로 int insertMember가 1을 반환하고, 저장에 실패하면 0을 반환한다.

 

 

5. Controller에서 요청 처리, 결과 전달

회원 저장에 성공하면 mapper.xml에서 1 반환 -> mapper.java -> service.java -> controller.java로 값 1이 전달된다. 이에 회원가입에 성공했다는 처리를 하는 코드들이 실행되고, 정의된 view페이지에 전달된다. 해당 view페이지에서 model attribute에 따라 JSP EL표현들을 처리한다.

common/msg파일은 다음과 같다.

<body>
	<script>
		// 알림메세지를 띄움
		${script}
		alert("${msg}");

		// 페이지 이동
		location.replace("${pageContext.request.contextPath}${location}");
	</script>
</body>

 

msg의 내용이 알림창으로 나오고, 확인을 누르면 location으로 페이지가 자동 이동된다.

 

 

6. View 출력

처리된 view페이지가 client에게 출력된다.