[IntelliJ] 회원가입 예제(MVC) - (4) 뷰(JSP) 분리하기

• 관련 글

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (1) 회원 목록 조회

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (2) 회원 가입

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (3) 회원 정보 수정

- [IntelliJ] 회원가입 예제(MVC) - (4) 뷰(JSP) 분리하기

---

[IntelliJ] JAVA 서블릿 + MySQL + MVC 회원가입 예제 - (1) 뷰(JSP) 분리하기

 

이전 포스팅에서 작성했던 학생 목록 서블릿(StudentListServlet)은 컨트롤러, 모델, 뷰 역할을 모두 하나에서 담당했다.

 

Model-View-Controller 올인원 방식

 

이를 개선하여 StudentListServlet으로부터 출력 부분을 분리하여 JSP를 만들 것이다. 출력은 JSP에서 맡는다.

 

뷰의 분리 - Model-Controller + View

클라이언트로부터 요청이 들어오면 StudentListServlet은 데이터를 준비(모델 역할)하여 JSP에 전달(컨트롤러 역할)한다. JSP는 서블릿이 준비한 데이터로 웹 브라우저로 출력할 화면을 만든다.

 

VO = DTO

데이터를 JSP에 전달하려면 데이터를 담을 객체가 필요하다. 이렇게 데이터를 담아 전달할 용도로 사용하는 객체를 Value Object(VO, 값 객체) 또는 Data Transfer Object(DTO, 데이터 수송 객체)라고 한다.

또한 이러한 데이터는 Business Domain(업무 영역)의 데이터를 포현하기 때문에 Domain Object(도메인 객체)라고도 한다.

 

VO 생성

vo 패키지와 Student 클래스를 생성한다.

 

Student.java

public class Student {
    protected String studentNo;
    protected String department;
    protected String studentName;
    protected int grade;
    protected String gender;
    protected int age;
    protected String phoneNumber;
    protected String address;
 
    public String getStudentNo() {
        return studentNo;
    }
 
    public Student setStudentNo(String studentNo) {
        this.studentNo = studentNo;
        return this;
    }
 
    public String getDepartment() {
        return department;
    }
 
    public Student setDepartment(String department) {
        this.department = department;
        return this;
    }
 
    public String getStudentName() {
        return studentName;
    }
 
    public Student setStudentName(String studentName) {
        this.studentName = studentName;
        return this;
    }
 
    public int getGrade() {
        return grade;
    }
 
    public Student setGrade(int grade) {
        this.grade = grade;
        return this;
    }
 
    public String getGender() {
        return gender;
    }
 
    public Student setGender(String gender) {
        this.gender = gender;
        return this;
    }
 
    public int getAge() {
        return age;
    }
 
    public Student setAge(int age) {
        this.age = age;
        return this;
    }
 
    public String getPhoneNumber() {
        return phoneNumber;
    }
 
    public Student setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
        return this;
    }
 
    public String getAddress() {
        return address;
    }
 
    public Student setAddress(String address) {
        this.address = address;
        return this;
    }
}

 

Setter의 리턴값을 Student로 하여 Setter를 연속적으로 호출하여 값을 할당할 수 있게 했다.

 

예)

new Student()
.setStudentNo(rs.getString("STUDENT_NO"))
.setDepartment(rs.getString("DEPARTMENT"))
.setStudentName(rs.getString("STUDENT_NAME"))
.setGrade(rs.getInt("GRADE"))
.setGender(rs.getString("GENDER"))
.setAge(rs.getInt("AGE"))
.setPhoneNumber(rs.getString("PHONE_NUMBER"))
.setAddress(rs.getString("ADDRESS"))

 

StudentListServlet.java 변경

다음과 같이 StudentListServlet.java를 변경한다.

 

StudentListServlet.java

@WebServlet("/student/list")
public class StudentListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
 
        try {
            // context parameter를 이용한 JDBC 연결
            ServletContext sc = this.getServletContext();
            Class.forName(sc.getInitParameter("driver"));
            conn = DriverManager.getConnection(
                    sc.getInitParameter("url"),
                    sc.getInitParameter("username"),
                    sc.getInitParameter("password")
            );
 
            stmt = conn.createStatement();
            rs = stmt.executeQuery(
                    "SELECT STUDENT_NO, DEPARTMENT, STUDENT_NAME, GRADE, GENDER, AGE, PHONE_NUMBER, ADDRESS" +
                            " FROM STUDENT" +
                            " ORDER BY STUDENT_NO");
 
            resp.setContentType("text/html; charset=UTF-8");
            /*
            뷰 분리를 위해 출력 코드 주석처리
            PrintWriter out = servletResponse.getWriter();
            out.println("<html><head><title>학생 목록</title></head>");
            out.println("<body><h1>학생 목록</h1>");
            out.println("<p><a href='add'>신규 학생</a></p>");
            while (rs.next()) {
                out.println(
                        rs.getString("STUDENT_NO") + ", " +
                                rs.getString("DEPARTMENT") + ", " +
                                "<a href='update?student_no=" + rs.getString("STUDENT_NO") + "'>" +
                                rs.getString("STUDENT_NAME") + "</a>, " +
                                rs.getInt("GRADE") + ", " +
                                rs.getString("GENDER") + ", " +
                                rs.getInt("AGE") + ", " +
                                rs.getString("PHONE_NUMBER") + ", " +
                                rs.getString("ADDRESS") + "<br>");
            }
            out.println("</body></html>");*/
 
            List<Student> students = new ArrayList<>();
            while (rs.next()) {
                students.add(new Student()
                        .setStudentNo(rs.getString("STUDENT_NO"))
                        .setDepartment(rs.getString("DEPARTMENT"))
                        .setStudentName(rs.getString("STUDENT_NAME"))
                        .setGrade(rs.getInt("GRADE"))
                        .setGender(rs.getString("GENDER"))
                        .setAge(rs.getInt("AGE"))
                        .setPhoneNumber(rs.getString("PHONE_NUMBER"))
                        .setAddress(rs.getString("ADDRESS"))
                );
            }
 
            req.setAttribute("students", students);
 
            RequestDispatcher rd = req.getRequestDispatcher(
                    "/student/StudentList.jsp"
            );
            rd.include(req, resp);
        } catch (SQLException | ClassNotFoundException e) {
            throw new ServletException(e);
        } finally {
            try {
                if (rs != null) rs.close();
                if (stmt != null) stmt.close();
                if (conn != null) conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

변경 내용은 다음과 같다.

 

1) HTML 출력 코드 제거

우선 HTML을 출력하는 코드를 제거한다. 학생 목록 화면을 생성하고 출력하는 것은 StudentList.jsp가 담당할 것이다.

 

2) JSP에 전달할 학생 목록 데이터 준비

JSP로 전달하기 위해 List 객체에 DB에서 가져온 학생 목록 데이터를 담는다.

 

3) RequestDispatcher를 이용한 forward, include

RequestDispatcher 객체를 이용해 JSP로 화면 생성을 위임한다.

이 객체는 HttpServletRequest의 getRequestDispatcher()를 통해 얻는다.

getRequestDispatcher()를 호출할때 어디로 위임할 것인지 매개변수로 지정해줘야한다.

 

RequestDispatcher 객체를 얻은 후에는 foward 혹은 include 방식으로 위임한다.

foward로 위임하면 제어권이 넘어간 후 다시 돌아오지 않는다.

include로 위임하면 작업이 끝난 후 다시 제어권이 돌아온다.

 

위 코드에서는 include 방식으로 StudentList.jsp에 작업을 위임했다.

 

4) ServletRequest(HttpServletRequest)를 통한 데이터 전달

StudentListServlet의 HttpServletRequest 객체는 StudentList.jsp와 공유되기 때문에 request에 데이터를 담아두면 StudentList.jsp에서 꺼내쓸 수 있다.

StudentList.jsp를 include할 때 HttpServletRequest와 HttpServletResponse의 인스턴스를 함께 넘겼다.

즉 StudentListServlet과 StudentList.jsp는 request와 response를 공유한다.

이 부분을 이용해 데이터를 전달할 수 있다.

 

ServletRequest는 클라이언트의 요청을 다루는 기능 외에 어떤 값을 보관하는 보관소 기능도 갖는다.

setAttribute()를 호출해서 값을 보관할 수 있고 getAttribute()를 호출해서 값을 꺼낼 수 있다.

위 코드에서는 이 기능을 사용해서 students(학생 목록)을 StudentList.jsp에 전달한다.

 

StudentList.jsp 작성

프로젝트의 웹 콘텐츠 디렉토리에 student 디렉토리와 StudentList.jsp를 새로 생성해서 작성한다.

 

StudentList.jsp

<%@ page import="com.atoz_develop.spms.vo.Student" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>학생 목록</title>
</head>
<body>
<h1>학생 목록</h1>
<p><a href="add">신규 학생</a></p>
<%
    List<Student> students = (ArrayList<Student>)request.getAttribute("students");
    for(Student student: students) {
%>
<%=student.getStudentNo()%>,
<%=student.getDepartment()%>,
<a href="update?student_no=<%=student.getStudentNo()%>"><%=student.getStudentName()%></a>,
<%=student.getGrade()%>,
<%=student.getGender()%>,
<%=student.getAge()%>,
<%=student.getPhoneNumber()%>,
<%=student.getAddress()%><br>
<%
    }
%>
</body>
</html>

 

page 지시자의 import 속성으로 필요한 클래스를 import한다.

참고로 page 지시자의 import 속성은 JSP 엔진이 서블릿 소스를 생성할때 아래와 같이 import 코드로 변환된다.

 

 

StudentListServlet이 넘겨준 학생 목록 데이터를 꺼내기 위해 request.getAttribute()를 호출하였다.

그리고 반복문과 표현식 <%= %>을 사용해서 학생 목록을 출력하였다.

 

실행 결과

 

전체 웹 프로젝트가 동일한 MVC 아키텍처를 갖도록 회원 가입, 회원 정보 수정을 처리하는 서블릿도 위와 같이 뷰를 분리한다.

---

• 관련 글

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (1) 회원 목록 조회

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (2) 회원 가입

- [IntelliJ] 회원가입 예제(JAVA + MySQL) - (3) 회원 정보 수정

- [IntelliJ] 회원가입 예제(MVC) - (4) 뷰(JSP) 분리하기