[Frontend] Vue.js 입문 및 환경 설정

실무에서 주로 Java Spring Boot Framework를 활용하여 Backend 개발을 진행하지만 JS를 활용한 Frontend 개발 또한 진행 하곤 한다.

(Webs..)

요즘 많이 쓰이는 Vue.js, React, Angular를 활용하는 것은 아니었지만 Vue의 개발 스킬을 필요로 하는 업무가 생겨 Vue.js에 대한 간단한 실습을 해보고 싶었고 후에 다시 살펴보고자 정리하고자 한다.

 

1. Vue.js?

예전 토이 프로젝트나 학부 시절에 많이 사용했고 그 전 회사에서 운영하던 애플리케이션에서 활용하고 있는 JSP 또는 JQuery 같은 경우 화면의 일부분만 바뀌는 메소드나 동작을 구현 할 수 없고 매번 전체 코드를 다시 읽어 와야 했다. 이는 웹페이지의 느린 속도와 리소스 낭비를 초래 한다.

하지만 최근 웹 프론트엔드 프레임워크나 라이브러리는은 필요한 영역만 부분 로딩 하는 기능을 제공하고자 했고 Vue.js는 Component 기반의 SPA(Single Page Application)를 구축할 수 있게 하는 Framework이다.

 

여기서 컴포넌트 란 화면 웹을 구성하고 있는 메뉴, 버튼, Input Box 등 웹 페이지 내의 UI 요소 및 이를 재사용 가능 하도록 구조화 한 것이고 SPA(Single Page Application)은 해석하면 단일 페이지 애플리케이션으로 하나의 페이지 안에서 필요한 영억 부분만 로딩되는 형태이다.

즉, 필요로 하는 부분(컴포넌트, UI 요소로 부른다.)만 로딩하는 형태이다. 빠른 페이지 변환과 적은 트래픽 양을 사용한다.

 

2. Vue Cli and Install

 Vue Cli는 Vue를 빠르게 개발하고 빌드 그리고 서비스를 런칭할 수 있도록 해주는 툴이다.

터미널을 통해서 텍스 명령어를 입력해서 실행하는 도구를  프로젝트 구조를 자동적으로 세팅해주는 cli를 쓰고자 한다. 

 

Vue Cli 인스톨

npm install -g @vue/cli

npm install -g @vue/cli

 

3. Vue 프로젝트 생성

vue create vuetest // vuetest는 프로젝트 이름

 

Default로는 Vue2, Vue3를 설치할 수 있으며 세번째 추가적인 요소는 다음과 같으며 프로젝트 생성시 같이 설치 할 수 있다.

defult vue2 설치

 

여기서 수정사항(11/30)
추후 실습을 위해서 쓰는 vue-bootstrap이 vue3을 아직 지원하지 않아 vue2로 재설치 했다.

위의 console 명령어에 Successfully create project라고 표시 되었고
Vue-Cli 설치 및 프로젝트 생성까지 모두 완료하였다.

 

 

4. Vue Cli Serve 실행하기

 

Vue Cli 정상적으로 설치되었고 서버가 기동 되었다.

서버 기동 완료 및 Vue 첫화면

 

 

 

여기까지 환경 설정은 마무리 하고 

그 다음 글에는 실제 화면을 구현하는 예제로 진행하고자 한다.

 

끝.