[Java] 게시판 ⑧ View

잡담

html 및 javaScript 코드 같은 경우 양이 너무 많기 때문에  중요 코드 부분만 따로 설명하도록 하겠습니다. Controller를 통해 확인해 본 html의 종류는 list, modify, read, register 4가지 정도입니다. list는 메인화면을 출력하고, register를 통해 새로운 게시글을 등록합니다. read를 통해 원하는 하나의 게시글만 출력하고, modify를 통해 수정할 데이터를 받아와 출력합니다.

처음부터 모든 UI를 꾸미는것은 지금 백앤드를 연습하는 단계 임으로 Bootstrap을 이용해서 css부분을 대신하기로 하였습니다.

---

 

1. BootStrap

부트스트랩(Bootstrap)은 트위터에서 개발된 오픈 소스 프런트엔드 프레임워크로, 웹 개발자들이 반응형 웹사이트와 웹 애플리케이션을 손쉽게 만들 수 있도록 도와줍니다. HTML, CSS, JavaScript로 구성된 부트스트랩은 다양한 UI 구성 요소를 제공하며, CSS 프레임워크 중 가장 인기 있는 라이브러리 중 하나입니다.

예를 들어 해당 코드는 기본적인 버튼 CSS입니다.

<button type="button" class="btn btn-primary">List</button>
<button type="button" class="btn btn-secondary">Modify</button>

---

 

아래는 해당 UI를 다운받을 수 있는 사이트 주소입니다.

Simple Sidebar - Bootstrap Sidebar Template - Start Bootstrap

Start Bootstrap

Free Download를 클릭하여 zip파일을 다운로드합니다.

---

 

해당 파일의 압축을 resources/static/ 에 풀어줍니다.

 

---

 

2. list.html

해당 코드는 pageRequsetDTO에 getLink()를 통해 키워드에 맞는 데이터들만 출력하게 합니다. 

  1) 키워드 필터링

<form action="/board/list" method="get">
    <div class="col">
        <input type="hidden" name="size" th:value="${pageRequestDTO.size}">
        <div class="input-group">
            <div class="input-group-prepend">
                <select class="form-select" name="type">
                    <option value="">---</option>
                    <option value="t" th:selected="${pageRequestDTO.type =='t'}">제목</option>
                    <option value="c" th:selected="${pageRequestDTO.type =='c'}">내용</option>
                    <option value="w" th:selected="${pageRequestDTO.type =='w'}">작성자</option>
                    <option value="tc" th:selected="${pageRequestDTO.type =='tc'}">제목 내용</option>
                    <option value="tcw" th:selected="${pageRequestDTO.type =='tcw'}">제목 내용 작성자</option>
                </select>
            </div>
            <input type="text" class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary searchBtn" type="submit">Search</button>
                <button class="btn btn-outline-secondary clearBtn" type="button">Clear</button>
            </div>
        </div>
    </div>
</form>

select document를 통해서 제목, 내용, 작성자 또는 중복 타입에 대한 값을 get을 통해 Controller에 submit 하고 getLink()에서 't', 'c', 'w'와 비교하여 해당 기워드에 대한 데이터를 출력하게 됩니다.

---

 <option value="t" th:selected="${pageRequestDTO.type =='t'}">제목</option>

pageRequestDTO.type이 't'와 같을 때 selected 된 상태를 유지하게 됩니다. 해당 코드 입력하지 않고 사용하면 한번 검색할 때마다 검색항목이 초기화되어 다시 선택해주어야 합니다. 

---

<input type="hidden" name="size" th:value="${pageRequestDTO.size}">

pageRequestDTO.size값은 필요하지만 출력을 할 필요는 없기 때문에 submit 할 때만 사용하기 위해 hidden 처리해 줍니다.

---

<input type="text" class="form-control" name="keyword" th:value="${pageRequestDTO.keyword}">

검색할 내용일 입력하는 코드입니다. keyword를 입력하면 데이터를 을 pageRequestDTO.keyword에 초기화하기 때문에 submit해도 해당 keyword는 초기화되지 않고 남아있습니다.

 

pageRequestDTO에 초기화 vs X

pageRequestDTO에 초기화

pageRequestDTO에 초기화 X

---

 

  2) [javaScript] Clear 

<button class="btn btn-outline-secondary clearBtn" type="button">Clear</button>

Clear 버튼을 통해서 위에 keyword, type 항목도 초기화하여 아무 필터링도 돼있지 않은 상태임을 만드는데  그 말은 list 첫 페이지를 다시 열어주는 것과 같은 효과를 나타냅니다.

<script layout:fragment="script" th:inline="javascript">

document.querySelector(".clearBtn").addEventListener("click",function (e){
        e.preventDefault()
        e.stopPropagation()
        self.location='/board/list'
},false)
</script>

2024.05.28 - [Java Script] - [Java Script] Event Bubbling(preventDefault, stopPropagation)

[Java Script] Event Bubbling(preventDefault, stopPropagation)

e.preventDefault()
e.stopPropagation()

 

예를 들어, <a> 태그를 클릭하면 기본적으로 해당 링크로 이동하거나, <form>을 제출하면 페이지가 새로 고침 됩니다. 이러한 기본 동작을 막고 싶을 때 preventDefault()를 사용합니다.

 

stopPropagation() 메서드는 이벤트가 더 이상 상위 요소로 전파되지 않도록 막기 위해 사용됩니다. JavaScript에서 이벤트는 캡처링 단계와 버블링 단계를 거쳐 전파됩니다. 즉, 특정 요소에서 이벤트가 발생하면 그 이벤트는 해당 요소의 상위 요소들로 전파될 수 있습니다. stopPropagation()을 사용하면 이 전파를 중단시킬 수 있습니다.

 

---

 

글을 마치며

이번에는 부트스트랩을 이용해서 CSS부분을 처리하고,  html에 필터를 통해 검색하는 부분을 만들어 보았습니다. 웹페이지를 살펴보면 기본적으로 상단 부분 header부분이 페이지가 바뀌어도 고정되어 있고 footer부분도 고정되어 회사 전화번호 같은 부가 설명들이 고정돼있는 경우가 많은데 이는 layout을 이용하는 방법입니다. layout을 통해 상단 하단을 고정시키고 content 부분에 데이터만 바꿔가면서 사용하는 방법인데 이는 페이지마다 html 코드를 중복해서 사용할 필요가 없어져 코드가 간략해지고 효율적으로 사용할 수 있습니다. 해당 내용은 따로 다뤄보도록 하겠습니다. 감사합니다.