81일 - 라이브러리 dialect 활용해서 layout 붙여보기

수업 일지/Spring

by NayC 2021. 6. 15. 09:30

728x90

어제와 이어지는 내용 //

2. (이해하기 쉽지만) 라이브러리를 사용하는 방법

어제는 역참조하느라 관계가 복잡했는데 이제는 그렇게 안해도 된다 ^_<

- replace할 때, 필요한 영역 껴 넣고 막...

전체 틀에서 원하는 거 껴 넣으면 된다!

이제 직접 해보자

어제한건 paramer 들어가게 복붙해서 남겨두었고,

새롭게 실습해보자

먼저 layout.html에서 aside 부분 잘라내주기

-> 그런데 위에 부분 있어야한다는점!! 파라미터는 설정이 저기에 들어가서

list.html에서 main 부분 감싸준 <div> 삭제

replace도 식도 삭제

먼저 어떻게 나오는지 보자

이렇게 나오는게 아주 정상적!

(list.html에 지금 main밖에 없으니)

// Q. 어떻게 결합해야할까

-> 라이브러리를 준비하자

maven-repository 검색해서 복붙 (dialect 쳐서 제일 위에 나오는거) or dependencies 에서 검색해서 추가해줬어도 됐음

dependencies에서도 추가된거 확인~

// 이제 layout 해보자.

layout.html에서 공간 만들어주기

근데 2번째줄 이게 뭘까?

- 예를 들어 단일 태그인 <br>, <input> 태그를 사용한다고 해보자.

근데 어떤 사람이 사용할 때는 <br />, <input. />이라고 사용할 수도 있음

-> 둘 다 맞음

-> xhtml이 등장하게 됨. (단일 태그는 < / > 이렇게 해주자~ 라고 명명해주는 것

- 그런데 이전거 좋아하는 사람도 많아서 혼돈의 상태... ㅎㅎ

-> 그래서!

xmlns="http:///www.w3c.org..." <html> 안에 추가

3번째를 넣어줘야 '유연하게' 해줌.

//

또 하나 추가

list.html

1. 나 fragment로 "main"이라고 설정해줄게. 나 이거 가지고 있어

2. layout을 꾸며줄 곳은 어디냐하면 여기야

layout.html

3. 다른 부분은 부착(?)하되, main은 fragment로 저렇게 layout:해서 써주면 됨

실행해보면 이렇게 나온다.

... 흠 근데 layout.html에 footer도 있는데..? 왜 안나오지

의미들

1. fragment 사용하겠다.

2. 파일 위치가 어딨냐면

- 시작이 template (홈디렉토리라) 앞에 / 안 붙여도 되는거고

3. 그리고 fragment 이름은 이거야 or . 찍어서 class 명이나 # 해서 id명 써주면 됨

-> 저 사진으로 하면 footer 안나옴

3이 있는 파일 위치는, inc/footer 이기 때문

-> 이거로 고쳐주면 나온다.

cf)

fragment 아니라 그냥 id로 사용해줘도 됨 (이 방법 쓰는게 좋지 ㅎㅎ 뭘 추가해주지 않아도 되니)

vs

th 쓰는게 없다면 2 안써줘도 상관없음

그리고 3도 여기서는 삭제. footer는 기본으로 들어가는거니까

aside도 붙여주자

이렇게 class명으로 할 때는 aside.html에 한글 설정 외에 뭐 붙여주는게 필요없다는거~!

근데 class명으로도 이렇게 나오니 불안하긴하지 ㅎㅎㅎ

- class명은 중복될 수도 있는거니까

// 각 페이지마다 쓰이는 layout.html 폴더 만들어서 잘 관리할 것!

list.html 문제가 있음

Q. 페이지마다 css, js, 제목 등이 다르다면...?

-> 본문을 꾸며주기 위한 것도 넣어줄 수(!) 있도록 해야함

-> 실행하면 '공지사항 목록' 나옴

- list.html에서 지우면 -> (이제서야) '레이아웃'나옴

우선순위가 다름

-> 만약에 list.html의 css가 다른거라면 css를 따로 적어주면 됨

참 신기하게 합치라는 말 한마디도 안했는데, <head> 안에만 넣어줬더니 이렇게 됨!

즉. 페이지만의 특화된 style들은 <head> 안에 넣어주면 된다.

Q. 게시판 글 클릭해서 Controller 가게 해서 detail 보이게 하기

list.html에서 detail.html에서 html 지우기

1) id 있어야

2) controller 가서 return 값을 . 에서 / 로 바꿔주기

Q. id 어떻게 심어줄까?

- 우선 지금은 id 고정해주자

//

detail 페이지도 분리해주기

detail.html 에서는 설정 외에는 main영역만 있어야 한다는 점~!

- 나는 과감히 삭제해주지 않았어서ㅎㅎㅎ detail 페이지가 2개 나오는 참사(?)가 있었음 ㅎㅎㅎ

애증의 hi52

ㅋㅋㅋㅋㅋㅋㅋㅋ

list.html에서

id=92032942를 심어줬기 때문ㅋㅋㅋㅋㅋㅋ

난 이걸 까먹고.... 왜 hi52 애들이 계속 나오지 ㅠㅠ 했었었당... ㅎㅎㅎ

$

#

~

*

@ 애를 알아보자!

우리 교재 가볼까 ㅎㅎ (refernce)

-> 뭔가 href랑 연관있어 보인다...!

() - 쿼리값 넘기는 방법

근데 요새는 ? 도 쓰지만, 경로를 쿼리로 쓰는게 트렌드라고 했지ㅎㅎ

orderId 똑같은걸 뒤에 써주면 oderId=${} 값이 앞으로 들어가게 된다.

-> 맞는 말

//

이렇게 해주면 이제 id마다 각각 나온다 :)

detail?id 이런 형식을 이렇게 썼다~ 로 이해하면 보임

원래 예를 들어 id=3&aa=2 이렇게 전달되는데

-> 요지는 , 로 해줄 수 있다.

위에 a 태그는 무시하고 보기. 요지만 이해!

저렇게 해주면 value 값을 앞에다가 넣어줄 수 있고,

아래 그림처럼 url 주소?쿼리?에 넣어줄 수 있지~

이거 이해

-> Done

//

detail.html에서

<이전글> <다음글> 하이퍼링크를 달아줘야하지

목록, 수정, 삭제 .html 주소다 삭제해주기

-> 에러가 남

ㅎㅎ detail.html인데 {n.id} 해줘서 그럼

NoticeController에서 notice로 return해줬으니 {notice.id}로 해줘야~~

* 에 대해 알아보자

선택적으로 골라서 쓰면 된다.

list.html

페이저 구현해보자

상황 ) 컬렉션이 아니라 그냥 반복

조건 conditional

반복 interation

// utilty를 봐보자

- 어제 calendars 가지고 왔던 부분

이거를 사용하면 '반복'을 할 수 있다는 것

num은 그냥 변수 - 이건 내가 마음대로 지을 수 있는 것

- 변수 안 쓰면 반복 안 됨!!

- 변수를 꺼내는 작업이라 꼭 넣어야 함

-> 이러면 1 1 1 1 1 나옴

-> 이래야 1 2 3 4 5 나옴

이 페이저는 그냥 암기하라고 하심 ^^ ㅎㅎ

//

728x90

'수업 일지 > Spring' 카테고리의 다른 글

89일 - 인증과 권한 (feat. 타임리프 걷어내기) (0)	2021.06.25
81일, 82일 - 타임리프의 페이저 (0)	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