스프링 없이 서블릿만으로 웹을 만들어 봅시다
안녕하세요.
오늘은 서블릿으로 회원 관리 웹을 만들어보겠습니다.
회원을 저장하고 회원 목록을 조회하는 기능을 구현할 것입니다.
회원 도메인, 회원 저장소 만들기
웹을 만들기 전에, 필요한 회원 도메인과 회원 저장소를 만들어야 합니다.
회원 도메인을 만들고, 회원을 저장/조회할 수 있는 회원 저장소를 만들어봅시다.
회원 도메인 모델
@Getter @Setter
public class Member {
private Long id;
private String username;
private int age;
public Member(){}
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(++sequence);
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();
}
}회원 저장소는 static final로 인스턴스를 만들어놓고 생성자를 private으로 막아서 싱글톤 패턴을 적용했습니다. 회원 저장소 객체를 사용하려면 static 메소드인 getInstance를 호출해야 합니다.
회원 등록 폼
가장 먼저 회원을 등록하는 HTML 폼을 제공해야 합니다.
회원 등록 폼을 서블릿으로 구현한 코드는 아래와 같습니다.
@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");
}
}
먼저 Content type은 text/html로, 인코딩은 utf-8으로 지정합니다.
다음으로 writer를 받고, HTML 코드를 한 줄 한 줄 써서 응답 데이터로 전송합니다. 자바 코드로 HTML을 제공해야 하므로 쉽지 않은 작업입니다.
서버를 띄우고 http://localhost:8080/servlet/members/new-form 에 접속하면 회원 등록 폼을 확인할 수 있습니다.
전송 버튼을 누르면 /servlet/members/save로 전달됩니다.
요청 데이터로 username=... , age = ... 정보가 함께 전송됩니다.
회원 저장
위에서 전송 버튼을 누르면 호출될 코드를 작성해봅시다.
회원을 저장하는 서블릿 코드입니다.
@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);
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" +
"<a href=\"/index.html\">메인</a>\n" +
"</body>\n" +
"</html>");
}
}
전달된 파라미터 정보를 이용하여 멤버 객체를 만들고, 저장합니다.
다음으로 member 객체를 사용해서 결과 화면용 HTML을 동적으로 만들어서 응답합니다.
위에서 본 html 폼에서 저장 버튼을 누르면 http://localhost:8080/servlet-mvc/members/save로 이동하고, 결과 화면은 아래와 같습니다.
저장이 잘 되었습니다!
회원 목록
마지막으로 저장한 회원의 목록을 확인하는 페이지를 만들어봅시다.
회원 목록 서블릿 코드는 아래와 같습니다.
@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 {
List<Member> members = memberRepository.findAll();
response.setContentType("text/html");
response.setCharacterEncoding("utf-8");
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("<a href=\"/index.html\">메인</a>");
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>"); // <!-- row -->
w.write(" <td>" + member.getId() + "</td>"); // col
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>");
}
}
memberRepository에서 객체를 모두 찾아서 HTML을 만듭니다.
중요한 것은 for 루프 부분입니다.
찾은 객체를 for 루프를 돌면서 HTML을 동적으로 생성합니다.
결과 화면은 http://localhost:8080/servlet/members에서 확인할 수 있습니다.
템플릿 엔진으로
지금까지 서블릿으로 회원을 저장하고, 조회하는 웹 사이트를 만들어보았습니다.
이렇게 작성해도 웹을 동적으로 만들 수 있지만, 문제가 있습니다.
무엇일까요?
코드의 구성을 보면, HTML을 작성하는 부분이 대부분입니다.
서블릿과 순수 자바 코드는 적고, 자바로 HTML을 만들어내는 부분이 많습니다.
자바로 HTML을 만들면 들여쓰기도 어렵고, 오류를 찾기도 힘듭니다.
차라리 HTML 문서에 동적으로 변경해야 하는 자바 코드를 넣는 것이 편리할 것입니다.
이것이 바로 템플릿 엔진이 나온 이유입니다.
템플릿 엔진을 사용하면 HTML 문서에 필요한 곳만 코드를 적용해서 동적으로 변경할 수 있습니다.
템플릿 엔진에는 JSP, Thymeleaf, Freemarker, Velocity 등이 있습니다.
다음 게시글에서는 JSP로 동일한 작업을 진행해보겠습니다.
인프런 '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 강의를 듣고 공부하며 정리한 자료입니다.
잘못된 부분은 피드백 주시면 감사하겠습니다.
글 읽어주셔서 감사합니다 :-)
참고자료
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술, 섹션 3. 서블릿, JSP, MVC 패턴 https://www.inflearn.com/course/스프링-mvc-1
'Spring > 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글
| MVC 패턴을 적용해서 회원 관리 웹 만들기 (0) | 2022.01.21 |
|---|---|
| JSP로 회원 관리 웹 만들기 (0) | 2022.01.21 |
| HttpServletResponse 사용하기 (0) | 2022.01.19 |
| HttpServletRequest로 HTTP 요청 데이터 조회하기 (0) | 2022.01.18 |
| HttpServletRequest로 HTTP 요청 메시지 조회하기 (0) | 2022.01.18 |
댓글