• 프로젝트/게시판 만들기로 배우는 Spring Data JPA

    크게한걸음 - 로그인과 글쓰기 (회고, Form(타임리프))

    2022. 6. 12.

    by. 내이름은 킹햄찌

    회고

    이번 정리에서 크게 한걸음이라는 타이틀을 쓴 이유는 정리하여 기록한것 외에도 많은것을 배워서 타이틀로 정했다. 그리고 시작이 반이라는 말도 있지 않은가.

    프로젝트를 시작하면서 글을 쓰고 2달이 지나서야 1차적으로 정리를 하게되었다. 기능적으로는 기본적인 것들만 추가 되었는데도 오래 걸렸던 이유는 잘모르는데 처음부터 완벽하게 만들고자 했기 때문이였던거 같다. 이런 생각을 가진거 치고는 코드들도 형편없고 수정할게 많지만 짧은 텀으로 공부한것을 정리해나가며 진행해야 할 것 같아서 정리를 했다. 그동안의 공부 과정에서는 실습강의들만 보면서 공부할때는 에러가 거의 발생하지 않고 발생했다고 하더라도 본인의 타이핑 미스일 경우가 정말 많았기 때문에 머리가 뜨끈해본적이 없었는데 기능들을 본인이 원하는대로 만들려고 하다보니까 에러가 정말 많이 생겼고, 왜 발생했는지 이해하는데도 오랜 시간이 걸렸다.  바닥부터 공부하지 않아서 그렇다고 생각한다. 쓰기 좋게 만들어 놓은기능들, 가져다 쓰기 좋게 짜놓은 코드은 많았지만 내가 필요한 부분이 어떤 부분인지를 몰랐고 그 조합에서 발생하게 되는 일들일 몰랐다. 여태 공부한 코드들을 알고 쓰는줄 착각했다는 것이였다. 앞으로는 코드를 타이핑하면서 실습하는데서 그치지 않고 그 기술을 내가 원하는 기능을 만드는데 사용을 함으로써 완전히 나의 것으로 만드는 것을 목표로 해야한다. 그리고 블로그들을 참고하며 느낀것은 이해하기는 쉽지만 애매모한 표현들이 나올때는 결국 다른곳을 찾아보게 되었고 그 끝에는 공식 문서들이 있었다. 시간을 줄이고자 했던일이 돌고돌아 공식문서였던 것이다. 이 과정들을 조금 이나마예방하기 위해서는 급하지 않다면 처음부터 여유를 갖고 공식문서를 읽어보는 연습을 해야할 것 같다. 

     

    1. 짧은 텀으로 정리를 해가며 공부해야겠다.

    2. 기술을 습득함에 있어 프로젝트에 적용시키는 과정을 포함하는 것을 목표

    3. 힘들어도 공식문서를 읽는 연습을 시작하자. 

     

    프로젝트의 다음 방향은 SpringSecurity를 익히고 적용한 후 JWT , OAuth2 까지 적용해볼 예정이다.

     

    Form

    프로젝트에 사용된 form들이다. 타임리프 엔진을 사용했다

    Header.html

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrinkto-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <title>Let's Learn Spring</title>

</head>

     

    bodyHeader.html

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="header" th:fragment="bodyHeader">
    <ul class="nav nav-pills pull-right">
        <li><a href="/">Home</a></li>
    </ul>
    <a href="/"><h3 class="text-muted">MyPost</h3></a>
</div>

     

    footer.html

    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div class="footer" th:fragment="footer">
    <p>&copy; 게시판 프로젝트</p>
</div>

     

     

    loginForm.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" th:action="@{/}" th:object="${memberLoginDto}" method="post">
        <div class="form-group">
            <label th:for="userId">아이디</label>
            <input type="text" th:field="*{userId}" class="form-control"placeholder="ID">
        </div>
        <div class="form-group">
            <label th:for="password">비밀번호</label>
            <input type="password" th:field="*{password}" class="form-control"placeholder="Password">
        </div>
        <p>
        <button type="submit" class="btn btn-primary">로그인</button>
<!--            <a class="btn btn-primary" href="/">로그인</a>-->
            <a th:href="@{/member/new}" class="btn btn-primary" role="button">회원가입</a>

        </p>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

     

    memberCreate.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<style>
    .fieldError {
        border-color: #bd2130;
    }
</style>
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <form role="form" action="/member/new" th:object="${memberCreateDto}" method="post">
        <div class="form-group">
            <label th:for="nickname">닉네임</label>
            <input type="text" th:field="*{nickname}" class="form-control" placeholder="닉네임를 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="userId">아이디</label>
            <input type="text" th:field="*{userId}" class="form-control" placeholder="아이디를 입력하세요">
        </div>
        <div class="form-group">
            <label th:for="password">비밀번호</label>
            <input type="password" th:field="*{password}" class="form-control" placeholder="비밀번호를 입력하세요">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <br/>
    <div th:replace="fragments/footer :: footer" />
</div> <!-- /container -->
</body>
</html>

     

    home.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>
<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader"/>
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>닉네임</th>
                <th>등급</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="member : ${member}">
                <td th:text="${member.nickname}"></td>
                <td th:text="${member.memberRoll}"></td>
            </tr>
            </tbody>
        </table>
        <div class="text-right">

            <a th:href="@{/member/logout}" class="btn btn-primary" role="button">로그아웃</a>
        </div>


    </div>
    <div>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>게시글 번호</th>
                <th>제목</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="post : ${post}">
                <td th:text="${post.id}"></td>
                <td th:text="${post.title}"></td>
                <td>
                    <div class="text-right">

                        <a href="#" th:href="@{/post/{id}/detail (id=${post.id})}" class="btn btn-primary" role="button">보기</a>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

    </div>
    <div class="text-right">
        <a th:href="@{/post/new}" class="btn btn-primary" role="button">글쓰기</a>
    </div>

    <div th:replace="fragments/footer :: footer"/>
    </div> <!-- /container -->
</body>
</html>

     

     

    postCreate.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>

<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <form role="form" th:action="@{/post/new}" th:object="${postDto}" method="post">
        <div class="form-group">
            <label>글쓰기</label>
        </div>
        <div class="form-group">
            <label th:for="title">Title</label>
            <input type="text" th:field="*{title}" th:for="*{title}" class="form-control" placeholder="Enter title">
        </div>

        <div class="form-group">
            <label th:for="content">Content</label>
            <textarea th:value="${content}" th:field="*{content}" th:utext="${content}" class="form-control"placeholder="content"></textarea>
        </div>

        <div class="text-right">
            <button type="submit" class="btn btn-primary">글쓰기</button>
        </div>

    </form>
    <div th:replace="fragments/footer :: footer" />
</div>

</body>
</html>

     

    postDetail.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>

<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <form role="form" th:action="@{/post/detail}" th:object="${post}" method="post">
        <p>
            작성자 : <span><i th:text="${post.getMember().getNickname()}"></i></span><br>
            작성날짜 : <span><i th:text=="${post.getCreatedAt()}"></i></span><br>
            글번호 : <span th:id="id"><i th:text="${post.id}"></i></span><br>
            조회수 : <span th:text="${post.count}"></span><br>

        </p>
        <div class="form-group">
            <h3 th:text="${post.title}"></h3>
        </div>
        <hr>

        <div class="form-group">
            <div th:utext="${post.content}"></div>
        </div>
        <hr>


        <p>
            <a th:href="@{/post/{id}/update (id=${post.id})}" class="btn btn-primary" role="button">수정</a>
            <a th:href="@{/post/{id}/delete (id=${post.id})}" class="btn btn-primary" role="button">삭제</a>
            <a th:href="@{/}" class="btn btn-primary" role="button">뒤로</a>

        </p>
    </form>
    <div class="card">
        <form>

            <input type="hidden" id="boardId" th:value="${post.id}">
            <div class="card-body">
                <textarea id="reply-content" class="form-control" rows="1"></textarea>
            </div>
            <div class="card-footer">
                <button type="button" id="btn-reply-save" class="btn btn-primary">등록</button>
            </div>

        </form>
    </div>
    <div th:replace="fragments/footer :: footer" />
</div>


</body>
</html>

     

     

    postUpdate.html

    <!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/header :: header" />
<body>

<div class="container">
    <div th:replace="fragments/bodyHeader :: bodyHeader" />
    <input type="hidden" id="postId" th:value="${postId}">
    <form role="form" th:action="@{/post/{id}/update (id=${postId})}" th:object="${postDto}" method="post">
        <div class="form-group">
            <label>글쓰기</label>
        </div>
        <div class="form-group">
            <label th:for="title">Title</label>
            <input type="text" th:field="*{title}" th:for="*{title}" class="form-control" placeholder="Enter title">
        </div>

        <div class="form-group">
            <label th:for="content">Content</label>
            <textarea th:value="${content}" th:field="*{content}" th:utext="${content}" class="form-control"placeholder="content"></textarea>
        </div>


        <p>
            <button type="submit" class="btn btn-primary">수정하기</button>
<!--            <a th:href="@{/post/{id}/update (id=${post.id})}" class="btn btn-primary" role="button">수정</a>-->

        </p>
    </form>
    <div th:replace="fragments/footer :: footer" />

</div>

</body>
</html>

    '프로젝트 > 게시판 만들기로 배우는 Spring Data JPA' 카테고리의 다른 글

    크게 한걸음 - 로그인과 글쓰기 (Service, Controller)  (0) 2022.06.12
    크게 한걸음 - 로그인과 글쓰기 (Entity, global Exception)  (0) 2022.06.09
    1. 시작하며  (0) 2022.04.03

    댓글

    관련글

    맨 위로
전체 글 보기

티스토리툴바