[ Vue.js ] Vue.js ( 기본 개념 / 특징 / 설치 ) , 스프링부트( SpringBoot ) 연동

 

---

 

Vue.js

 

•  점진적 프레임워크( 라이브러리 기능 + 프레임워크 기능 )

•  JavaScript 기반의  웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.

•  HTML 구조를 거의 그대로 사용할 수 있도록 만들어졌다. ( 학습에 대한 내용이 상대적으로 쉽다. )

•  데이터의 변화를 라이브러리에서 감지해서 화면에 그려주는 반응형을 지원하는 프레임워크이다.

•  React 와 Angular의 장점들을 가져와 더욱 빠르고 가볍게 만든 프레임워크이다.

 

 

※ 자바스크립트 프레임워크 ?

•  HTML , CSS를 포함한 웹 관련 기능들을 포함하고 있으며, 크게 웹 기능 구현을 위한 기능 모음과

    디자인 스타일에 대한 내용을 함께 담고 있다.

•  자바스크립트 프레임워크를 사용함으로써, 사용할 수 없었던 문법, 입력방식들을 사용 가능하게 되고

    다른 플러그인을 통해 UI 컴포넌트나 스타일, 추가 기능을 불러다 쓰는 것도 강해진다.

 

 

▶  Vue.js의 3가지 구성

 

1) Vuex

•  Vuex는 가상 돔을 관리하기 위한 매니저 역할

•  앱이나 웹을 이루는 개별 요소들의 정보가 변경되는지 확인하고 해당 값들을 업데이트시켜주는 역할

 

2) Vue CLI( Vue Command Line Interface )

•  프로젝트를 자동으로 생성 / 세팅해주는 자동화 역할

•  웹 개발에 사용되는 여러 기능들을 모아둔 웹팩( Webpack )을 자동으로 모아 간단한 몇 번의 클릭만으로

    기본적인 세팅을 해주는 역할

•  NPM을 통해서 동작한다.

 

3) Vue Router

•  Vuex가 돌아다니면서 확인해야 할 V-Dom들을 향해 이동하는 통로의 역할

•  Vuex상에 개별 컴포넌트들을 올려놓고 그걸 Router 통해 간단히 끌어다가 다른 곳에서 반복적으로 사용 가능

 

 

▶  Vue.js 의 특징

 

1) 다른 프레임워크의 장점을 결합

•  Angular의 양방향 데이터 바인딩 => 출력 값과 모델 값이 동기화된다.

•  React의 단방향 데이터 흐름 => 모델 컴포넌트에서 UI 컴포넌트로 데이터가 흘러서 이해와 관리가 쉽다

•  React의 가상 Dom => 필요한 부분만 빠르게 렌더링 한다.

 

2) 컴포넌트 기반의 프레임워크

화면을 여러 개의 작은 단위로 쪼개어 개발

=> 재사용성 증가 / 구현 속도 증가 / 코드 가독성 증가

 

3) 문법이 간편하고 작성하기 쉽다.

 

4) UI 화면단 라이브러리

MVVM 패턴 기반의 View 모델에 해당하는 화면단 라이브러리이다.

용어	설명
뷰(View)	사용자에게 보여지는 화면
돔(DOM)	HTML 문서에 들어가는 요소( 태그, 클래스, 속성 등 )의 정보를 담고있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰( View )에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel)	뷰와 모델의 중간영역 돔 리스너와 데이터바인등을 제공하는 영역

 

 

▶  Vue.js 의 장단점

 

1) 장점

•  배우기 쉽다 ( HTML , CSS , JS만 알고 있어도 사용이 가능하다. )

•  전체 아키텍처를 새롭게 구성할 필요 없이 기존 웹 애플리케이션의 일부 UI만 적용 가능

 

2) 단점

다른 프레임워크보다 생태계가 작다.

 

 

▶  Vue.js + SpringBoot 연동

기존에 진행했던 프로젝트의 Frontend단을 Vue.js 프레임워크를 적용하여 변경하기를 원했기에

Vue.js 와 기존 프로젝트 SpringBoot 연동을 진행하려 한다.

 

 

•   Vue.js 설치를 위해 npm 기반의 설치를 권장하고 있기에, Node.js를 먼저 설치해줘야 한다.

https://nodejs.org/ko/download/

다운로드 | Node.js

 

 

•   Node.js를 설치하게 되면 npm은 자동으로 설치된다.

•   해당사항에 선택해서 설치를 실행해주면 된다.

 

 

 

•  Node.js의 설치가 완료되면 Windows의 명령 프롬프트( cmd )를 켜고 아래 명령어를 입력한다.( Vue.js 설치 )

npm install vue

 

•  Vue CLI 설치를 위해 아래 명령어를 입력한다.

npm install -g @vue/cli

 

•  Vue.js 가 제대로 설치됐는지 확인하기 위해서 vue --version 명령어를 입력한다.

   -  버전이 제대로 뜬다면 설치가 잘 된 것이다.

 

 

 

•  Vue.js를 통해 바꿔줄 프로젝트를 vue create [ 프로젝트명 ] 명령어를 입력해 생성한다.

    -  프로젝트가 위치한 workspace에 생성하였다.

    -  프로젝트가 생성되면, vue.config.js 파일의 내용을 아래와 같이 바꿔준다.

 

 

 

•  Eclipse( 이클립스 )에서 구조를 확인한다.

 

 

 

• 스프링 부트 서버를 실행하고, localhost:8080에서 vue화면이 뜨는 것을 확인한다.