[Vue] Vue vs JavaScript/HTML

0. JavaScript/HTML

• JavaScript/HTML 방식을 보기 위해 vue > old.html 파일을 만든 후 코드를 작성하였다.

• str을 바꿀때마다 div.innerHTML = str; 을 써줘야 했다.
• 참고로 JavaScript의 기능에 대해서 구글링 할 때는 검색어 뒤에 MDN(Mozilla Developer Network)을 붙여주자. 공식문서이기 때문에 보다 정확한 정보를 얻을 수 있다.
• Obj를 추가하여 코드를 조금 더 작성해보고 결과를 확인해보았다.

• Reactivity의 특성을 볼 수 있다.

• event 로 JavaScript예시를 들어보자.

---

1. Vue

• Vue의 특성을 보기위해 vue > vue.html 파일을 만든 후 코드를 작성하였다.

---

2. 비교

• 참고로 Vue는 JavaScript의 프레임워크이다. 다른 범주에서 비교하는 것이 아니라 같은 범주에서 특징을 비교한 것이다.
• Vue 와 JavaScript의 차이점을 보기 위해 다음과 같이 화면을 분할해 주었다.

• vue.html의 태그가 좀 더 직관적으로 변한다.
• vue의 동작원리를 공식문서에 나와있는 그림으로 보면 다음과 같다. 

• DOM : 화면, Vue : View Library, Objects : 객체(JavaScript)
• 화면에서 사용자가 키보드 입력을 하면 이벤트가 발생한다. 이벤트가 발생하면 View에서 DOM Listeners를 이용해서 코드를 실행시켜준다. 그 후 JavaScript 객체의 값이 바뀌면 Reactivity를 이용해서 데이터가 바뀌었을 때 Vue에서 Reactivity로 화면에 그려주는 것이 핵심이다.
• 이 부분을 알고 있으면 Component를 보고 API를 살펴보면 된다.
• "특정 이벤트에 대한 관리를 개발자가 하지않고 라이브러리가 하겠다." "화면에 데이터를 그려낼때 내가(Vue가) 해줄테니까 데이터만 잘 구현해라."