잡담
지금 입력하는 코드는 DB에 연결하기 전의 코드입니다. DB에 연결하지 않으면 데이터가 브라우저를 끄면 날아갑니다. 그래서 DB에 연결은 꼭 필요합니다. DB연결은 뒤에서 진행하도록 하고 우선은 Controller를 이용하는데 익숙해지는 게 좋을 거 같아서 따로 떼어냈습니다.
1. TodoListController
TodoListController는 TodoList의 메인이라고 할 수 있습니다. DB에서 데이터를 받아와서 해당값들을 request에 실어서 출력하고자 하는 urlPattern으로 넘겨주는 역할을 합니다. 데이터 값을 받은 JSP에서는 해당 값들을 토대로 화면에 List를 출력합니다.
// 서블릿을 매핑하기 위한 어노테이션
// name 속성은 서블릿의 이름을 지정합니다.
// urlPatterns 속성은 서블릿을 호출하기 위한 URL 패턴을 지정합니다.
@WebServlet(name="todoListController", urlPatterns = "/todo/list")
public class TodoListController extends HttpServlet {
// HTTP GET 요청을 처리하는 메서드
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// TodoService를 사용하여 TodoDto 리스트를 가져옵니다.
List<TodoDto> dtoList = TodoService.INSTANCE.getList();
// 가져온 TodoDto 리스트를 "list"라는 이름으로 request에 설정합니다.
req.setAttribute("list", dtoList);
// "/WEB-INF/todo/list.jsp" 페이지로 포워드합니다.
// 이 페이지는 TodoDto 리스트를 표시하는 데 사용됩니다.
req.getRequestDispatcher("/WEB-INF/todo/list.jsp").forward(req, resp);
}
}
서블릿을 매핑하기 위해서 WebServlet 어노테이션 하여 서블릿의 이름과 호출을 위한 URL 패턴을 지정해 줍니다. 저 같은 경우에는 todo 안에 있는 list로 지정해 주었습니다.
doGet매서드를 오버라이드 받아 list에 대한 화면을 출력하였습니다. 위에 적혀있는 TodoService는 뒤에 나오는 동작을 담당하고 있는 클래스입니다. TodoService안에는 list를 가져오고, 입력하고, 삭제하는 기능들이 들어있고 그중에서 list를 출력하기 위해 getList라는 메서드를 사용하여 해당 데이터를 List <TodoDTO> 안에 dtoList라는 변수로 담았습니다.
데이터가 담겨있는 dtoList는 request에 set 하여 list라는 이름으로 이동합니다.
request는 포워드 방식으로 /WEB-INF/todo/list.jsp url로 이동합니다.
2. TodoService.getList()
위에서 TodoService 클래스를 이용해서 데이터들을 받아왔는데요 Service단에서 동작하는 기능입니다.
Controller는 보통 값을 다음 url로 뿌려주는 역할을 하고 기능적으로 값을 찾거나, 삭제하거나, 추가하는 건 Service클래스에서 진행합니다. MVC패턴에 맞게 로직을 구성하게 됩니다.
import org.zerock.demo3.todo.dto.TodoDto;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
// 싱글톤 패턴을 사용하여 TodoService를 정의합니다.
public enum TodoService {
// 열거형 상수로 인스턴스를 하나만 생성합니다.
INSTANCE;
// TodoDto 객체를 저장할 리스트를 선언합니다.
private List<TodoDto> todoList = new ArrayList<>();
// TodoDto 객체의 고유한 번호를 생성하기 위한 카운터 변수를 선언합니다.
private int count = 0;
// TodoDto 객체의 리스트를 반환하는 메서드를 정의합니다.
public List<TodoDto> getList(){
// todoList가 비어있는 경우에만 초기화합니다.
if(todoList.isEmpty()){
// 0부터 1까지의 범위에서 순차적으로 반복하면서 TodoDto 객체를 생성하여 리스트에 추가합니다.
todoList = IntStream.range(0,10).mapToObj(i->{
// TodoDto 객체를 생성합니다.
TodoDto dto = new TodoDto();
// TodoDto 객체의 번호를 설정합니다.
dto.setTno((long)count++);
// TodoDto 객체의 제목을 설정합니다.
dto.setTitle("do...."+i);
// TodoDto 객체의 마감일을 현재 날짜로 설정합니다.
dto.setDueDate(LocalDate.now());
// 생성된 TodoDto 객체를 반환합니다.
return dto;
}).collect(Collectors.toList());
}
// 생성된 또는 초기화된 TodoDto 객체의 리스트를 반환합니다.
return todoList;
}
}처음에 데이터가 없기 때문에 getList에 데이터를 집어넣는 방법을 코드에 넣은 것이지 실제로 DB에 데이터가 있다면 굳이 새로 생성할 필요는 없습니다. return값으로 todoList라는 List <TodoDto> 값을 가지게 되고 이 return값이 TodoListController로 전달되어 req.setAttribute를 통해 request에 올려서 View단으로 데이터를 전송합니다. 해당 데이터는 "/WEB-INF/todo/list.jsp"라는 경로에 있는 JSP형식으로 출력하게 됩니다.
아래는 출력을 담당하는 JSP입니다.
3. list.jsp
GET방식을 통해 view에 값을 전달하는 것까지 완료했습니다. 이제는 JSP를 통해 해당 값들을 출력하는 방법에 대해서 코드와 함께 알아볼 것입니다.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
</head>
<body>
<div class="list-box">
<h1>To Do List</h1><button><a href="http://localhost:8080/todo/register">추가</a></button>
<table class="list-table">
<thead>
<tr>
<th>To do List</th>
<th>Duedate</th>
<th>check</th>
</tr>
</thead>
<tbody id="listBody">
<c:forEach var="dto" items="${list}">
<tr>
<td onclick="location.href='/todo/read?tno=${dto.tno}';" style="cursor: pointer;">
${dto.title}
</td>
<td>
${dto.dueDate}
</td>
<td>
<input type="checkbox" value="true" ${dto.finished ? 'checked':''}>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
해당 코드에서 눈여겨봐야 할 곳은 코드 가장 위쪽에 있는 라이브러리설정입니다.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>이 줄은 JSTL(JavaServer Pages Standard Tag Library)을 사용하기 위한 태그 라이브러리를 가져옵니다. JSTL은 JSP에서 자주 사용되는 기능을 제공하는 라이브러리입니다. 여기서는 JSTL의 core 라이브러리를 사용하고, c 접두사로 지정합니다.
JSTL(JavaServer Pages Standard Tag Library)은 JSP(JavaServer Pages) 개발을 더욱 간편하고 효율적으로 만드는데 도움이 되는 라이브러리입니다. JSTL의 주요 장점은 다음과 같습니다:
- 간편한 문법: JSTL은 XML 기반의 간결하고 직관적인 문법을 제공하여 코드를 작성하기 쉽게 만듭니다. 이를 통해 코드의 가독성이 향상되고 개발자의 생산성이 향상됩니다.
- 표현 언어(EL)와의 통합: JSTL은 EL(Expression Language)과 함께 사용될 때 가장 효과적입니다. EL을 사용하여 동적 데이터를 쉽게 처리하고 JSTL을 사용하여 비즈니스 로직을 작성할 수 있습니다. 이를 통해 코드의 가독성이 향상되고 개발 시간이 단축됩니다.
- 표준화: JSTL은 자바 커뮤니티에서 표준으로 채택된 라이브러리이기 때문에 여러 플랫폼 및 서버에서 사용할 수 있습니다. 또한 다양한 개발 환경에서 호환성과 안정성이 보장됩니다.
<c:forEach>는 JSTL(Core 태그 라이브러리)에서 제공하는 태그 중 하나로, 컬렉션을 반복하여 데이터를 처리하는 데 사용됩니다.
<c:forEach var="item" items="${myList}">
<li>${item}</li>
</c:forEach>여기서 ${myList}는 JSP의 EL(Expression Language)을 사용하여 가져온 리스트입니다. <c:forEach>는 이 리스트의 각 요소를 가져와서 <li> 태그로 감싸서 출력합니다. 변수 item은 반복되는 각 요소를 대표합니다.
forEach를 통해 받은 값들은 테이블 형식으로 정리했으며 데이터를 클릭할 시 해당 데이터에 tno값을 지정된 URL로 이동하는 데 사용했습니다. "list"라는 이름에 담아서 Controller를 통해 들어온 데이터 값을 jsp에서 dto에 담아서 사용합니다. 클릭 시 일치하는 tno값을 가진 데이터를 가지고 read.jsp로 이동합니다.
<td onclick="location.href='/todo/read?tno=${dto.tno}';" style="cursor: pointer;">
4. 출력
localhost:8080/todo/list url입력 시 getlist에서 10개의 데이터를 set 하여 jsp에 출력한 값입니다.
글을 마치며
오늘은 web에 todoList에 대한 정보를 입/출력하는 코드를 만들어 보았습니다. 지금은 sevlet과 jsp를 이용해서 웹을 만들고 있지만 이는 조금 오래된 방식입니다. servlet을 대체하는 spring/springboot 가 있고 jsp가 맡고 있는 view를 thymeleaf가 대신합니다. 하지만 처음부터 springboot를 하게 되면 Annotation을 이용해서 간단하게 코드를 만들기 때문에 데이터가 어떻게 이동하는지 왜 이렇게 동작하고 있는지에 대한 개념이 잡히지 않기 때문에 이렇게 먼저 진행하고 나중에 Springboot때 다시 한번 확인해 보도록 하겠습니다. 감사합니다.
'미니 프로젝트 > To Do List' 카테고리의 다른 글
| [Java] TodoList ④ TodoReadController(DB 연결 전) (0) | 2024.05.14 |
|---|---|
| [Java] TodoList ③ TodoRegisterController(DB 연결 전) (0) | 2024.05.14 |
| [Java] TodoList ① 설계 (0) | 2024.05.03 |