[FE] Vue 기본 개념 및 기초 내용 정리

⚡ 개요

회사에서 프로젝트를 개발하면서 vue.js를 처음 사용하게 되었다. 처음에는 아무것도 모르고 사용을 했고 어느 정도 사용했을 때는 내가 잘 알고 사용하는 것이 맞는가? 이렇게 사용해도 되는 건가? 에 대한 의문이 들었고 vue에 대해서 기본적인 내용과 추가적으로 내가 개발하면서 느꼈던 내용들을 정리해놓으려고 한다.

 

⚡ vue란 무엇인가?

탄생 배경 및 기본적인 개념

Vue.js는 Evan You가 개인적으로 개발하면서 AngularJS와 React.js를 참고하여 만든 자바스크립트 프레임워크이다. Vue.js의 가장 큰 특징은 간결한 문법과 컴포넌트 기반 아키텍처, 그리고 반응형 UI를 제공한다는 것이다.

Vue.js는 MVVM(Model-View-ViewModel) 아키텍처를 기반으로 한다. 이는 AngularJS에서 영감을 받은 것으로, 데이터와 UI를 자동으로 동기화하여 뷰(View)와 모델(Model) 간의 결합도를 낮추는 방식이다. 이를 위해서 Vue.js는 반응형 데이터 바인딩(Reactive Data Binding) 기능을 제공하고 있다. 이 기능은 데이터가 변경되면 자동으로 UI가 업데이트되도록 하는 것으로, 개발자는 일일이 DOM을 조작할 필요가 없어져 코드의 복잡성이 낮아진다.

또한 Vue.js는 컴포넌트 기반 아키텍처를 사용한다. 이는 AngularJS와 React.js에서도 사용되는 패턴으로, UI를 재사용 가능한 컴포넌트로 분리하여 개발하는 방식이다. 이를 통해 코드의 재사용성과 유지보수성이 향상되며, 큰 규모의 애플리케이션 개발에도 유용합니다.

Vue.js는 가상 DOM(Virtual DOM) 개념을 도입하여 빠른 렌더링 속도와 반응성을 제공한다. 이는 React.js에서도 사용되는 기술로 브라우저가 직접 DOM을 조작하는 것이 아니라, 가상 DOM을 조작한 후 변경된 부분만 실제 DOM에 반영하는 방식이다. 이를 통해 불필요한 렌더링 작업이 줄어들어 빠른 속도와 반응성을 제공할 수 있다.

Vue.js는 또한 간결하고 직관적인 문법을 제공하여 쉽게 학습하고 사용할 수 있다. 특히 템플릿 문법이 AngularJS와 비슷하면서도 간단하고 직관적이다. 또한 디렉티브(Directives) 기능을 제공하여, DOM 조작을 간단하게 처리할 수 있다.

 

Vue.js의 핵심 기능은 다음과 같다.

• 반응형 데이터 바인딩
• 컴포넌트 기반 아키텍처
• 가상 DOM(Virtual DOM)
  • DOM을 메모리에 가상으로 구현한 것이다. 실제 DOM과 동일한 계층 구조를 가지고 있고, 이를 조작하여 실제 DOM을 업데이트한다. 이 과정에서 실제 DOM과의 차이점이 발생하면 차이점에 대해서만 변경하고 적용하고 나머지 부분은 바꾸지 않는다. 이러한 과정을 통해서 DOM 조작을 최소화하고 불필요한 렌더링을 방지해서 성능을 향상한다.
    
    
• 디렉티브(Directives)
• 이벤트 핸들링
• 라우팅(Routing)
  •  vue.js에서의 라우팅은 Vue Router라는 공식 라이브러리를 통해서 제공이 되고 있다. 클라이언트 사이드에서 페이지간 이동을 관리하는 역할을 하고 있으며, 여러 기능을 제공하고 있으며 페이지 간 전환 시 새로운 페이지를 서버로부터 받아오는 대신, 이미 로드된 HTML, CSS, JavaScript 등을 이용해서 빠르게 전환한다.
    
• 상태 관리(State management)
  • 상태 관리를 위해 Vuex라는 공식 라이브러리를 통해서 제공이 되고 있다. (현재 기준으로 vue에서 Pinia도 공식 상태 관리 라이브러리로 인정을 해서 많이들 사용하고 있다.)
    vue.js에서 사용되는 모든 컴포넌트 간에 공유되는 저장소(Store)를 제공하여 상태관리를 효과적으로 처리할 수 있도록 도와준다. 여러 컴포넌트 간에 흐름을 관리하는 패턴 중 하나인 Flux 패턴에 기반을 두고 있다. 기본적으로 상태(state), 변이(mutations), 액션(actions), 게터(getters) 등의 개념을 사용하여 상태를 변경하고, 이벤트를 처리할 수 있다.
    
    
• 템플릿 문법 등

vue.js를 사용하면서 중요하게 봐야 하는 부분에 대해서는 빨간색으로 표시했다. 더 자세한 내용은 한번 찾아보고 정리하도록 한다.

(실제 어떻게 동작하는지에 대해서는 따로 노션에 내가 보기 쉽게 정리 했다. 정리를 다시 해서 올려야 할거같다..)

 

⚡ vue.js를 사용하는 이유와 장단점

Vue.js를 사용하는 이유

👉 쉬운 학습 : Vue.js는 가볍고 직관적인 API를 제공하여 쉬운 학습 곡선을 가지고 있다. 이미 HTML, CSS, JavaScript에 대한 기본적인 이해가 있다면 빠르게 Vue.js를 배울 수 있으며 Vue.js의  공식 문서와 풍부한 생태계는 학습과 개발을 하는데 도움을 많이 준다.

 

👉 유연성: Vue.js는 점진적으로 적용 가능한 특징을 가지고 있다. 기존 프로젝트에 Vue.js를 점진적으로 도입할 수 있으며 단일 페이지 애플리케이션 (SPA) 개발에도 사용할 수 있다. Vue.js의 컴포넌트 기반 아키텍처는 코드 재사용과 유지 보수를 간편하게 만든다.

 

👉 생산성: Vue.js는 개발자가 작업을 빠르게 진행할 수 있는 다양한 기능과 도구를 제공한다. Vue CLI (Command Line Interface)를 통해 프로젝트를 생성하고 관리할 수 있으며, Vue Devtools와 같은 개발 도구를 통해 디버깅 및 성능 향상을 할 수 있다. 또한 Vue.js의 반응형 데이터 바인딩은 개발 작업을 간소화하고 생산성을 높여준다.

 

👉 성능: Vue.js는 가볍고 빠른 가상 돔(Virtual DOM)을 사용하여 성능을 최적화한다. 가상 돔은 실제 DOM과 동기화되며 변경 사항을 효율적으로 감지하여 필요한 부분만 업데이트한다. 이로 인해 애플리케이션의 반응성이 향상되고 효율적인 렌더링이 가능해진다.

 

👉 커뮤니티 및 생태계: Vue.js는 활발한 커뮤니티와 다양한 생태계를 가지고 있다. 커뮤니티의 지원(구글링ㅋㅋ)을 받을 수 있으며, Vue.js를 사용하여 개발할 때 많은 라이브러리, 도구, 플러그인 등을 활용할 수 있다. Vue.js는 많은 회사와 개발자들에게 선택되고 사용되고 있어서 지속적인 발전과 업데이트가 이루어지고 있다.

 

Vue 공식 홈페이지에서도 일부 설명이 되어있고 추가적인 내용을 더했다.React vs Vue 많은 개발자들이 앞단을 개발할 때 이 두 가지의 라이브러리를 두고 많은 고민들을 한다. 우리도 이 두가지의 라이브러리 중 어떤 것을 사용할지 많은 고민을 하고 선택을 하게 되었다.

 

우리가 개발하고 있는 시스템을 기준으로 화면이 같지만 데이터가 다른 경우, 화면이 같으면서도 조금씩 다른 경우,  표현되는 데이터가 많은 경우, 실시간 표현등 여러 가지 복합적으로 문제가 있었다. 이러다 보니 기존 레거시 웹의 경우 많은 화면단 웹 소스를 가지고 개발을 해야 되며 잦은 실수와 랜더링 속도등 많은 이슈들이 있었다.신규 개발을 시작할때 우리가 겪은 개발 시 단점 및 문제점을 파악했을 때 Vue가 우리의 문제점을 해결해 줄 수 있을 거라고 생각했고 사용하고 있다. 우리나라의 경우는 React의 점유율이 더 높은 반면 해외의 경우 Vue가 나온 이후  더 많이 사용하면서 점유율이 바뀌고 있는 추세다.

 

⚡ vue 시작하기

• 따로 정리를 해야 할 거 같다.
  (vue cli를 통해서 시작을 해도 된다~. )

⚡ 생각

vue를 사용하면서 느낀 점은 쉬우면서도 어렵다는 생각을 많이 하게 되었다.

vue를 처음 접하는 주니어 개발자들도 사용하기 편하도록 되어있으며, 공식 문서 및 커뮤니티에서도 많은 정보들을 얻을 수 있어서 접근성은 편하다고 생각한다. 하지만 Vue가 많은 것을 제공해주는 만큼 정확한 개념 및 이해를 하지 않고 사용한다면 데이터가 내 생각과 맞지 않는 결과를 표현할 수도 있다. 이 부분을 유의하면서 오늘도 기본기를 공부한다.

 

추가적으로 Vue를 시작할 때 도움이 될 만한 기본 동작 방식, 라이브러리등은 내용을 정리해서 다시 올려야 할거 같다.

(앞단 작업을 안 하니 맨날 까먹음ㅋ...)