MVC 구조와 Thymeleaf 6. Thymeleaf { inline, 예제, 연습문제 }

Inline

인라인 속성을 사용하여 자바스크립트에서 타임리프를 쓸 수 있습니다. 인라인 속성을 사용하면 자동으로 자바스크립트의 자료형에 맞게 데이터가 처리되는데요. 자바의 String 은 문자열로 처리되고, 클래스는 JSON으로 처리됩니다. 이런 결과로 우리는 데이터를 쓸 수 있게 됩니다.

 

Inline 예제

우선 컨트롤러에 위와 같은 코드를 작성해주었습니다.

ex7.html 파일을 작성해주었는데요. 컨트롤러에서 전달받은 값을 사용하게 됩니다. 여기서 문제는 타임리프를 사용하지 않으면 전달받은 데이터를 그대로 해석하게 됩니다. 타임리프의 inline 을 사용하면 dto 변수가 객체로 변환이 되기 때문에 dto.text 처럼 바로 사용할 수 있게 됩니다. 

실제로 실행을 시켜보았는데요. 페이지 소스 보기를 진행해보면 위와 같이 inline 속성을 사용한 것에 따른 차이를 확인할 수 있습니다. Web browser 에서 브레이크 포인트를 걸고 실행을 시키면 순수하게 해석한 것을 js 가 인식하지 못하는 것을 확인할 수 있습니다. 

 

연습문제 4

우선 PersonDTO 클래스를 생성해주었습니다. 

그 다음 quizController 에 q4( ) 메서드를 추가해준 다음 모델에 personDTO 라는 객체를 생성하여 담아주었습니다. 

q4.html 을 작성하였는데요. 객체 표현식을 사용하여 모델에 담긴 personDTO 라는 객체의 name, age, address 를 태그에 콘텐츠로 담아주었습니다. 

서버를 구동시킨 다음 화면을 보면 다음과 같이 잘 출력된 것을 확인할 수 있습니다. 

 

연습문제 5

 

우선 q5( ) 를 QuizController 에 추가해주었습니다. 

q5.html 을 작성해주었는데요. 블록을 활용하여 반복문을 구현하였고, 조건문을 활용하여 내가 원하는 요소만 화면에 출력을 하였습니다. 

위와 같이 화면이 출력된 것을 볼 수 있습니다. 

 

연습문제 6

연습문제 6번을 풀어보겠습니다. 

우선 QuizController 에서 q6() 를 작성했습니다. PersonDTO 리스트를 생성하여서 객체들을 담아주었습니다. 

그 다음 q6.html 을 작성하였는데요. 테이블을 보면 각 컬럼은 고정적이지만 행이 가변적임을 알 수 있는데요. 따라서 행을 추가하는 태그에 반복문을 걸어주어야 합니다.