본문 바로가기
반응형

타임리프14

[TIL] : 220 일일 배움을 위한 Today I Learned ! 소경관 오늘은 마이페이지를 만들면서 thymeleaf 사용에 대해 다시 공부하게 되었다. input 태그와 session의 활용과 th:field의 사용에 대해 체크하고 구현했다. 2022.06.03 - [Project/소경관] - [소경관] : thymeleaf input에 Session값 가져오기와 input에 Session값을 입력 받아 Controller에 넘기기 2022. 6. 3.
[TIL] : 205 일일 배움을 위한 Today I Learned ! hadoop 시퀀스 파일 압축과 시퀀스 파일 별로 단어별 빈도수를 체크하는 로직을 다시 검토하고 적용했다. 2022.05.19 - [Data Base/Hadoop] - [Hadoop] : 시퀀스 파일별로 단어별 빈도수 세기 2022.05.19 - [Data Base/Hadoop] - [Hadoop] : 시퀀스 파일 압축 소경관 어제 thymeleaf를 마무리 하는 중이다. 잘 안 되서 일단 오늘 까지 해결을 해 보고 어렵다 싶으면 내일 학교에서 선배한테 조언을 좀 얻을 생각이다. 2022. 5. 19.
[Spring Boot] : 타임리프 Message 국제화 타임리프 메시지 국제화 이번에는 국제화를 적용해 보았다. label.item=Item label.item.id=Item ID label.item.itemName=Item Name label.item.price=price label.item.quantity=quantity page.items=Item List page.item=Item Detail page.addItem=Item Add page.updateItem=Item Update button.save=Save button.cancel=Cancel messages_en.properties 폴더에 위와 같이 영어로 된 이름을 설정해 주었다. 상품 등록 그리고 위 코드 처럼 전에 설정한 메시지 표현식을 사용해 자동으로 대체가 된다. 이러면 국제화는 간단하.. 2022. 2. 9.
[Spring Boot] : 타임리프 웹 애플리케이션 Message에 적용하기 웹 애플리케이션 메시지에 적용하기 label.item.quantity=수량 page.items=상품 목록 button.cancel=취소 먼저 messages.properties에 위와 같이 적어줬다. 위 코드로 다른 제목들을 대체하여 만약 변경 사항이 생길 때 여러 페이지를 왔다갔다 하면서 고치지 않고 messages.properties 파일에서 해당 내용만 변경해 주면 된다. 예를 들어 설명하자면 저장을 저장하기로 바꾸길 원한다면 다른 페이지에서 일일이 다 바꿔 줄 필요없이 messages에서 저장부분을 저장하기로 수정만 해주면 되는 것이다. 타임리프 메시지를 적용하기 위해서는 타임리프의 메시지 표현식을 사용해야 하는데 메시지 표현식은 #{,,,} 이런 형식으로 되어 있다. 상품 등록 예를 들면 상품 .. 2022. 2. 9.
[Spring Boot] : 타임리프 MessageSource 설정 메시지 관리 기능을 사용하기 위해 MessageSource를 스프링 빈으로 등록해야 하는데 스프링 부트에서는 간단하게 지원을 해준다. spring.messages.basename=messages properties에 이렇게 메시지 소스를 적어주기만 하면 된다. hello=안녕 hello.name=안녕 {0} messages.properties에는 이렇게 한글로 적어주고 hello=hello hello.name=hello {0} messages_en.properties에는 이렇게 영어로 적어주었다. 이러면 디폴트 값이 한국으로 잡히게 되고 en으로 들어오게 되면 hello가 나오고 그 외 모든 언어는 한글로 안녕이 표시되게 된다. 스프링 MVC 2편 - 백엔드 웹 개발 활용 기술을 참고하여 공부하였습니다. 2022. 2. 9.
[Spring Boot] : 타임리프 Message(메시지), 국제화 메시지, 국제화 소개 만약 상품명이라는 단어를 모두 상품이름으로 고쳐달라는 기획자가 나타나면 전부 다 수정해 주어야 한다. 하지만 여러 화면에 있는 label을 모두 찾아가면서 변경해야 하는데 너무 비효율적이게 된다. 때문에 이런 다양한 메시지를 한 곳에서 관리하도록 하는 기능을 메시지 기능이라고 한다. 예를 messages.properteis라는 메시지 관리용 파일을 만들면 HTML은 데이터를 key 값으로 불러 사용한다. 여기에서 더 나아가 별도로 관리하는 김에 파일을 한개 더 만들어 다른 나라 언어로 사용할 수 있게 해준다. messages_en.propertis messages_ko.propertis 이렇게 두 개의 파일을 만들면 한글과 영어가 지원되게 된다. 이떄, 영어를 사용하는 사람은 _en.. 2022. 2. 9.
[TIL] : 105 일일 배움을 위한 Today I Learned ! Spring Boot 스프링 부트 강의 한 섹션을 마쳤다. 오늘 두 섹션을 다 들으려 했는데 역시 복습을 같이 하면서 공부를 하니까 시간이 부족하다. 하면 더 할 수 있었는데 JS30일 챌린지와 알고리즘..쿠버네티스 등 할 게 많이 남아 있어서 한 섹션만 마쳤다. 이번에는 타임리프에서 체크 박스와 라디오 박스, 셀렉트 박스를 사용하는 방법에 대해 다루었다. 2022.02.08 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 스프링 통합 메뉴얼 및 스프링에서 사용하기 2022.02.08 - [Framework/Spring Boot] - [Spring Boot] : 타임리프 입력 폼 처리하기 th:object와 th:f.. 2022. 2. 8.
[Spring Boot] : 타임리프 셀렉트 박스 타임리프 셀렉트 박스 셀렉트 박스는 여러 선택지 중 하나를 선택할 떄 사용한다. 이번에도 역시 자바 객체를 사용하는 방법으로 진행했다. @ModelAttribute("deliveryCodes") public List deliveryCodes() { List deliveryCodes = new ArrayList(); deliveryCodes.add(new DeliveryCode("FAST", "빠른 배송")); deliveryCodes.add(new DeliveryCode("NORMAL", "일반 배송")); deliveryCodes.add(new DeliveryCode("SLOW", "느린 배송")); return deliveryCodes; } 여기서 강사님이 팁을 주셨는데 deliveryCodes() .. 2022. 2. 8.
[Spring Boot] : 타임리프 입력 폼 처리하기 th:object와 th:field 사용 타임리프 입력 폼 처리 폼 코드를 타임리프의 추가 기능을 통해 효율적으로 개선할 수 있다. 강의에서 몇 가지 주요 코드를 사용했는데 아래와 같다. th:object 커맨드 객체를 지정한다. *{...}} 선택 변수식으로 th:object에서 선택한 객체에 접근한다. 아래 예시에서 보면 이해가 편하다. th:field HTML 태그의 id, name, value 속성을 자동 처리해준다. model.addAttribute("item", new Item()); 먼저 컨트롤러에서 객체를 넘겨준다. 폼 태그에 th:object 속성을 사용해 model에서 전달한 객체의 이름을 넣어주고 사용하게 된다. 이렇게 줄여 쓸 수 있다. id를 지우면 상관이 없는 빨간 줄이 뜨기 때문에 강사님이 남겨둔 것 같다. 원래는”$.. 2022. 2. 8.
[Spring Boot] : 타임리프 스프링 통합 메뉴얼 및 스프링에서 사용하기 타임리프 스프링 통합 타임리프의 2가지 메뉴얼이다. 📝 ← 기본 메뉴얼 📝 ← 스프링 통합 메뉴얼 타임리프는 스프링 없이도 동작하고 스프링과 통합을 위해 편의 기능을 더 제공하기도 한다. 강의 자료에 따르면 스프링 통합으로 추가되는 기능들은 SpringEL 문법, 스프링 빈 호출 지원, 폼 관리를 위한 추가 속성, 폼 컴포넌트 기능 등 여러 가지를 지원한다. 📝, 📝 ← 타임리프 템플릿 엔진을 스프링 빈에 등록하고, 타임리프용 뷰 리졸버를 스프링 빈으로 등록하는 방법이다. 다른 방법으로는 아래와 같다. implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' build.gradle에 위 코드를 넣으면 스프링 부트가 자동으로 설정해 준.. 2022. 2. 8.
[Spring Boot] : 타임리프 - Escape, Unescape public String textBasic(Model model) { model.addAttribute("data", "Hello Spring !"); return "basic/text-basic"; } 컨트롤러에서 model에 데이터를 담아서 html에서 값을 띄워준다. th:text 사용 컨텐츠 안에서 직접 출력하기 = [[${data}]] 이렇게 두 가지 방법을 통해 데이터를 출력해 줄 수 있다. 두번째 방법을 보면 [[...]] 이런 형식의 문법을 사용했는데 이런 형식의 문법을 Escape(이스케이프)라고 한다. HTML 문서는 와 같은 특수 문자를 기반으로 정의되는데 뷰 템플릿으로 HTML 화면을 생성할 때는 출력하는 데이터에 이런 문자가 있는 것을 주의해야 한다. public String te.. 2022. 2. 4.
[Spring Boot] : 타임리프, thymeleaf 소개 공식 사이트: https://www.thymeleaf.org/ 공식 메뉴얼 - 기본 기능: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 공식 메뉴얼 - 스프링 통합: https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html 타임리프는 메뉴얼이 기본적으로 잘 되어 있으나 순서대로 보기엔 어렵다. 타임리프의 특징 3가지이다. 서버 사이드 HTML 렌더링(SSR) 네츄럴 템플릿 스프링 통합 지원 서버 사이드 렌더링 (SSR) 기술을 하나 쯤은 배워야 하는데 타임리프가 좋다. (JSP도 있다.) 타임리프는 HTML을 최대한 유지한다. 때문에 웹 브라우저에서 파일을 직접 열어도 내용 확.. 2022. 2. 4.
[Spring Boot] : 상품 상세 페이지 타임리프 적용 및 목록으로 가기 구현 @GetMapping("/{itemId}") public String item(@PathVariable Long itemId, Model model) { Item item = itemRepository.findById(itemId); model.addAttribute("item", item); return "basic/item"; } @pathVariable로 요청 값을 받아서 조회하고 model에 담아두고 뷰 템플릿을 호출해 준다. 타임 리프를 사용하기 위해 html 코드에 위 코드를 추가해 주고 동적 웹 페이지를 위해 th:href 를 사용해서 경로를 잡아준다. 상품 ID 제품을 상세 조회 했을 때 등록한 정보에 맞게 나오게 하기 위해 각 표시 부분에 th:value를 추가해 주준다. 예를 들어 상품.. 2022. 2. 3.
[Spring Boot] : thymelef, 타임리프 간단 사용법 타임리프를 사용하기 위해서는 html 코드에 아래 코드를 적용시켜 줘야 한다. 위 코드를 적용하지 않아도 된다는 말도 있다고 하는데 그냥 적용시켜 사용하는 것을 추천한다고 한다. href="../css/bootstrap.min.css" 이런 html 코드를 타임리프를 통해 아래와 같이 변경해 줄 수 있다. th:href="@{/css/bootstrap.min.css}" 이렇게 되면 페이지에서 소스 보기를 했을 때 ..경로가 없이 동적인 페이지를 완성시켜 나갈 수 있게 된다. 타임리프에서 URL 링크를 사용할 때는 @{..}를 사용한다고 한다. 이 URL 링크 표현식을 사용하면 서블릿 컨텍스트를 자동으로 포함한다. 타임리프의 핵심은 th: 가 붙은 부분은 서버사이드에서 랜더링 되고, 기존 것을 대체한다는 .. 2022. 2. 2.
반응형