이제부터 투두리스트의 코드를 정리하고, 또 외관을 개선하고자 한다.
가장 먼저 url 입력 없이 클릭만으로 페이지를 옮겨다닐 수 있도록 메뉴를 추가하려고 하는데,
그전에 jsp 프래그먼트에 대해서 알아보고 넘어가려고 한다.
우리가 지금까지 작성한 여러 파일을 보면 공통적으로 들어가는 코드가 있다.
이런 걸 특정 파일에 담아서 그 파일의 경로와 이름을 작성하는 걸로 해당 코드를 작성하는 걸 대체할 수 있다.
이를 jsp 프래그먼트라고 한다.
이를 이용해서 우리는 메뉴 코드를 해당 파일에 담아서 코드를 좀더 간단하게 만들 수 있다.
일단은 이전에 했던 것처럼 코드를 작성하고, 그 뒤에 위에서 설명한 걸 적용할 것이다.
추가할 메뉴 코드는 아래와 같다.
```
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3 p-1">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/list-todos">Todos</a></li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
</ul>
</nav>
```
이걸 listtodo의 body 맨 위에 복붙해보자.
```
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3 p-1">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/list-todos">Todos</a></li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
</ul>
</nav>
<div class="container">
....
```
아직 Home, Logout 버튼이 작동하지 않지만 일단 메뉴가 생기긴 했다. 이건 나중에 고칠 것이다.
이걸 todo.jsp 파일에도 추가하자.
이렇게 추가하면 아까 말했듯이 파일을 비교했을 때 공통으로 들어있는 부분이 있다. 이것들을 복사하자.
앞부분을 header.jspf, 뒷부분을 footer.jspf, 그리고 메뉴 코드를 navigation.jspf라고 하겠다.
```
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<link href="webjars/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="webjars/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
<title>Manage Your Todos</title>
</head>
<body>
```
```
<script src="webjars/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="webjars/jquery/3.6.0/jquery.min.js"></script>
<script src="webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>
```
```
<nav class="navbar navbar-expand-md navbar-light bg-light mb-3 p-1">
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/list-todos">Todos</a></li>
</ul>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
</ul>
</nav>
```
이들을 파일 내에 추가할 때는 `<%@ include file="common/header.jspf %>"`와 같은 코드를 추가하면 된다.
```
<%@ include file="common/header.jspf %>
<%@ include file="common/navigation.jspf %>
<div class="container">
<h1>Enter Todo Details</h1>
<form:form method="post" modelAttribute="todo">
<fieldset class="mb-3">
<form:label path="description">Description</form:label>
<form:input type="text" path="description" required="required"/>
<form:errors path="description" cssClass="text-warning"/>
</fieldset>
<fieldset class="mb-3">
<form:label path="description">Target Date</form:label>
<form:input type="text" path="targetDate" required="required"/>
<form:errors path="targetDate" cssClass="text-warning"/>
</fieldset>
<form:input type="hidden" path="id"/>
<form:input type="hidden" path="done"/>
<input type="submit" class="btn btn-success"/>
</form:form>
</div>
<%@ include file="common/footer.jspf %>
<script src="webjars/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$('#targetDate').datepicker({
format: 'yyyy-mm-dd'
});
</script>
```
todo.jsp의 경우 위와 같이 코드를 작성할 수 있을 것이다.
그리고 Spring Security에 작성해둔 걸 배우고 따라서 해보고 오자.
그 다음 우리 코드를 확인해보면, "in28minutes"라고 하드코딩 해놓은 게 많은 걸 확인할 수 있다.
이걸 Spring Security에서 받아온 값을 넘기는 걸로 바꿔보자. 이걸 위해 getLoggedinUsername() 이라는 메서드를 작성해보자.
Spring Security에는 SpringContextHoldre라는 클래스가 있다. 이 안에서 우리는 getAuthentication()을 사용해서 여러 정보를 얻어올 수 있다.
```
private String getLoggedinUsername() {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
return authentication.getName();
}
```
이제 이 메서드를 이용해서 `model.put("name", getLoggedinUsername());`이나 `model.addAttribute("name", getLoggedinUsername());` 같은 방식으로 값을 넘겨줄 수 있게 되었고, `(String)model.get("name");` 대신 getLoggedinUsername()을 이용해 값을 가져올 수 있게 되었다.
이제 우리가 예전에 만들었던 findByUsername() 메서드를 보면 username으로 필터링 하지 않고, todos를 그냥 넘기는 걸 확인할 수 있다. 이것도 바꿔보자. 예전에 deleteById() 메서드를 만들었던 기억을 떠올려서 구현해보자.
```
public List<Todo> findByUsername(String name) {
Predicate<? super Todo> predicate = todo -> todo. getUsername().equalsIgnoreCase(username).username;
return todos.stream().filter(predicate).toList();
}
```
이렇게 해서 username에 따라 구분할 수 있게 코드를 작성했으니 마지막으로 새로운 사용자를 추가하는방법에 대해서 알아보자.
이전에 우리는 SpringSecurityConfiguration에서 사용자에 대한 정보를 추가했다. 이를 메서드로 만들어서 새로운 사용자를 추가하고, 정보를 삽입하도록 해보자. 이는 IDE에서 제공하는 리팩터링이나 추출 기능을 통해 가능하다.
하면 아래와 같이 바꿀 수 있다.
```
@Bean
public InMemoryDetailsManager createUserDetailsManager() {
UserDetails userDetails1 = createNewUser("in28minutes", "dummy");
UserDetails userDetails2 = createNewUser("test", "test");
return new InMemoryUserDetailManager(userDetails1, userDetails2);
}
```
'강의 > Java Spring Boot' 카테고리의 다른 글
| Spring Boot Starter Data JPA 추가, 그리고 H2 데이터베이스 활용 (0) | 2025.01.26 |
|---|---|
| Spring Security를 이용한 로그인 구현 (0) | 2025.01.26 |
| todolist CRUD 기능 구현하기 (0) | 2025.01.26 |
| JSTL 활용해서 todo 표시하기 (0) | 2025.01.26 |
| 세션, 모델, 그리고 요청 - @SessionAttributes (0) | 2025.01.26 |