Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

View템플릿을 사용할때 중요한 요소가, 기존 html 원형을 유지하느냐? 아니냐? 의 차이를 아는것이 중요합니다.

Tip

Node.

...

js의 Jade vs

...

EJS 에서 이러한 차이점에대한 개념을 쉽게 잡을수 있을듯 보입니다.

Jade가 처음나왔을때는, 지저분한 html을 더욱더 심플하게 사용할수 있다란점에서 유행을 끄는듯보였으나

Html디자이너와 협업을하며 문제가 생기기 시작하였습니다. 변형된 html 템플릿을 디자이너가 건들수 없기때문입니다.

그래서 다시 최근의 추세는, 바인딩 처리가 어찌되었건... html의 원형을 유지하면서 동적 처리가 가능한

뷰 템플릿 엔진 사용이 권장이됩니다.


Spring에서는 Html의 원형을 유지하는 Thmeleaf View템플릿을 통해 MVC패턴을 적용해보겠습니다.

...

뷰모델에 지정된 데이터는, 위와같은 형식으로 html코드내에서 접근할수가 있습니다.

더 풍부한 표현이 필요하다면, 아래 링크를 참고합니다.

http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#order-list


작동모습

DataView

Image Modified

Image Modified

우리가가진 DB의 데이터가 자연스럽게 Html로 변환되었습니다.

디자인이 아주 투박합니다하지만 디자인은 자연스럽지 못하고 투박해보입니다. 그래서 템플릿 코드는 html 태그의 원형이 유지가되는것이 중요합니다.

이것을 이쁘게 만들수 있는 Html/CSS 제작자에게 템플릿코드를 그대로 공유하면 되기 때문입니다.


다음은 Angular.JS와 JPA CRUD와 연동하여, MVC 를 실현한 예제입니다.

http://websystique.com/spring-boot/spring-boot-angularjs-spring-data-jpa-crud-app-example/