순차문

• 순서: 입력, 처리, 출력

VueJS

• MVVM 패턴 사용
• 구성요소 : component(Model, ViewModel, View, CSS)
• 컴포넌트 기반 ⇒ 재사용성, 생산성, 이식성 높음

MVVM

• 입력 - 데이터
  • Model(도메인 특화 데이터)
    ⇒ WAS에서 데이터(JSON) 받아옴
    ⇒ key-value형태(객체 리터럴)
    ⇒ [object, object, object, …] 사용
• 처리 - 연산, 상태
  • ViewModel(상태와 연산)
    ⇒ JavaScript
• 출력 - 화면(브라우저)
  - View(유저 인터페이스)
  ⇒ html 태그 (table, li, …)
  ⇒ 자동 업데이트 해 view에 보여줌
  

클라이언트-서버측 프레임워크

• 클라이언트 부분의 컴포넌트 프레임워크 ⇒ Vue.js
• 서버 부분의 컴포넌트 프레임워크 ⇒ Spring Framework
  ⇒ Singleton 객체

• Router : 네트워크에서 패킷을 전달
• Components : UI 구성 ⇒ 렌더링, 비즈니스 로직 처리, 상태 관리
• axios : HTTP 요청 처리(RESTful API와의 통신)

virtual DOM

• DOM : Document Object Model

• 브라우저가 html 바디 안에 태그들의 포함 관계를 알고있음

• 원래 DOM의 복사본인 가상 DOM을 만들어 처리한 후, 최종 처리 완료된 DOM과 원래 DOM의 다른 부분만 브라우저 DOM에 업데이트
  ⇒ 캐시 역할을 함(효율적인 UI 업데이트)
  ⇒ 특정 화면의 일부분을 자주 갱신하는 경우 사용

• 가상 DOM을 만들면 완충작용(처리 속도 완화) 됨 ⇒ 속도가 빠름(캐싱)

• CPU - RAM에서 데이터를 가져와 모든 처리 수행
  캐시메모리 - 자주 사용하는 데이터와 명령어가 임시저장 되어있음(가상 DOM) ⇒ CPU가 RAM에 직접 접근할 필요 없이 데이터에 빠르게 접근 가능(완충 작용)
  RAM - CPU가 처리할 데이터들을 가져옴(휘발성 저장) ⇒ 트리 방식도 갖고옴
  HDD/SSD - 장기적으로 대용량 데이터 저장