DAY 51 - MVC HOMEWORK( 2024.09.12 )

MVC 구조에서의 흐름 설명

1. Model: 데이터를 관리하고 비즈니스 로직을 처리하는 부분이다. 여기서는 MemberDAO가 데이터베이스에 접근해서 아이디 중복 여부를 확인하는 역할을 한다.
2. View: 사용자에게 보여지는 화면을 처리하는 부분이다. 사용자가 아이디를 입력하면 그 결과를 보여주는 checkId.jsp가 View에 해당한다.
3. Controller: 사용자의 요청을 받아서 처리하는 부분이다. ControlServlet이 컨트롤러 역할을 하며, 요청을 분석한 후 적절한 모델과 뷰를 호출하는 역할을 한다.

focusout 이벤트를 걸어준다

만약 값이 없으면 "먼저 아이디를 입력" 띄어준다

 

 

memberWriteForm.jsp

 

아이디 중복체크 하기 !!

중복체크는 focusout 이벤트로 처리하기

 

사용가능 / 사용불가능 (div영역)

jQeury  ajax

 

http://localhost:8080/memberMVC/member/checkId.do

       

유효성 검사부터 하고

$.ajax({

    type:

    url:  '/memberMVC/member/checkId.do'

     

    success: function(data) { }

})

 

위에서 url로 요청하게 되면

---

1. 회원가입 페이지 (View)

사용자가 memberWriteForm.jsp에서 아이디를 입력하고,

입력이 완료되면 focusout 이벤트로 Ajax 요청이 발생한다.

 

memberWriteForm.jsp

<script type="text/javascript" src="http://code.jquery.com/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
    $('#id').on('focusout', function(){
        // 아이디 입력값 가져오기
        let id = $('#id').val(); 

        // 아이디가 비어 있는지 확인
        if (id === '') {
            $('#idDiv').html('아이디를 입력하세요.').css('color', 'red'); 
            return; // 입력값이 비어있으면 중단
        }

        console.log(id); // 아이디 값 출력 확인

        // 아이디 중복검사
        $.ajax({
            type: 'post',
            url: '/memberMVC/member/checkId.do',
            data: {'id': id},
            dataType: 'text',
            success: function(data){			   
                if (data == 0) {
                    $('#idDiv').html('사용 가능한 아이디입니다.').css('color', 'green');
                } else {
                    $('#idDiv').html('이미 사용 중인 아이디입니다.').css('color', 'red'); 
                }
            },
            error: function(e){
                console.log(e);
            }
        });
    });
});
</script>

 

여기서 url: '/memberMVC/member/checkId.do'는 서버의 ControlServlet으로 요청을 보내는 부분이다.

---

com.control.ControlServlet ( .do니까 여기로 넘어오고)

         ↓

2.ControlServlet (Controller)

사용자가 /member/checkId.do로 요청을 보내면, ControlServlet이 이를 처리한다.

String category = request.getServletPath();  // '/member/checkId.do' 추출
CommandProcess com = (CommandProcess)map.get(category);  // CheckIdService를 찾음

  command.properties 파일에서 /member/checkId.do 요청은 CheckIdService 클래스를 가리다.

 

command.properties 

/member/checkId.do=member.service.CheckIdService

#요청=클래스명
/member/writeForm.do=member.service.WriteFormService
/member/loginForm.do=member.service.LoginFormService
/member/checkId.do=member.service.CheckIdService

 

이 과정에서 CheckIdService가 호출되어 해당 비즈니스 로직을 처리하게 된다.

여기서 request를 통해서 자바파일을 부른 것이다.

 

view = com.requestPro(request, response);

         ↓

CheckIdService.java

    1. 데이터 읽기

    2. DB (사용 가능한지 불가능한지 알아내기)

    3. return "checkId.jsp"; 로 가야한다.

 

3. CheckIdService (Model)

CheckIdService는 실제로 데이터베이스에 접근해서 아이디 중복 여부를 확인하는 모델 역할을 합니다.

package member.service;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.control.CommandProcess;
import member.dao.MemberDAO;

public class CheckIdService implements CommandProcess {
    @Override
    public String requestPro(HttpServletRequest request, HttpServletResponse response) throws Throwable {
        
    // 요청으로부터 아이디 값을 가져옴
    String id = request.getParameter("id");

    // 데이터베이스로부터 아이디 중복 여부를 확인
    MemberDAO memberDAO = MemberDAO.getInstance();
    int su = memberDAO.isExistId(id);

    // 중복 체크 결과를 request 객체에 저장
    request.setAttribute("result", su);

    // forward를 위해 checkId.jsp로 경로 반환
    return "/member/checkId.jsp";  
    }
}

 

 

• request.setAttribute("result", su)
  • 데이터베이스에서 얻은 중복 체크 결과 su를 request 객체에 저장한다. 이 request 객체는 forward를 통해 그대로 전달된다.
• return "/member/checkId.jsp";
  • ControlServlet에 forward할 JSP 페이지 경로를 반환합니다. 여기서 반환된 JSP는 아이디 중복 체크 결과를 출력할 페이지인 checkId.jsp다.

 

         ↓

com.control.ControlServlet

         ↓ forward

ControlServlet에서의 forward 처리

ControlServlet에서 forward는 다음과 같은 흐름으로 이루어진다.

protected void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 요청을 처리할 CommandProcess 인스턴스 호출
    CommandProcess com = (CommandProcess)map.get(category);

    String view = null;
    
    try {
        view = com.requestPro(request, response);  // CheckIdService에서 반환된 JSP 경로를 받음
    } catch (Throwable e) {
        e.printStackTrace();
    }
    
    // forward를 통해 지정된 JSP로 제어권을 넘김
    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
    dispatcher.forward(request, response);  // JSP로 제어권을 넘김
}

 

1. view = com.requestPro(request, response);
   • CheckIdService에서 반환된 JSP 경로를 view 변수에 저장합니다. 여기서는 /member/checkId.jsp가 된다.
2. RequestDispatcher dispatcher = request.getRequestDispatcher(view);
   • RequestDispatcher 객체를 생성하여 view(여기서는 /member/checkId.jsp)로의 이동 준비를 한다.
3. dispatcher.forward(request, response);
   • forward 메서드를 사용해 클라이언트로부터 받은 request와 response 객체를 checkId.jsp로 넘긴다. 이때 클라이언트는 이동을 인식하지 못하며, 서버 내부에서만 이동이 일어난다.

 

 

checkId.jsp

"exist" or "non_ exist" (사용불가능 or 사용가능)

를 들고 data로 다시 돌아온다.

 

4. checkId.jsp (View)

CheckIdService가 처리한 결과를 보여주는 페이지이다.

request 객체로 전달된 값을 사용하여 결과를 출력한다.

<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
    // CheckIdService에서 전달받은 result 값 출력
    int result = (Integer)request.getAttribute("result");
%>

<%= result %> // 결과를 화면에 출력 (0 또는 1)

 

그러나 이 페이지는 실제로는 Ajax 요청에 의해 호출되기 때문에 결과는 JavaScript로 전달된다.

Ajax가 결과를 받아서, 아이디가 사용 가능한지 또는 중복인지에 대한 메시지를 화면에 표시다.

 

$.ajax는 다시 돌아온다.

그럼 이제 그 값을 가지고 사용가능 / 사용불가능을 찍어내면 된다. (div영역에)

전체 흐름 요약

1. **View (memberWriteForm.jsp)**에서 사용자가 아이디를 입력하면, Ajax 요청으로 **Controller (ControlServlet)**에 /checkId.do 요청이 보내진다.
2. Controller는 이 요청을 분석해 **Model (CheckIdService)**을 호출한다.
3. Model은 **DAO (MemberDAO)**를 통해 데이터베이스에서 아이디 중복 여부를 확인한 후, 결과를 **View (checkId.jsp)**로 전달한다.
4. View는 그 결과를 Ajax로 받아서, 사용자 화면에 중복 여부 메시지를 표시한다.

이와 같은 흐름을 통해 MVC 패턴이 각각의 역할을 분담하면서 아이디 중복 체크 기능을 구현하는 것 !!

 

 

forward와 redirect의 차이

• forward: 서버 내부에서만 페이지 이동이 이루어지며, 클라이언트는 이를 알지 못한다. 따라서 request 객체에 저장된 데이터가 그대로 유지된다.
• redirect: 클라이언트에게 새로운 페이지로 이동하라는 명령을 내리며, request 객체는 유지되지 않는다.

forward는 주로 요청에 대한 결과를 바로 보여줄 때, 같은 요청에 대한 추가 작업을 수행할 때 사용된다.

반면, redirect는 페이지 이동이나 상태 변경 후 다시 요청할 때 주로 사용된다.

 

 

Request와 Response 요약

1. Request(요청):
   • 사용자가 데이터를 입력하고 서버에 요청을 보낸다.
   • 이 요청은 request 객체에 의해 서버에서 처리되며, 주로 getParameter() 메서드를 통해 사용자가 보낸 데이터를 서버에서 확인한다.
2. Response(응답):
   • 서버가 요청을 처리한 후, 처리 결과를 클라이언트로 다시 응답한다.
   • response 객체를 사용하여 클라이언트에게 데이터를 보내거나 화면을 업데이트한다.

    // forward를 위해 checkId.jsp로 경로 반환
    return "/member/checkId.jsp";

---

강사님과 다른 부분

 

checkId.jsp

<%@page import="member.dao.MemberDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%-- <%
    // CheckIdService에서 전달받은 result 값 출력
    int result = (Integer)request.getAttribute("result");
%>

<%= result %> --%>

<c:if test="${su==1 }">exist</c:if>
<c:if test="${su==0 }">non_exist</c:if>

 

 

member.js

// 아이디 중복 검사
$(function () {
    $('#id').on('focusout', function(){
        let id = $('#id').val(); 

        if (id === '') {
            $('#idDiv').html('아이디를 입력하세요.').css('color', 'red'); 
            return;
        }

        console.log(id);

        $.ajax({
            type: 'post',
            url: '/memberMVC/member/checkId.do', 
            data: {'id': id},
            dataType: 'text',
            success: function(data){			   
                if (data.trim() == 'exist') {
                    $('#idDiv').html('이미 사용 중인 아이디입니다.').css('color', 'red');
                } else {
                    $('#idDiv').html('사용가능한 아이디입니다.').css('color', 'green'); 
                	$('#check').val($('#id').val());
				}
            },
            error: function(e){
                console.log(e);
            }
        });
    });
});

 

나는 자바코드를 이용해서 했고 / 강사님은 JSTL 코드를 이용했다 !!