[연재] SpringBoot diary - 로그인해서 일기쓰기

원문은 Spring Boot : study.diary 로그인해서 일기쓰기 에서 확인할 수 있습니다.

 

diary 프로젝트에 폼 로그인 기능을 추가해서 로그인했을 때 Home 화면에서 일기 목록이 잘 보여지는것 까지는 성공을 했다.

그런데 일기쓰기 화면에서 일기를 작성하고 저장을 누르면 에러 페이지가 표시되었다.

 

도대체 무슨 일일까를 고민하다가, 일기쓰기 폼이 write.html 인데, 여기에서 “저장” 버튼을 누르면 처리되는 URL 에서 로그인하여 인증된 데이터가 사용되지 않은 것이 아닐까 생각되었다.

write.html 파일에서 <form> 태그의 action 속성값을 아래와 같이 기록하고 있었다.

<form action="/diary" method="POST">

이것을 thymeleaf 문법에 따라 아래와 같이 수정했더니 잘 되었다.

<form th:action="@{/diary}" method="POST">

앞의 일반적인 html 태그 방식으로 작성했을 때의 소스와 thymeleaf 문법을 적용했을 때의 소스 차이를 살펴보았다.

수정전
    <!-- Content -->

    <h1>Write</h1>

    <form action="/diary" method="POST">
        <div class="mb-3">
            <label for="date" class="form-label">날짜:</label>
            <input type="text" class="form-control" id="date" name="date" />
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">내용:</label>
            <textarea class="form-control" rows="10" id="content" name="content"></textarea>
        </div>
        <input type="submit" class="btn btn-primary" value="저장" />
    </form>


    <!-- Content end -->

수정후
    <!-- Content -->

    <h1>Write</h1>

    <form action="/diary" method="POST"><input type="hidden" name="_csrf" value="QBQJ-lP39FdQQ_79yqta8Gejm3oVeOGib79QwWxA6OAcvVl2cHYwyWuTwGB9IM2crIZuyQbHthggQdSPDItmo1whjtYlhG0T"/>
        <div class="mb-3">
            <label for="date" class="form-label">날짜:</label>
            <input type="text" class="form-control" id="date" name="date" />
        </div>
        <div class="mb-3">
            <label for="content" class="form-label">내용:</label>
            <textarea class="form-control" rows="10" id="content" name="content"></textarea>
        </div>
        <input type="submit" class="btn btn-primary" value="저장" />
    </form>


    <!-- Content end -->

이 차이로 유추하건데, thymeleaf 가 html 을 작성할 때 인증정보를 추가해주고 있는 것이겠구나 하고 생각되었다.