고정 헤더 영역
상세 컨텐츠
본문
728x90
페이저 부분 css
지금은 1 2 3 4 5 가 다 orange에 bold인데 이러면 안되는거지.
우리가 원하는 것만 css 주기 위해서는~
-> '현재 페이지'와 비교를 하는 기능이 필요함
//
우선 p, t, q 도 바꿔주자.
'원래식'은 옆에 두고,
옆에 새로 th: ... 로 해서 적는게 포인트, 그리고 () 안에 내가 넣어주고 싶은 쿼리값을 넣는다는거~!
그리고 저기서 list는 (@ 앞에) 뭐라도 하나 있어야 함.
. 이라도, /라도... !
보통 명확하게 명칭해주는게 좋긴 하겠지~
p.s 저기에 '' 이렇게 해도 됨
//
field에 들어갈 내용을 바꿔보자.
param 기능을 알아보자.
31번째줄은 그냥 잘 나오는지 테스트 용도로
// (아직 반의 반도 안 함)
레코드가 몇 개인지 알아보자.
스트링으로 아~주 간단하게!
getCount 함수를 만들러 가보자~!
-> 서비스Imp에 추가하는 것만 캡쳐 (나머지는 흐름 아니까~ ^_<)
// 근데 오류남
+ 그리고 나 위에 where 2개 썼던 거
나나 오류
-> param.1 이 아니라 param1 이렇게
ㅡㅡㅡㅡㅡ
local variables
지역변수를 쓰기 위해서는 지역을 잘 선택해야!
만약 저~ 아래 태그에도 사용하고 싶다면, 모든 태그를 다 아우를 수 있는 곳에다가 써줘야 함
lastPage... 를 어디에다가 둘까~
-> <main> 에다가 둠!
땡... 이건 el이잖아
이렇게.
//
lastPage 변수 만들고
-> 아래 가서 꽂아넣기
계산은 위에서 하기!
-> 나는 </span th:...> 이렇게 만들어줘서 오류 났었음 ㅎㅎㅎ
새로 <span> 만들고 안에다가!
계산은 괄호 안팎에서 다 가능~
근데 안에서 26/10 -> 2
밖에서 26/10 -> 2.6
근데 2페이지가 아니라 3페이지가 나와야겠지~!
근데 뒤에다가 +1을 하면, 딱 떨어지는 수 같은 경우는 한 페이지가 더 나오는 결과가 되겠지.
cf)
이거 확인
-> count/10+(count%10==0?0:1) 이렇게
괄호 필요!
여기다가 추가추가 해서 사용하기!
with 내용
->
with는 한 번만 적어주기
""도 크게 한 번으로
그리고 중간에 , 로 연결!
이전, 다음 페이지 나오게 하는거 해보자. (다음 누르면 6,7,8,9,10 나오도록)
p 가 7이 오면 -> 6.7.8.9.10
p 가 23이 오면 -> 20.21.22.23.24.25
맨 앞!이 중요
이걸 startNum이라고 한다면
page, size 두 가지 변수 이용해서 -> startNum 유추
//
'현재' 번호를 page라고 하면
%로 나눠보자. 5로 나누면 (예를 들어 9면 -> 4) 이거로 '간격'을 구할 수 있음
- 이걸 offset이라고 해서 간격을 구해보자.
offset = page%5-1
- 그리고 startNum을 구하면 됨
-> 현재 페이지 - offset
근데 10을 넣으면 이상함...
->
그럼 10 넣어도 -> 6으로 정상적으로 나온다 :)
//
여기서 조금만 더 조건처리하면 됨!
<main> 쪽에서 offset, StartPage 해서 -> 6,7,8,9,10 나오게 하기
1) 컨트롤러에서 page 넘겨주기 - 사용하지 말기 (자급자족할 수 있는 건 자급자족하기)
원~래 아무것도 안보내줘도 param.p로 꺼내서 쓸 수 있던건데,
${param.p}-1 을 하니 오류가
-> 그래서 NoticeController에서 page를 보내주었다.
num은 1~5까지 수가 있지.
ex) page=10이야.
-> offset=4
startPage=5
-> th:text는 우리 눈에 보이는 수라고 생각.
stratPage 5에다가 + num이니까 (num은 1~5) -> 5.6.7.8.9.10 나오는거지.
p.s 107번째줄은 (0,4)로
(이건 선생님 풀이 - 82일차)
- 중간에 막대기 있는 부분은 그냥 skip해도 됨. 아래 2) 부터 보기.
Q. page는 어떻게 얻어오지? param.p
조건 : p가 없으면 기본값 1을 주자. (삼항 연산자)
식 잘못 씀 ㅎㅎ
-> page = ${param.p==null?1:${param.p},
->
근데 어제 HJ 말처럼 (page-1)에서 오류가 남...
흠.
-> 110번째줄에서 p=${startNum} 을 고치면 오류가 안 남...
이건 왜 오류가 안나지?
아니다. 아래 subtract 지원안한다고 뜨넹.
//
Controller에서 page 전달해주는 방법은 선생님이 원하신 바가 역시 아니었음.
스스로 얻어낼 수 있는건 (param.p) 이렇게 X
-> 자급자족할 수 있는 아이는 자급자족! (이렇게 결합력 높이는건 좋은 방법이 아니다.)
2) 자급자족할 수 있는 page 변수 하나 설정해서 해결하기
-> 아래 최종 코드 보기. (중간 과정은 그냥 오류 찾기 과정이라고 보면 됨)
<main>에 with들 다 적었었는데
-> 나도 선생님처럼 <div>에 적어줌
아 (page-1)이 안되는게 맞구나
-> ${page}-1 이렇게 고쳐주었다.
이러면 화면에 아무것도 나오지 않음
계산 안 됨.
숫자 6이 아니라 문자 6이여서
만약 offset=(6-1) 이라고 하면 -> 출력 결과 나옴
-> 구글링 : thymeleaf string to integer
-> 이 식이 이해가 안되면 복사해서 다시 구글링
이 식 이해
오류나는 거 이해 (왜 integer 형태로 바꿔줘야 하는지)
- page를 1이 아니면 ${param.p}를 달라고 했잖아? 그러니까 1이 아니고서는 -> '문자열'인 것
-> offset
나 실습 안되는 거 다시
- 적어도 '1' 은 프린트 되어야 하는거 아닌가?
-> 내가 $를 안 붙여줬었음 ㅎㅎㅎ
- offset이 있어야 왜 다 나오는거지?
-> (offset은 현재 페이지와 startNum과의 거리, 이게 있어서 다 나오는게 아니라~ 각 함수에 속하는 것들이 연결되어 있어서 그런 것)
- 저 el?이 왜 어색하다는거지?
-> ${.. el
우리가 지금 있는 공간은 .html 인데 자바 코드가 있다니이이이이이이이이이이이 !
- 저거 $ 왜 넣어야 하지..?변..수?
-> 저 %5 식을 offset이라고 이름 지어주면서 '변수'를 만들었잖아 -> 이거를 호출할때는 ${ } 이렇게 (타임리프 el 에서는 이렇게 쓴다~ :))
현재 페이지 알려줄 수 있도록 해주기
- 지금은 다 orage, bold체여서
class를 덮어쓸 수 있는 th를 만들어주면 되지~!
startPage 더해줄 때 꼭 $ 해줘야 하나? 난 안해줘도 나왔는뎅?
-> 나도 앞에다가 $ 써줬었음 ㅎㅎㅎ
-> ${ } + ${ } 이렇게 써주는게 공식문서에서도 권장해주는 바이므로 이렇게 쓰도록 한다!
근데 문제. 앞에 기존의 class를 지워버리게 됨
기존의 것을 덮어버리려던게 아니라, 추가해주고 싶다면?
(구글링 class in thymeleaf)
-> classappend 라고만 바꿔주면 됨
blue, orange -> blue가 이기는게 맞음 (이거 오류 찾은 과정 숙지하기)
https://ubermensch-with.tistory.com/506
* conditional evaluation * - 이전, 다음 페이지 만들기
2개 나옴
-> 조건절 넣어줘야 함 각각
//
'다음'도 해보자
lastPage가 필요한데 그건 어제 구해놨겠다~
+ 중간에 5개 반복되는거 조건에 따라 안나오도록 하자. (lastPage 이상 안나오도록)
나 갑자기 왜 화면이 나오지 않을까
- 실습 : url p=16 넣으면 아무 번호도 안나오는거 확인 (전체 페이지가 15페이지니까)
-> 위에 test 목적으로 쓴 <div> 태그들을 주석처리하거나 아래로 내리면 됨.
이유 : cass "btn btn-next"의 조건이 div의 first child 여서 테스트 하는 것들만 뜨게 된 것!
// 이제 '다음'을 해보자
startPage + 5를 해야 다음 페이지를 위한 p의 주소가 되는거지.
그래서 starPage + 5 >= lastPage 면 '다음'이 있는 것
starPage + 5 < lastPage면 없는거지
부등호 방향 이해
ex) page=3이야 / startPage = 1 이야 / 1+5 = 6이 '다음' 페이지가 되는거잖아?
우리의 예시에서 lastPage = 15야 /
startPage + 5 < lastPage면 '있는거지' (가야할게 있는거니까)
//
1은 java 기능을 활용하는거라고 함
- T(여기에 자료형을 넣는 것. 이 자료형으로 사용하겠다.)
2로 하면 화면 전환이 안된다고 함 -> 1번 방법 사용
HJ이처럼 검색 능력을 기르자 !!!
- "모든 사람들이 다 알고 개발을 하지는 않아요.
뚫어지게! 본 후에 뭐 때문에 안되는구나 - 정도 감을 잡고 그 다음에는 구글링
- how to ... in Spring / Thymeleaf / Java .. 이렇게 조건을 걸어주면 검색이 잘 된당.
- 그래서 답변 나온 것들 적용해보면서 -> 된다? (위에서 2번 방법 대신 1번 방법 사용한 것처럼)
그럼 그 되는 것을 공부하면 된다.
- 에러가 나면 '안돼' 이러면 절대 x
-> 실마리를 찾고! 검색 키워드를 뽑아야 한다. (용의자 찾기)
p.s 오류 낸 사람은 뭐가 오류인지 모른다. 알면 그렇게 쓰지 않았을테니까
-> 그래서 용의자 선상을 추리는게 중요한 것. (이 코드를 쓰면 오류가 나네? 뭐가 원인이지? 이렇게)
728x90
반응형
'수업 일지 > Spring' 카테고리의 다른 글
| 89일 - 인증과 권한 (feat. 타임리프 걷어내기) (0) | 2021.06.25 |
|---|---|
| 81일 - 라이브러리 dialect 활용해서 layout 붙여보기 (1) | 2021.06.15 |
| 80일 - 타임리프의 레이아웃 붙이기 작업 :: fragment (0) | 2021.06.14 |
| 80일 - 타임리프 (Thymeleaf), th:text, th:utext, #, th:each (0) | 2021.06.14 |
| 79일 - 인증과 권한. 1.인증 설정 2.권한 설정- 1) 인메모리 방법 2)db 방법 with 사용자 정보, 사용자 역할 정보 (0) | 2021.06.11 |
