타임리프 (21) 썸네일형 리스트형 스프링 mvc2편 타임리프 - 기본 기능 : 주석 인프론 김영한 강사님의 스프링mvc2편을 보고 정리한 글입니다. 무엇을 배웠나요? 표준HTML주석 자바스크립트의 표준 html 주석은 타임리프가 렌더링 하지 않고, 그래도 남겨둔다. 타임리프 파서 주석 타임리프 파서 주석은 타임리프의 진짜 주석ㅇ디ㅏ. 렌더링에서 주석 부분을 제거한다. 타임리프 프로토타입 주석 HTML파일을 웹 브라우저에서 그대로 열어보면 HTML주석이기 때문에 이 부분이 웹 브라우저가 렌더링 하지 않는다. 그러나 타임리프 렌더링을 거치면 이 부분이 정상 렌더링 된다. 코드 예시 html data 1. 표준 HTML 주석 2. 타임리프 파서 주석 html data 3. 타임리프 프로토타입 주석 결과 스프링mvc2편 타임리프 - 기본기능 : 조건부 평가 인프런 김영한님의 스프링 mvc2편으로 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프의 조건식 (if, unless → if의 반대) 타임리프는 if unless에서 해당조건이 맞지 않으면 대크 자체를 헨더링 하지 않는다. 만약 다음조건이 false인 경우 ... 부분 자체가 렌더링 되지 않고 사라진다. switch → *은 만족하는 조건이 없을때 사용하는 디폴트이다. 궁금한 점은 무엇인가요? 더 필요하다고 생각한 것이 있나요? 코드 1 username 0 1 username 0 count username age 1 UserA 10 미성년자 미성년자 2 UserB 20 3 UserC 30 switch count username age 1 UserA 10살 2 UserB 20살 3 UserC 기타 스프링mvc2편 타임리프 - 기본기능 : 반복 인프런 김영한 강사님의 스프링 mvc2편을 보고 정리한 내용입니다. 무엇을 배웠나요? 타임리프에서 반복은 th:each 를 사용한다. 추가로 반복에서 사용할 수 있는 여러 상태 값을 지원한다. : 반복시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수(user)에 담아서 태그를 반복 실행합니다. th:each 는 List 뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있습니다. Map도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry입니다(자바에서 반복문을 돌릴수 있는 것들은 웬만해서는 전부 가능) 이때 Entry는 key와 value를 같이 가지고 있는 객체 같이 반복의 두번째 파라미터.. 스프링mvc2편 타임리프 - 기본기능 : 연산 인프런 김영한님의 스프링 mvc2편을 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프에서의 연산에 대해서 배웠다. 이는 자바와 크게 다를것이 없다. 다만 html엔티티를 사용하는 부분만 주의하면될듯. 비교 연산 : html엔티티를 사용해야 하는 부분을 주의하자. >(gt) , 10 = 1 gt 10 = 1 >= 10 = 1 ge 10 = 1 == 10 = 1 != 10 = (10 % 2 == 0)? '짝수':'홀수' = ${data}?: '데이터가 없습니다.' = ${nullData}?: '데이터가 없습니다.' = ${data}?: _ = 데이터가 없습니다. ${nullData}?: _ = 데이터가없습니다. 스프링mvc2편 타임리프 - 기본기능 : 리터럴 인프런 김영한님의 스프링 mvc2 편을 보고 정리한 내용입니다. 무엇을 배웠나요? 타임리프에서의 리터럴 표현에 대해서 알아보았다. 타임리프에서는 다음과 같은 리터럴이 있다. 문자 : ‘Spring’ 숫자 : 10 불린 : true, false null : null 타임리프에서 문자 리터럴은 항상 작은 따옴표로 감싸야 한다. ‘ ex) 다음과 같은 상황에서는 작은 따옴표를 생략할 수 있다. A-Z, a-z, 0-9, [], ., -, _ 이때 문자 리터럴 중간에 공백이 있다면 오류를 발생 시킨다. ex) 리터럴을 사용하는 예시들 'hello' + ' world!' = 'hello world!' = 'hello ' + ${data} = 리터럴 대체 |hello ${data}| = 이때 리터럴 대체 문법을 사.. 스프링 mvc2 편 타임리프 - 기본기능 : URL링크 인프런 김영한님의 스프링 mvc2편으로 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프에서 url을 생성할 때는 @{…}문법을 사용하면된다. 단순한 url @{/hello}→ /hello 쿼리 파라미터 @{/hello(param1=${param1}, param2=${param2})} → /hello?param1=data1¶m2=data2 ()에 있는 부분은 쿼리 파라미터로 처리된다. 경로변수 @/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} → /hello/data1/data2 url 경로상에 변수가 있으면()부분은 경로 변수로 처리된다. 경로 변수 + 쿼리 파라미터 @{/hello/{param1}(param1=${param1}, p.. 스프링 mvc2편 타임리프 - 기본기능 : 유틸리티 객체와 날짜 인프런 김영한님의 스프링 mvc2편을 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프는 무자, 숫자, 날짜, URI등르 편리하게 ㄷ자루는 다양한 유틸리티 객체들을 제공한다. 타임리프 유틸리티 객체들 예시#uris : URI 이스케이프 지원#temporals : 자바8 날짜 서식 지원#strings : 문자관련 편의 지원#bools : booleans 관련 기능 제공#lists, #sets, #maps : 컬렉션 관련 기능 제공 #ids : 아이디 처리 관련 기능 제공 #arrays : 배열관련 기능 제공 #object : 객체 관련 기능 제공 #numbers : 숫자 서식 지원 #dates : java.util.Calendar 서식 지원 #message : 메시지, 국제화 처리 타임리프 유틸리티 객체 .. 스프링 mvc2편 타임리프 - 기본기능 : 기본객체들 인프런 김영한님의 스프링 mvc2편을 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프에서는 기본객체를 제공한다.${#response}${#servletContext} ${#locale} ${#session} ${#request} 자주 사용하는 쿼리 파라미터에 대해서 조회를 할때는 HttpServeletRequest객체를 통해서 데이터를 조회하려면 request.getParameter(”data”)처럼 불편하게 접근해야하기 때문에 편의 객체도 제공한다.ex) ${param.paramData} 이때 param.[쿼리 파라미터의 키값을 넣는다]ec) ${session.sessionData}ex) ${@helloBean.hello(’spring!’)} 스프링 빈 접근 : @ http 세션 접근 : sessio.. 스프링 mvc2편 타임리프 - 기본기능 : 변수 - SpringEL 인프런 김영한님의 스프링 mvc2편 강의를 보고 정리한 글입니다. 무엇을 배웠나요? 타임 리프에서는 변수를 사용할 때는 변수 표현식을 사용한다. → ${} 해당 변수 표현식에 스프링이 제공하는 표현식을 사용할수 있다. 컨트롤러에서 모델에 넣은 데이터를 사용하기 위한 방법들 Object ${user.username} = ${user['username']} = ${user.getUsername()} = List ${users[0].username} = ${users[0]['username']} = ${users[0].getUsername()} = Map ${userMap['userA'].username} = ${userMap['userA']['username']} = ${userMap['userA'].get.. 스프링 mvc2편 타임리프 - 기본기능 : 텍스트 - text, utext 인프런 김영한님의 스프링 mvc2편을 보고 정리한 글입니다. 무엇을 배웠나요? 타임리프에서 특수 문자를 처리하는 방법에 대해서 배웠다. 타임리프에서는 기본적으로 이스케이프를 제공한다 html 엔티티에는 → >등이 있다. 기본적으로 제공하는 th:text, [[]] 는 이스케이프를 제공한다. 만약 이스케이프 기능을 사용하지 않을려 한다면 다음과 같이 진행하면 된다.[[]] → [()]출력 예시2 출력 예시1 th:text = th:utext = [[...]] = [[${data}]] [(...)] = [(${data})] th:text→ th:utext 궁금한 점은 무엇인가요? 더 필요하다고 생각한 것이 있나요? 참고 자료 강의 링크 https://www.inflearn.com/co.. 이전 1 2 3 다음
