[20240525] 게시판 엔드포인트 변경 → 한 페이지에서 기능들이 다 구현될 수 있도록 !

[janghw0126]

이전에 만들어놓았던 게시판 기능 구현 코드를 피그마에 계획되어 있던 대로 한 페이지에 작성, 수정, 삭제 기능을 다 때려넣기 위해 코드를 수정하였다.

일단 한 페이지에 모든 기능을 다 구현하기 위해 임의로 만들어놓은 html을 수정하였다.

위처럼 게시글을 쓰고 등록버튼을 누르면 밑에 작성자, 작성일, 수정일 순으로 출력될 수 있도록 코드를 작성하였다. (아무래도 프론트는 몬해먹겠…나로썬 이게 최선이다,,우리팀 프론트 진쨔 대단한 듯 하다,,🥹🥹)

그랬더니 이런 오류가 떴다. 에러가 뜬 건 당연하다. 수정, 삭제, 작성 기능별로 엔드포인트를 다 다르게 작성해놨는데 한 페이지에 기능을 다 때려박으니 그럴만 함. 그래서 에러 메시지를 해석해보니

에러 원인 : org.springframework.expression.spel.SpelEvaluationException: EL1007E: Property or field 'id' cannot be found on null: Spring Expression Language(SPEL)에서 id 속성을 찾을 수 없다는 것을 의미한다. 즉 DTO 객체가 null인 상태라고 한다.

그래서 컨트롤러 코드를 확인해보니

/* 게시글 목록 */
    @GetMapping("/")
    public String list(Model model) {
        List<BoardDto> boardList = boardService.getBoardlist();
        model.addAttribute("boardList", boardList);
        return "board/list.html";
    }

컨트롤러 코드는 딱히 오류날 부분이 아닌 것 같았다.

그래서 임의로 작성해놓은 html 코드를 확인해보니

th:each에서 사용한 변수명이 board인데, 수정 및 삭제 버튼에서 boardDto라는 이름을 사용하고 있기 때문에 변수명을 일관되게 맞춰줘야 되겠다고 생각했다.

그래서

<!-- 수정/삭제 -->
        <div>
            <a th:href="@{'/post/edit/' + ${boardDto.id}}">
                <button>수정</button>
            </a>

            <form id="delete-form" th:action="@{'/post/' + ${boardDto.id}}" method="post">
                <input type="hidden" name="_method" value="delete"/>
                <button id="delete-btn">삭제</button>
            </form>
        </div>

이 부분을

<!-- 수정/삭제 -->
        <div>
            <a th:href="@{'/post/edit/' + ${board.id}}">
                <button>수정</button>
            </a>

            <form id="delete-form" th:action="@{'/post/' + ${board.id}}" method="post">
                <input type="hidden" name="_method" value="delete"/>
                <button id="delete-btn">삭제</button>
            </form>
        </div>

이렇게 변경해주었다.

그랬더니 게시글 작성하고 등록이 잘된 것을 확인할 수 있었고, 수정버튼을 누르니 수정 페이지로 들어가서 수정하면, 이렇게 수정된 글로 변경된 것을 확인할 수 있었고, 수정날짜도 변경된 것을 확인할 수 있었다. 또한 삭제 버튼을 누르면 이렇게 삭제까지 되는 것을 확인할 수 있었다. 일단 여기까지 완료했고, 이제부터는 수정 기능도 다른 페이지로 넘어가지 말고 한 페이지에서 해결할 수 있도록 코드를 수정해보도록 하겠당 !!

글고 이번에 해보면서 느꼈던 것은 프론트와의 연동이 절실히 필요하다는 점이였따………😭😵‍💫🤪😜