카테고리 없음

7월 24일 월요일 TIL 회고록

tft4rollz 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 관련 글 밖에 없어서 쉽지가 않다... 열심히 구현해봐야겠다.