오늘부터 시작하는 뷰(VUE) 전공 1일차 입니다.
미리 예습을 하고 기록하자는 취지에서 이렇게! 블로그에 일기장처럼 기록하고자 합니다.
우선 저는 프로그램으로 VISUAL STUDIO CODE란 프로그램으로 vue.js를 공부하고 있습니다.
우선 시작하기에 앞서 Vue.js의 장점에 대해 간단하게 요약하겠습니다.
장점
- 직관적이고 배우기 쉽고
- 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있으며
- Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있습니다.
- 직관적이고 배우기 쉽다
웹프론트엔드 프레임워크인 React.js, Angular.js, Vue.js가 있는데 Vue.js의 가장 큰 장점은 배우기 쉽다는 것입니다.
경험있는 개발자라면 단기간에 Vue.js를 익히고 실무에 바로 적용할 수 있을정도로 매우 직관적이고 배우기 쉽죠.
- 재사용을 통한 애플리케이션 개발 단축 및 양질의 코드를 생산할 수 있다
Vue는 재사용성을 극대화하고 애플리케이션 전체에 걸쳐 양질의 코드를 생산할 수 있게 해줍니다.
=> 이는 애플리케이션 개발 속도를 높일 수 있다는 뜻입니다.
템플릿이라 하면 보통 무언가 정형화되어 작성된, 유사한 것을 만들 때 적용하여 빠르게 원하는 대로 만들 수 있도록 해주는, 이미 구조화과 된 것을 의미합니다.
템플릿은 문서일 수도 있고, 특정 디자인일 수도 있습니다.
프로그램 역시 템플릿은 비슷한 개념입니다.
특정 기능을 갖고 있는 프로그램 코드 세트이며, 개발자는 템플릿을 사용해 이미 템플릿이 갖고 있는 기능을 활용, 유사한 프로그램을 빠르고 안정적으로 개발할 수 있습니다.
Vue에서는 컴포넌트(Component)가 이에 해당합니다.
Vue에서 컴포넌트를 통해 재사용성을 극대화 할 수 있죠.
즉 코드의 재사용을 높이고 양질의 코드 개발이 가능하다고 생각하면 됩니다.
- Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가지고 있다
Angular의 기능에는 데이터 바인딩이 있는데, 기존 웹 개발 방식에서 자바 스크립트의 역할은 대부분 웹 화면에서 사용자의 인터랙션을 통해 발생하는 데이터와 이벤트를 화면에 설정하거나 반대로 발생하는 데이터/이벤트를 가져오는 부분에 대한 코딩이었습니다.
하지만 Angular가 나오고 데이터 바인딩, 정확힌 Two-Way 데이터 바인딩을 제공해서 웹 개발에 많은 일이 일어났죠
데이터 바인딩이란 데이터와 웹 화면의 요소(HTML DOM)가 서로 양방향으로 연결되어 있어서, 어느 한쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영됩니다.
데이터 바인딩을 적용함으로써, 기존 웹 개발에 어느 한쪽에 변경이 일어나면 다른 한쪽에 해당 결과를 반영하기 위해 구현했던 수많은 코드를 작성할 필요가 없어졌고, 개발자의 실수나 구현 능력 부족으로 오류를 걱정할 필요가 없어졌죠.
하지만 Angular에도 단점이 있습니다. 속도(성능) 문제이죠.
HTML DOM(Document Object Model)의 특성상 복잡할수록 점점 무거워지면서 느려지죠.
HTML DOM은 트리구조로 되어 있어 웹 화면에 요소가 많아지고 복잡도가 증가할수록 계속해서 연결된 트리구조를 가지게 되면서, 웹 화면에 변경이 일어날 때마다 이런 트리구조가 갱신이 일어나야 하며 갱신작업은 매우 큰 성능 저하를 가져오는 것입니다.
이런 단점을 극복하고 빠르며 고성능을 가진 웹 애플리케이션을 위해 나온 것이 React입니다.
React는 이런 DOM의 문제 개선을 위해 Virtual DOM(가상 돔) 개념을 제공하고 Virtual DOM은 실제 DOM 문서를 추상화하며 변화가 많은 화면(View)를 DOM에서 직접 처리하는 방식이 아닌, 가상 DOM을 만들어 메모리에서 처리한 다음 실제 DOM과 동기화함으로 기존 DOM이 가지고 있던 단점을 개선하며 웹에서도 고성능 애플리케이션을 구현할 수 있게 되었습니다.
'뷰(VUE) 프로젝트 예습' 카테고리의 다른 글
| 대학 전공 뷰(VUE) 예습 2일차 (0) | 2024.01.09 |
|---|
