※ Keep in mind
본 내용은 웹개발과정의 강의 중 내용을 복습을 위해서 메모한 것에 불과한 것입니다. 이러한 연유로 강의내용을 오인한 나머지 오기재 및 불기재가 있을 수 있으니 '참고'만 해주시길 바랍니다. 저의 경우에도 본 내용을 단순하 읽은 것이 결코 저의 것이라고 생각하지 않습니다. 본 내용은 복습를 위한 초기 내지 중간 과정에 불과한 것이고, 이후에 내용을 보충 후 인출 및 설명하기 과정이 있어야 비로소 복습의 단추가 어느정도 마무리 되어간다고 볼 수 있습니다.
따라서 당초에 본 내용은 비공개였습니다. 그럼에도 불구하고 본 내용을 공개한 점은 함께 공부하는 동료들과 나눔을 바탕으로 배움과 성장의 공진화라는 소기의 목적을 달성에 어느정도 도움이 될수 있기 때문이라고 생각합니다.
I. JSP : tiles
1. 초기설정
(1) inc를 넣는다
여기다가 공통분모를 넣을거야
list.html 에서 헤더 푸터 제외하고 남겨준다.
(2) list.jsp
inc에서 헤더 푸터 외 나머지 <main> 태그 부분을 여기다가 넣어준다.
(3) controller
restController 을 controller로 바꾸어주고, jsp 경로를 다시 설정해준다.
2. 기존 페이지 모듈 집중화 형태
(1) <jsp: include> 이용
1)
공통부분을 분리해서 공통으로 참조하게끔하기 위해서 이렇게 진행하는 것이였야
2)
이게 있고 없고에 따라 페이지가 header, footer만 나오는지 여부가 달라저! jsp초반 방식이야
3)
그런데 레이아웃은 include가 불가능해!
그리고 페이지 만들 때 마다 include마다 반복되고있어! 이렇게 반복되는게 싫어
우리 자바 코드에서 import반복은 불만이 아니었는데 이게 불만이었나봐! 이것을 해결하는 방법은 없었을까?
include하는거 마저 분리하는거야! include하는거 따로 분리해서 재사용할수있다면 이렇게 될 수있어!
다음부터 페이지 만들때는 include 할 필요없이 메인만 만들면, 인클루드 하는 애들은 별도로 빼서 레이아웃이라고 만드는거야
이렇게 하면 좋은데 jsp자체 기능이없어
레이아웃을 잘 보면 부분을 모아서 시멘트로 발라 버리는느낌같은 라이브러리가 생겼어! 이름은 tiles 라이브러리야
(2) tiles library
1)
이것을 이용하면 되지만 트렌드가 바뀌어서 이것을 잘 안쓰게돼
페이지 만드는게 다 JS로 갔어 SSR이 계속 되는게 아니라서 내가 바꿀게 아니야!
은퇴하는이유는 더이상 안써서 일수도있고, 더이상 성숙할게 없어서 은퇴할수도있어
tiles는 진작에 성숙도가 완성됐고, 더군다나 SSR이 안쓰여서 프론엔드로 가서 발전할 이유도 없어
아파치 가면 은퇴명단으로 옮겨졌어
2)
일단 MAVEN에 가서 tiles 라이브러리 다운로드하자!
항상 어떤 라이브러리 쓸때는 알바생이라는 것에 의인화하자!
제스퍼는 서블릿코드 만들어주는거고, 재스퍼처럼 타일즈 고용하는데 모아서 조립하는 애야!
헤더와 푸터 모두 분리하자!
이렇게 하면 body에는 이렇게만 남아
3)
타일즈에게 조립해달라는 단서가 있어야해
타일즈에게 그 이름을 달라고해야하는데 어떻게 어디서 명시해야하고, 그 내용을 어떻게 조립해달라고 말을해야지 생각을할텐데 이런 설정을 위해 준비된 XML이 있어
타일즈의 모든 사용법은 ( https://tiles.apache.org/framework/tutorial/basic/pages.html ) 여기에 있어
여기서 초창기 틀을 만들어 주자!
4)
return 으로 menulist를 해준다
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
"http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
<definition name="menulist" template="/WEB-INF/view/inc/layout.jsp">
<put-attribute name="header" value="/WEB-INF/view/inc/header.jsp" />
<put-attribute name="main" value="/WEB-INF/view/menu/list.jsp" />
<put-attribute name="footer" value="/WEB-INF/view/inc/footer.jsp" />
</definition>
</tiles-definitions>그리고 tiles.xml에다가 타일 정의로서 다음과 같이 정의해주는거야!
5)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles" %>
// ----- 생략
<body>
<!-- header 자리 -->
<tiles:insertAttribute name="header"/>
<!-- ---------------------------------------------------------------------- -->
<!-- main 자리 -->
<tiles:insertAttribute name="main"/>
<!-- ---------------------------------------------------------------------- -->
<!-- footer 자리 -->
<tiles:insertAttribute name="footer"/>
<!-- ---------------------------------------------------------------------- -->
</body>이렇게 준비는 했는데 알바생(타일즈)를 안불렀어!
그래서 클래스파일 별도로 만들어서 객체화(알바생부르기) 해야해! xml파일을 만들어도 알고있는 공간이 아냐
즉 타일즈를 깨우고 그 파일저기있다! 라고 해야해
깨운다는거는 메모리에 올리는거야
하지만 boot3.0 (spring6.0)은 tiles를 더이상 지원하지않아서 쓸 수가 없어!
II. 타임리프
1. 들어가며 : 타임리프의 장점
1)
이점: 자칭 SSR의 현대적 라이브러리
가장 큰 장점은 내가 사용하던 HTML을 그대로 사용이 가능해 JSP는 바꾸어주어야해!
퍼블리셔가 한것에다가 추가하지, 대체하는 등은 아니야! 그러면 퍼블리셔는 그대로 작업을 이어갈수있어
특별하게 태그를 더 넣는거도 없어 (th)
2)
다만 아쉬운점이 있는데 타임리프는 dev툴즈와 잘 안맞아
타임리프 코드바꾸는 것이 적용이 잘안될수있어, 할 때 마다 clean등을 자주 해주어야하는 경우가 있어
2. 공식문서보기
(1) 공식문서 URL
( 공식문서 : https://www.thymeleaf.org/doc/tutorials/3.1/usingthymeleaf.html#introducing-thymeleaf )
(2) 공식문서 톺아보기
1)
JSP와 달리 파일안 특정영역을 div태그로 copy가 가능해
다른페이지의 일부분을 가져다 쓰거나, 페이지를 통째로 혹은 일부를 insert 가 가능해
2)
파라미터 반복으로 타일즈 처럼 쓸수도 있어!!
3. 레이아웃 위한 타임리프사용하기
(1) 소개
헤더 푸터 사이드바와 같이 반복되는 부분은 이것을 이용해서 반복을 줄여줄 수 있어!
(2) 라이브러리 추가와 초기 세팅
1)
이 라이브러리를 추가해야해!
2)
public에는 원본을 그대로 다 둔다
static 에는 고정적인 이미지, css, js 를 넣는다.
templates에는 그 외 html 파일들을 넣는다.
그후 앞서 했던 방법을 이용한다
list.html 에다가는 main태그 관련된 부분을 넣어준다
layout.html 은 전체 배치를 위해서 일단 삽입위한 주석처리만 해준다
header.html / footer.html 도 마찬가지이다.
(3) 시작
1)
이렇게 해서 파일을 실행하면 다음과 같은 결과가 나온다.
MenuController 에다가 return 값을 넣어줄 때 templates부터 상대경로를 바로 설정이 가능해!
그리고 model객체에다가 값을 넣어주면 이와 공유하는 list.jsp에다가 ${data} 방식으로 저장이 가능해!
이경우 thymeleaf 기본문법으로서
th:[속성]="서버로부터 받는 값" 을 의미해!
div태그외에도 어떤 태그면 가능하다
'알랜드 메뉴' 대신에 hello가 출력된다.
(4) 레이아웃 라이브러리
1)
( https://mvnrepository.com/artifact/nz.net.ultraq.thymeleaf/thymeleaf-layout-dialect/3.2.0 ) 여기서 라이브러리 받아와
버전을 지워서 넣자
2)
th와 관련된 트개를 사용하기위한것으로서 즉 thymeleaf 를 사용하기 위해서 추가해준다
layout을 사용하기 위해 의존성을 관리해준다
1. 보충
2. 회고
1) 타임리프가 신기술을 쓰는 기업의 척도로 볼 수있는점이 흥미롭다.
'배움 __IL > TIL 1기' 카테고리의 다른 글
| TIL : 72번째- 230320 [3-3-월] (0) | 2023.03.21 |
|---|---|
| TIL : 71번째- 230317 [3-2-금] (0) | 2023.03.17 |
| TIL : 69번째- 230315 [3-2-수] (0) | 2023.03.15 |
| TIL : 68번째- 230314 [3-2-화] (0) | 2023.03.14 |
| TIL : 67번째- 230313 [3-2-월] (0) | 2023.03.13 |