깃에 코드 내용이 있다.
https://github.com/HoJin-jjimgo/myhome
--> 원래는 코드를 짤떄마다 블로그로 정리를 하려고 했지만 일단 한번 코드를 짜본뒤에 천천히 다시 돌려보면서 내용을 정리해보고 있다.
-> controller부분에 대한 코드는 깃 코드를 참고해 보는것이 좋을듯 하다.
list.html
list.html 파일에서 처리하고 있는 방법이다.
-> 이곳에서 설명하지 않는 부분은 후에 설명을 해보도록 하겠다.
list - 1
-> 일반적으로 list를 사용하는 경우에는 총 건수
부분에 ${#lists.size(boards)} 가 들어가면 되지만
page를 사용하기 때문에 totalElements가 들어간다.
th:text 가 하는 역할
-> 들어온 데이터의 값을 화면에 띄워준다.
-> 만약 들어온 데이터가 없다면 기본으로 설정한 값을 띄워준다.
- board.id 의 값이 없다면 DB가 없습니다
- 라는 문구가 화면에 호출 된다.
th:each
-> for문과 비슷한 역할을 수행한다.
-> boards에 있는 값을 하나씩 꺼내에서 board에 저장을 해준다.
th:href
-> 링크를 지정해주는 역할을 한다.
-> th:href="@{/board/form(id=${board.id})} 같은 코드는
-> /board/form으로 링크를 지정하였고 링크를 타고 이동할떄 board.id의 값을 같이 전송하라는 의미가 된다.
th:action
-> form 태그 사용시에 사용하는 것으로
-> 해당 url로 작동을 하라는 의미가 된다.
-> 즉 해당 url에 해당하는 GET방식의 호출을 하라는 의미가 된다.
list - 2
거의 같은 코드를 반복하는 것이기 떄문에 한번에 설명해 보겠다.
일단 기능은 클릭의 활성화 및 페이지 이동 및 page의 갯수 설정에 잇다.
페이지의 갯수 설정은 Controller에 있기 떄문에 github를 통해서 확인해 보길 바란다.
- th:each="i : ${#numbers.sequence(startpage, endpage)}
-> 이 구문을 통해서 페이지의 값을 하나씩 받아온다.
- th:text="${i}
-> 그 후 이 구문을 통해서 화면에 값을 하나씩 호출해 준다.
이 곳에서의 1,2가 앞서 말한 두 코드의 결과이다
- th:classappend="${i == boards.pageable.pageNumber + 1} ? 'disabled'"
-> 이 구문 같은 경우에는 특정 조건일떄 비활성화를 시켜 주는것을 의미한다.
-> 간단하게 설명을 하자면 1페이지에 내가 접속해있다면 1페이지는 비활성화 시켜준다는 것을 의미한다.
-> 위에 사진을 보면 내가 1페이지에 접속해있기 떄문에 검은색 으로 표시된다는 것을 알수가 있다.
+1을 해주는 이유는 boards.pageable.pageNumber의 값이 0이며 나의 시작값이 1이기 떄문에 +1을 해주어서 값을 맞춰주는 것이다.
- th:href="@{/board/list(page=${i - 1}
-> 이 구문은 페이지를 이동시켜 주는 구문이다.
-> 코드의 작성에 따라서 페이지가 이동이 된다.
-1의 값을 추가해 주는 이유는 page는 0 부터 시작이지만 i값은 1부터 시작이기 때문에 서로 값을 맞춰주기 위함이다.
previous, next 등등 코드 모양만 다르지 용어에 맞는 역할은 동일하다.
searchText=${param.searchText}
-> 검색에 사용한 값을 url에 같이 파싱해주는 코드이다.
form.html
-> form.html파일에서 처리하고 있는 방법이다.
form - 1
th:object
-> 어떤 객체를 활용할것인지 지정해주는 것이다.
-> 이러한 방법을 통하게 되면 th:field토 편하게 활용 가능하다.
th:field
-> 어떤한 필드를 사용하는지를 알려준다
-> 미리 th:object를 통해서 지정을 해 놓았다면
-> 단순하게 *{id} 를 활용할수가 있다
- 의미 = board.id의 값을 활용한다는 뜻
th:classappend
-> 특정 조건일떄 class에 String 값을 붙여준다는 뜻이다.
이 부분의 의미는
title에 에러가 발생하게 된다면 class에 'is-invalid'를 붙여준다는 뜻이다.
밑에 div 부분은 만약 title이라는 부분에 에러가 발생한다면 class를 실행하라는 의미이다.
scurity 부분은 아직 학습을 하지 않았기 때문에 더이상 진도를 나가지 않았고
security 부분을 학습을 하게 된다면 이후 과정또한 마저 진행을 해보도록 하겠다.
=================================================================
잘 이해가 안되는 부분이 있다면 이쪽을 참고해보는것도 좋은 생각인거 같다.
