-
7월 24일 월요일 TIL 회고록카테고리 없음 2023. 7. 25. 00:04
개인 프로젝트
카테고리, enum 프론트엔드 부분 구현
해결하지 못하고 그대로 냅두었던 부분을 드디어 고쳤다.
내 나름대로 구글링을 해봤지만 원하는 답이 나오지 않아 정말 고생했다..
<script> let boardCategoryChoice = "BASIC"; </script>먼저 body 부분에 boardCategoryChoice를 BASIC으로 선언했다.
<body> <div class="category"><h3>카테고리</h3> <div class="btn-group"> <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="boardSort"> 카테고리 선택 </button> <ul class="dropdown-menu"> <li><button class="dropdown-item" value="basic" onclick="basicCategory" >일반</a></li> <li><button class="dropdown-item" value="question" onclick="QNACategory">질문</a></li> </ul> </body> <script> function basicCategory() { boardCategoryChoice = "BASIC"; $("#boardSort").text("BASIC"); } function QNACategory() { boardCategoryChoice = "QNA"; $("#boardSort").text("QNA"); } </script>스크립트부분에 basicCategory, QNACategory function을 만들었다.
basicCategory()가 실행되면 boardCategoryChoice를 "BASIC"으로 변경하고, $("#boardSort")를 .text를 사용해 텍스트 값을 변경한다. QNACategory()도 마찬가지로 실행되면 boardCategoryChoice를 "QNA"으로 변경하고, $("#boardSort")를 .text를 사용해 텍스트 값을 변경한다.
function createBasicBoard() { var request = { "title" : $('#title').val(), "content" : $('#content').val(), "boardSort" : boardCategoryChoice }; }createBasicBoard function 부분도 수정했다.
boardSort : boardCategoryChoice로 수정했다. 원래 주석처리 되어있었다. (주석처리 안하면 오류가 나와서..)
실행 결과
boardSort 고치기 전
게시글 작성 후 console.log를 사용해서 확인해보니 boardSort이 null로 되어있다.
boardSort 고친 후
게시글 작성 후 console.log를 사용해서 확인해보니 boardSort 부분이 정상적으로 값이 들어온다!
h2에서도 정상적으로 boardSort 값이 들어온 것을 볼 수 있다.
오늘은 선택 게시물 조회 (상세조회) 기능을 테스트 해보려고 했으나 프론트엔드 구현이 너무 어려워서 테스트 하지 못했다.
구글링을 하면 타임리프, 아니면 jsp 관련 글 밖에 없어서 쉽지가 않다... 열심히 구현해봐야겠다.