
은 HTML 태그가 아닌 타임리프의 유일한 자체 태그다. BasicController에 추가 @GetMapping("/block") public String block(Model model) { addUsers(model); return "basic/block"; } /resources/templates/basic/block.html 사용자 이름1 사용자 나이1 요약 : Thymeleaf의 th:each 디렉티브를 사용하여 ${users} 변수의 사용자 목록을 반복. 각 사용자는 user 변수에 바인딩됩니다. : Thymeleaf의 th:text 속성을 사용하여 사용자의 이름을 출력. ${user.username}은 사용자의 이름을 나타내는 표현식이다. : 사용자의 나이를 출력하는 부분으로, ${user..

주석 BasicController 추가 @GetMapping("/comments") public String comments(Model model) { model.addAttribute("data", "Spring!"); return "basic/comments"; } /resources/templates/basic/comments.html 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html data 3. 타임리프 프로토타입 주석 1. 표준 HTML 주석 형식의 주석은 표준 HTML 주석으로, 주석 내부의 내용은 클라이언트에게 렌더링되지 않는다. ${data}의 Thymeleaf 표현식은 주석 처리되어 무시된다. 2. 타임리프 파서 주석 형식의 주석은 Thymeleaf 파서..

반복 - 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. BasicController 추가 @GetMapping("/each") public String each(Model model) { addUsers(model); return "basic/each"; } private void addUsers(Model model) { List list = new ArrayList(); list.add(new User("userA", 10)); list.add(new User("userB", 20)); list.add(new User("userC", 30)); model.addAttribute("users", list); } /resources/templa..

속성 값 설정 타임리프 태그 속성(Attribute) 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작한다. th:* 로 속성을 적용하면 기존 속성을 대체한다. 기존 속성이 없으면 새로 만든다. BasicController 추가 @GetMapping("/attribute") public String attribute() { return "basic/attribute"; } /resources/templates/basic/attribute.html 속성 설정 속성 추가 th:attrappend, th:attrprepend 및 th:classappend를 사용하여 클래스 속성 추가 - th:attrappend = - th:attrprepend = - th:classappend = che..

연산 - 타임리프 연산은 자바와 크게 다르지 않다. - HTML안에서 사용하기 때문에 HTML 엔티티를 사용하는 부분만 주의하면 된다. /resources/templates/basic/operation.html 산술 연산 10 + 2 = 10 % 2 == 0 = 비교 연산 1 > 10 = 1 gt 10 = 1 >= 10 = 1 ge 10 = 1 == 10 = 1 != 10 = 조건식 (10 % 2 == 0)? '짝수':'홀수' = Elvis 연산자 ${data}?: '데이터가 없습니다.' = ${nullData}?: '데이터가 없습니다.' = No-Operation ${data}?: _ = 데이터가 없습니다. ${nullData}?: _ = 데이터가 없습니다. 부연설명 1. 산술 연산: (1) 10 + ..

리터럴 - 소스코드 상에 고정된 값을 말하는 용어 ex. "Hello" - 문자 리터럴 / 10,20 - 숫자 리터럴 타임리프는 다음과 같은 리터럴이 있다. 타임리프에서 문자 리터럴은 항상 ' (작은 따옴표)로 감싸야 한다. 그런데 문자를 항상 ' 로 감싸는 것은 너무 귀찮은 일이다. 공백 없이 쭉 이어진다면 하나의 의미있는 토큰으로 인지해서 다음과 같이 작은 따옴표를 생략할 수 있다. 오류 수정 BasicController에 추가 리터럴 'hello' + ' world!' = 'hello world!' = 'hello ' + ${data} = 리터럴 대체 |hello ${data}| = 'hello' + ' world!' = : 작은 따옴표로 둘러싸인 문자열을 Thymeleaf의 th:text 속성을 ..

controller/ServletUploadController @Slf4j @Controller @RequestMapping("/servlet/v1") public class ServletUploadControllerV1 { @GetMapping("/upload") public String newFile() { return "upload-form"; } @PostMapping("/upload") public String saveFileV1(HttpServletRequest request) throws ServletException, IOException { log.info("request={}", request); // 로깅을 통해 HTTP 요청 객체(request)를 출력한다. String itemNa..

일반적으로 사용하는 HTML Form을 통한 파일 업로드를 이해하려면 먼저 폼을 전송하는 다음 두 가지 방식의 차이를 이해해야 한다. HTML 폼 전송 방식 application/x-www-form-urlencoded 방식 application/x-www-form-urlencoded 방식은 HTML 폼 데이터를 서버로 전송하는 가장 기본적인 방법이다. Form 태그에 별도의 enctype 옵션이 없으면 웹 브라우저는 요청 HTTP 메시지의 헤더에 다음 내용을 추가한다. Content-Type: application/x-www-form-urlencoded 그리고 폼에 입력한 전송할 항목을 HTTP Body에 문자로 username=kim&age=20 와 같이 & 로 구분해서 전송한다. 파일을 업로드 하려면..