Vue.js에 대해 알아보자

2020. 07. 29 | 블로그

안녕하세요 디딤365입니다.

이번 포스팅에서는 사용자 인터페이스를 만들기 위한 Vue.js에 대해 알아보겠습니다.

Vue.js가 무엇인가요?

Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는데 있다.

Vue.js는 구글에서 일하던 직원이 앵귤러를 더 가볍게 쓰고 싶어서 만든 프론트엔드 프레임워크입니다. 구글 트렌드로 Vue.js를 검색한 결과, 지난 5년간 사용자들의 검색이 꾸준히 증가했음을 확인할 수 있습니다.

Vue.js의 특징

1. Vue.js는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다. 화면의 요소가 변경되거나 조작이 일어날 때(예: 클릭) 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 합니다.

2. 컴포넌트(Component) 기반 프레임워크 입니다. 코드를 재사용하기 쉽도록 컴포넌트를 조합하여 화면을 구성할 수 있습니다.

Vue.js 개발환경

1. 뷰 CLI를 이용하여 쉽게 프로젝트를 구성하기 위해 Node.js를 설치합니다.

https://nodejs.org/ko/

2. 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석하기 위해 Chrome Vue.js devtools를 설치합니다.

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

CRUD 구현으로 Vue.js 이해하기

가. 뷰 CLI로 프로젝트 생성하기

1. 명령 프롬프트(윈도우) 창에 “npm install vue-cli -global”을 입력합니다.

2. 프로젝트를 만들 폴더를 경로로 하여 “vue init webpack-simple“을 입력합니다.

2-1. “npm install”을 입력합니다. (애플리케이션을 구동하기 위한 관련 라이브러리 다운)

2-2. “npm run dev”를 입력하면 http://localhost:8080/ 에서 기본 화면을 확인하실 수 있습니다.

나. 기초 CRUD 코드

1. index.html

뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소를 지정해 주어야 합니다. 여기서는 app이라는 아이디를 가진 div 입니다.

2. App.vue – 최상위(루트) 컴포넌트

* <templete> 화면에 표시할 요소들을 정의합니다. (HTML + 뷰 데이터 바인딩)

Vue.js 문법은 빨간색 밑 줄로 차례대로 설명하겠습니다.

■ v-model : 폼(form)에서 주로 사용되는 속성입니다. 폼에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화합니다. <input>, <select>, <textarea> 태그에만 사용할 수 있습니다.

■ v-on: 화면 요소의 이벤트를 감지하여 처리할 때 사용합니다. *@click = v-on:click 의 약어입니다.

■ v-for : 지정한 뷰 데이터의 개수만큼 해당 HTML 태그를 반복 출력합니다.

■ v-if : 지정한 뷰 데이터 값의 참,거짓 여부에 따라 해당 HTML 태그를 화면에 표시하거나 표시하지 않습니다.

■ v-bind: HTML 태그의 기본 속성과 뷰 데이터 속성을 연결합니다. * :key = v-bind:key의 약어입니다.

<script> – 뷰 컴포넌트의 내용을 정의하는 영역입니다.

■ data: 뷰 데이터를 정의합니다.

■ methods: 화면 로직 제어와 관계된 메서드를 정의합니다. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있습니다.

■ created: data 속성과 methods 속성에 정의된 값에 접근하여 로직을 실행할 수 있습니다.

■ components: 지역 컴포넌트를 등록합니다. 여기서는 외부의 뷰 파일을 import하여 등록합니다.​

Vue.js 참고 사이트 & 문헌

지금까지 Vue.js와 프로젝트 실행 방법 및 Vue.js 문법에 대해 간략하게 소개했습니다. Vue.js에 대한 더 자세한 내용은 공식사이트(https://kr.vuejs.org/v2/guide/)에서 확인 가능합니다.

감사합니다.

참고자료 : 장기효 저, 2018, <Do it! Vue.js 입문>, 이지퍼블리싱

– R&D센터