Front-end Development Scenario

  • 일반적인 마크업을 수행한다.
  • List와같이 데이터가 반복적으로 들어가는 영역은 Template Engine 사용 (like mustache…)
  • Template Engine 의 랜더링 시점은 페이지 영역에서 필요한 부분이 로드되어야 할 때와 사용자가 해당 영역 클릭 시 보여줘야 할 때 (Like SPA)

Workflow!

  1. 서버에서 Raw Data를받아온다.
  2. 받아 온 Raw 데이터를 HTML파일의 script 태그안에 붙여 select 가능하게 object 형태로 둔다 . (ex, mdc.init({var1 : value, var2 : value, ranks : [{blah blah blah}]}).
  3. Template Engine 을 통해 2번에서 생성된 object data 에 접근하여 필요 시 render 되게 (async) 개발한다.

Why?

  1. 브라우저 렌더 시 알수없는 형태의 script 태그는 무시하고 실행하지 않음 (렌더링 시간 축소)
  2. 불러와야 할 모든 데어터가 한번에 로드되면 (브라우저는 실행하지 않는) 사용자의 Request / Response 가 확연히 줄어든다.