[웹 개발 개념 및 동작 방법 - 프론트엔드 편] WP HTML 변경 Routing 과 Rendering : DOM → Virtual DOM

1. HTML에게 Javascript의 역할..

Javascript는 HTML(DOM)을 변경하고, HTML(DOM) 에서 발생하는 이벤트들을 인지
그러나, Javascript 를 통해 직접 DOM을 변경하면..

• HTML(DOM) 요소 하나하나 조작
  1. Hard to Manage : 일일히 DOM을 매번 선택하여 조작 = 개발이 힘듦
  2. Repetitive : DOM 요소 하나가 바뀔 때마다 매번 반복적인 Rendering Process
     • Render Tree → Layout(Reflow) → Paint(Repaint)

2. Javascript와 비교한 Frontend Javascript Framework의 장점

• VDOM 을 한데 모아 DOM 을 한번에 조작하게 하는 (Batch) 자바스크립트 코드가 들어있거나
• 페이지 이동을 네트워크를 쓰지 않고 자바스크립트를 통해 렌더링하여 SPA 가 가능하게 만들어주거나
• 로그인하고 난 뒤 세션을 관리하고, Cookie 나 LocalStorage 등을 활용하는 자바스크립트 코드가 있거나

→ 웹 페이지 렌더링을 간편히 개발하는데 도움이 되는 거의 모든것들을 제공

3. jQuery 등장 배경 및 제공 기능

• 등장배경

모든 웹 브라우저에서 동일한 방법으로 자바스크립트를 동작시키고, 일관된 개발을 위해 등장

• 기능
  • DOM 요소 선택
  • DOM 요소 조회(Traversal) 및 수정
  • CSS 조작
  • 이벤트 처리
  • 특수효과 및 애니메이션
  • AJAX 지원 및 JSON/XML 파싱
    • 웹 브라우저마다 AJAX 상세 구현체들이 각양각색 (윈도우와 애플처럼)
  • 자바스크립트 개발을 쉽게해주는 여러 유틸리티 함수들

4. lodash 사용 이유

cross-browser 호환성 문제와 일관성있는 동작을 보장하기 위해 사용