고정 헤더 영역
상세 컨텐츠
본문
728x90
jsp 팔고 타임리프를 사용하는 방법을 알아보자.
객체들 이어주는 DI
서비스에서 가장 중요한 @Transactional
다오 구현에서는 MyBatis (mapper 사용하는 것을 알아봤었다~)
"익숙해지면 지루해지기까지 할겁니다~"
// 요즘 트렌드가 바뀌었다~! (jsp를 대신하는 또 다른 녀석인 '타임리프')
* 사용하는 이유 * 를 알아보자.
jsp 대비 조금 더 장점을 뽑아보자면 두 번째 문단
- elegant, highly-maintainable way
Q. 퍼블리셔가 '어 고칠거 있다'하고 다시 jsp를 보는데... 서버 코드가 덕지덕지 되어 있는 상태라면..?
-> 타임리프는 html 만든 사람이 영향 받지 않도록 해준다.
기존거를 건들이지 않고, 덧붙인다.
- '협업'하기에 좋은 방법이다.
// 타임리프 라이브러리 깔고, 설정해보자
How to use it?
홈디렉토리
src > main > webapp (jsp를 위한 홈디렉토리) - 사실상 이 아이가 홈디렉토리
static (html,css를 위한 홈디렉토리)
index 이미 써서 오류남
오류남
NoticeController들 가서 확인
- 우선순위가 서버 코드라서 /index로 된 게 먼저 발동되는 것
Q. 이렇게 하면 나오는 이유
- 타일즈 리졸버 찾고 > 리소스 리졸버 찾고 > 타임리프 리졸버
-> 3은 index에다가 .html을 붙여서 찾는다.
타임리프가 깔려져 있다면 타임리프 리졸버가 먼저! 실행된다. 그럼 위에서는 왜 실행 안됐지? 우선순위 먼저인데
//
사실 Controller에서 tiles 이런거 빼고, 타임리프만 가지고 오는게 좋다.
-> 타임리프로 결정했으면 tiles 설정은 걷어내기. (선택해서 둘 중 하나로 쓰기!)
config가서 tilesConfig를 지워보자.
-> @annotation만
타임리프는 jsp처럼 특이한 확장자를 가지고 있지 않다.
기존 html 문서인 'test 텍스트'를 지울 필요가 없음!
대신 타임리프 사용할거다~ 라고 써주는게 있는거고.
오른쪽에 2번째, 8번째줄에 추가된 거 확인
신기!
원래 있던 컨텐츠를 건드리지 않았는데 나오다니 :)
-> 퍼블리셔가 추후 수정을 해도 서로 데이터를 침범할 일이 없게 된다~!
cf) 내 HomeConroller 코드는
index.html 이 저절로 붙어서 @Controller에다가 + return "index"가 맞나
-> ok.....
//
Q. 타임리프 첫 인상은?
-> 매우 괜찮다 :)
기존에 퍼블리셔가 만든걸 깨뜨리지 않는 선에서 하기에~
//
계속 알아가보자.
* 텍스트 출력 *
추가시키려는 데이터에 tag를 넣어보자.
지금 우리의 타임리프는 th:text로 되어있는 상태
//
화면에 출력되는게 아니라, 명령어로 정말 bold체로 나오길 원한다면?
-> th:utext
그럼 안녕안녕방긋 - 이렇게 나온다!
- 지금 <h1> 태그 안에 있어서 크게 나오는데 일반 태그 썼으면 bold체인 것도 티가 나게 나온다.
값을 표현할 때 ${} ... 어디서 많이 본 느낌적인 느낌~!
-> jsp에서 el 태그 썼던 것과 비슷하다! 그런데 분명히 다른 녀석이다!
5가지 데이터 출력 syntax (꼭 알아두어야 한다!)
{...} 안에는 다양한 연산자가 들어갈 수 있다.
el과 다를 바가 없으나, 삼항 연산자가 원래는 3개 있어야 하는데 애는 2개만 하는 방법도 있다는 것
연산자들을 알아보자.
$ - 실물 녀석?
-> 모델에서 가지고 온 아이 :)
#을 알아보자.
properties라는 객체가 있음. (자바에?)
이걸 가지고 있는건 (부모는) Hashtable
해시테이블의 자식.
즉 hashmap이 가지고 있는 기능에 + 추가 기능을 가지고 있음
key, value를 poop?으로 넣을 수도 있는데
save도 가능! (xml, property 확장자 등으로)
load도 가능!
-> 요지는 원하는대로 파일 관리가 가능
키, 값 들어가는 컬렉션 덩어리를 만들 수 있는 것?
- 굉장히 편한 녀석 (해시테이블 읽기)
// 내가 원하는 설정을 외부 파일로 저장하려는 것.
확장자를 properties로 해서
+ 그리고 내가 원하는대로 뽑아쓸 수 있음
$ -> Model에서 꺼내 쓰는거
# -> 외부 '파일'에서 꺼내 쓰는 거
그리고 이 외부 파일을 = 메시지라고 함
-> 한 번 외부 파일에 제목을 두고 꺼내보자~!
Q. 폴더를 어디에 만들까?
-> resources에 하위 폴더가 더 필요할까?
alt + enter 치거나
우클릭 property 들어가 UTF-8 해주기
근데 실행하면 안 됨
-> 우리가 만든 메시지가 어디에 있다고 알려줘야 함!
// 설정방법 very easy하다.
폴더 / 파일명 순서대로 써주면 됨
추가하면 나온다 >.<
진짜 많이 사용하는 건 #보다는 $이긴 하다.
- 외부파일에서 읽어온건 '메시지'
- Controller에서 제공하는건 'variables'라고 한다.
이건 타임리프에서만 쓰는건 아님
- 여러 문서를 만드는 목적으로 사용 가능
2가지 선택 가능
1) ctx라는 저장소가 있는데 여기에 데이터 담았다가, 꺼내쓸 수 있음
- 넣을때는 setVariable, 꺼낼때는 getVariable
- 표현방법을 OGNL이라고 함
session.user.name
getter 사용하는 방식처럼, .으로 쉽게 표현해주는 방식 = OGNL
이미 알고 있는 방법~ (대괄호로도 해줄 수 있다는 것 정도 빼고는)
// 뽑아쓰는 방법을 더 알아보자.
구글링 : thymeleaf
-> document 굉장히 잘 되어있다.
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
(링크 직접 찾아들어가보기)
// 본격적으로 하나하나 발췌해서 써보자.
-> 실습을 위해 보안 config에서 @을 주석처리!
재시작해서 확인해보기
이거 나오는게 정상
이것도 주석으로.
-> 그러면 위에 로그인 페이지는 안 뜸 (재시작 or maven project update 해주기)
//
복붙해서 jsp를 수정하려고 했는데...
그냥 뉴렉처 사이트 가서 다운받아 쓰자. html
뉴렉처 사이트에 있는 html 파일 다운받아서 > 압축 풀어주고 컨트롤 c, v! (드래그 하면 안 된다.)
오류가 나는게 정상
admin/notice/list -> login으로 오지 않고//
오류가 나도록
파일 중에
board 지우기
-> 이건 지움
폴더 정리하기
.을 /로 고치면 이 의미는 /admin/notice/list.html을 찾는 것
이렇게 고쳤으면 되어야.
-> 나 css 적용 안 됨
Admin에서 NoticeController 오기
list.html에
뭘 추가해줌 <html xmlns:th="http://www.thymeleaf.org">
이거 어디에?
list.html인가? 그런데 나 이거 맨 위에 추가 안해주고 아래거 해줬는데도 목록 나왔다. why?
-> 타임리프 쓰는 페이지 모두에 추가해주시 :)!
iteration에서도 하나 추가
-> 이렇게 해주면 아까는 한 4개 있던 게 데이터 후루룩 나옴
//
밑에 tr들 지워주자
- 10개만 나오도록
그리고 아래것들도 데이터 가지고 오게 해주자.
Q. 근데 결과물에서 '날짜' 나오는게 너무 이상함! (Mon Jun 14... )
타임리프 tutorial에서 값 이용하는 쪽을 보면,
calenders 말고도 다른 도구들도 있다.
- cf) 이거 java 객체
java에는 calenders라는 utility가 있는데 format 이용해서 날짜 변환이 가능하다.
나 달력 yyyy-MM-dd 뜨는거 확인
-> Done
// "설명 안한 부분도 reference에서 충분히 찾아서 할 수 있습니다."
// layout 하자.
728x90
반응형
'수업 일지 > Spring' 카테고리의 다른 글
| 81일 - 라이브러리 dialect 활용해서 layout 붙여보기 (1) | 2021.06.15 |
|---|---|
| 80일 - 타임리프의 레이아웃 붙이기 작업 :: fragment (0) | 2021.06.14 |
| 79일 - 인증과 권한. 1.인증 설정 2.권한 설정- 1) 인메모리 방법 2)db 방법 with 사용자 정보, 사용자 역할 정보 (0) | 2021.06.11 |
| 79일 - @Transactional의 '전파 모드' & ACID 中 2) 고립도 설정 (0) | 2021.06.11 |
| 78일 - AOP, Proxy, @Transactional, ACID 中 1) 원자성 테스트 (0) | 2021.06.10 |
