FreeHand

Servlet과 JSP 본문

Web/...

Servlet과 JSP

Jinn 2023. 10. 15. 21:38

애플리케이션 요구사항

회원 정보

  • 이름(username)
  • 나이(age)

기능 요구사항

  • 회원 저장
  • 회원 조회

 

 

회원 도메인

@Getter @Setter
@NoArgsConstructor
public class Member {
	
    private Long id;
    private String username;
    private int age;
    
    public Member(String username, int age) {
    	this.username = username;
        this.age = age;
    }
}

 

 

회원 저장소

public class MemberRepository {
	
    private static Map<Long, Member> store = new HashMap<>();
    private static long sequence = 0L;
    
    // 싱글톤
    private static final MemberRepository instance = new MemberRepository();
    
    public static MemberRepository getInstance() {
    	return instance;
    }
    
    private MemberRepository() {
    }
    
    public Member save(Member member) {
    	member.setId(++instance);
        store.put(member.getId(), member);
        return member;
    }
    
    public Member findById(Long id) {
    	return store.get(id);
    }
    
    public List<Member> findAll() {
    	return new ArrayList<>(store.values());
    }
    
    // 테스트코드에서 사용
    public void clearStore() {
    	store.clear();
    }
}

싱글톤 패턴을 위해 생성자의 접근자를 private으로 한다.

 

 

회원 등록 폼

@WebServlet(name = "memberFormServlet", urlPatterns = "/servlet/members/new-form")
public class MemberFormServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        
        PrintWriter w = response.getWriter();
        w.write("<!DOCTYPE html>\n" +
                "<html>\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <title>Title</title>\n" +
                "</head>\n" +
                "<body>\n" +
                "<form action=\"/servlet/members/save\" method=\"post\">\n" +
                "    username: <input type=\"text\" name=\"username\" />\n" +
                "    age: <input type=\"text\" name=\"age\" />\n" +
                "    <button type=\"submit\">전송</button>\n" +
                "</form>\n" +
                "</body>\n" +
                "</html>\n");
    }
}

메시지 바디에 username과 age 정보를 /servlet/members/save로 post 요청을 보낸다.

 

 

회원 저장

@WebServlet(name = "memberSaveServlet", urlPatterns = "/servlet/members/save")
public class MemberSaveServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();
    
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        int age = Integer.parseInt(request.getParameter("age"));
        
        Member member = new Member(username, age);
        memberRepository.save(member);
        
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        
        PrintWriter w = response.getWriter();
        w.write("<html>\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "</head>\n" +
                "<body>\n" +
                "성공\n" +
                "<ul>\n" +
                "    <li>id="+member.getId()+"</li>\n" +
                "    <li>username="+member.getUsername()+"</li>\n" +
                "    <li>age="+member.getAge()+"</li>\n" +
                "</ul>\n" +
                "</body>\n" +
                "</html>");
    }
}

post 요청 바디 데이터를 request.getParameter()로 조회하고 Member 객체를 생성한 뒤 저장한다.

Member 객체의 필드값을 HTML로 보여준다.

 

 

회원 목록

@WebServlet(name = "memberListServlet", urlPatterns = "/servlet/members")
public class MemberListServlet extends HttpServlet {

    private MemberRepository memberRepository = MemberRepository.getInstance();
    
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html");
        response.setCharacterEncoding("utf-8");
        
        List<Member> members = memberRepository.findAll();
        
        PrintWriter w = response.getWriter();
        w.write("<html>");
        w.write("<head>");
        w.write("    <meta charset=\"UTF-8\">");
        w.write("    <title>Title</title>");
        w.write("</head>");
        w.write("<body>");
        w.write("<table>");
        w.write("    <thead>");
        w.write("    <th>id</th>");
        w.write("    <th>username</th>");
        w.write("    <th>age</th>");
        w.write("    </thead>");
        w.write("    <tbody>");

        for (Member member : members) {
            w.write("    <tr>");
            w.write("        <td>" + member.getId() + "</td>");
            w.write("        <td>" + member.getUsername() + "</td>");
            w.write("        <td>" + member.getAge() + "</td>");
            w.write("    </tr>");
        }
        
        w.write("    </tbody>");
        w.write("</table>");
        w.write("</body>");
        w.write("</html>");
    }
}

 

 

이처럼 자바 코드로 HTML을 만드는 불편함을 해결하기 위해 JSP, Thymeleaf 같은 템플릿 엔진이 사용된다.

템플릿 엔진을 사용하면 HTML 문서에 자바 코드를 활용할 수 있다.

 

 

회원 등록 폼(JSP)

<!-- main/webapp/jsp/members/new-form.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="/jsp/members/save.jsp" method="post">
    username: <input type="text" name="username" />
    age: <input type="text" name="age" />
    <button type="submit">전송</button>
</form>
</body>
</html>

 

 

회원 저장(JSP)

<!-- main/webapp/jsp/members/save.jsp -->
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    MemberRepository memberRepository = MemberRepository.getInstance();
 
    String username = request.getParameter("username");
    int age = Integer.parseInt(request.getParameter("age"));
 
    Member member = new Member(username, age);
    memberRepository.save(member);
%>

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
성공
<ul>
    <li>id=<%=member.getId()%></li>
    <li>username=<%=member.getUsername()%></li>
    <li>age=<%=member.getAge()%></li>
</ul>
</body>
</html>

 

 

회원 목록(JSP)

<!-- main/webapp/jsp/members.jsp -->
<%@ page import="java.util.List" %>
<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
 MemberRepository memberRepository = MemberRepository.getInstance();
 List<Member> members = memberRepository.findAll();
%>

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
    <thead>
    <th>id</th>
    <th>username</th>
    <th>age</th>
    </thead>
    <tbody>
<%
    for (Member member : members) {
        out.write("    <tr>");
        out.write("        <td>" + member.getId() + "</td>");
        out.write("        <td>" + member.getUsername() + "</td>");
        out.write("        <td>" + member.getAge() + "</td>");
        out.write("    </tr>");
    }
%>
    </tbody>
</table>
</body>
</html>
  • <%@ page import="~" %>: import문
  • <% ~ %>: 자바 코드 입력
  • <%= ~ %>: 자바 코드 출력

 

 

이렇게 서블릿이나 JSP만으로 웹 애플리케이션을 만들면 비즈니스 로직과 뷰 렌더링이 하나의 코드에 존재하게 되고, 이는 유지보수에 어려움을 준다. 이런 이유로 Controller와 View로 역할을 나눈 MVC 패턴을 사용한다.

 

 

 

서블릿 MVC

이전글 Servlet과 JSP 애플리케이션 요구사항 회원 정보 이름(username) 나이(age) 기능 요구사항 회원 저장 회원 조회 회원 도메인 @Getter @Setter @NoArgsConstructor public class Member { private Long id; private String us

pressky99.tistory.com

 

 

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의 (inflearn.com)

'Web > ...' 카테고리의 다른 글

[대규모 시스템 설계 기초] 사용자 수에 따른 규모 확장성  (0) 2024.06.28
서블릿 MVC 2  (0) 2024.01.07
CORS  (1) 2023.12.20
서블릿 MVC  (0) 2023.10.18
Servlet 등록 / 요청과 응답  (0) 2023.10.15
'Web/...' Related Articles more