Iris project 👀 Front end using Vue.js

홍채인식 기반 부정행위 감지기능

대표적인 프론트엔드 개발 프레임워크 3가지 React, Angular, Vue 중 Vue를 사용할 예정
∵재사용성이 높고 직관적이며 배우기 쉬움. Angular의 장점(양방향 데이터바인딩)과 React의 장점(Virtual Dom)을 모두 갖고있음

Node.js : 확장성 있는 네트워크 애플리케이션(서버 프로그램) 개발을 자바스크립트로 구현할 수 있도록하는 자바스크립트 런타임 환경. 원래 자바스크립트는 클라이언트에서 동작하는 언어이지만 Node.js는 chrome의 V8엔진을 이용하여 브라우저에서 자바스크립트가 동작하듯이 서버에서 자바스크립트를 동작할 수 있도록 해줌.

Vue로 클라이언트 프로그램을 개발하기 위해 설치하는 라이브러리 패키지를 빠르게 설치하고 적용하기 위해 Node.js를 설치해야함

NPM(Node Package Manager) : Node.js 기반의 자바스크립트 오픈소스를 등록하고 간단한 명령어를 통해 설치하여 사용할 수 있도록 해주는 패키지 매니저. Vue를 사용해서 개발할 때 사용할 수 있는 자바스크립트 오픈소스 라이브러리들이 등록되어있어서 프로젝트에 쉽게 적용할 수 있음.

라우팅 : 클라이언트에서 url 주소에 따라 페이지가 전환되는 것. Bue와 같은 단일 페이지 애플리케이션의 경우 페이지를 이동할 때마다 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용하여 화면을 갱신한다.

Vue는 vue에서 제공하는 공식 플러그인인 vue-router를 이용하여 라우팅을 구현한다.
Vue 프로젝트 내부에서 미리 url 주소를 정의하고 각 주소마다 Vue 페이지를 연결해놓는다. 사용자가 메뉴를 클릭하거나 브라우저 주소를 직접 갱신했을 때 미리 정의된 url 주소에 해당하는 Vue 페이지로 화면을 전환한다.

router-link to=" " 에 주소를 지정
이 주소들은 index.js 파일에 routes 배열에 등록되어있다.

path: 브라우저에 접속하는 url 주소를 정의
component: 지정된 path로 들어왔을 때 보여줄 vue 컴포넌트, 앞으로 구현할 vue 파일을 연결하고 해당 파일을 실행한다.

다음과 같이 vue 파일을 import하고 routes 안에 특정 path와 맵핑해주면 사용자가 접속하는 브라우저 url 주소에 따라 원하는 vue 파일을 보여줄 수 있다.

Lazy Load : 리소스를 컴포넌트 단위로 분리하여 컴포넌트 혹은 라우터 단위로 필요한 것들만 그때 그때 다운받을 수 있게 하는 방법. Lazy Load를 사용하기 위해서는 내부적으로 Vue CLI의 prefetch 기능이 제공되어야한다. prefetch 기능은 미래에 사용될 수 있는 리소스를 캐시에 저장하여 사용자가 접속했을 때 굉장히 빠르게 리소스를 내려주는 것이다. 하지만 prefetch 기능은 request 요청수가 많아지게 하므로 정말 필요한 컴포넌트에 대해서만 prefetch 기능을 사용하는 것이 좋다.

snippet : 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 부럴와서 바로 사용할 수 있는 기능
Code → Preferences → User Snippets
vue(Vue) 클릭 후 vue.json에 작성

한번 등록하면 이런 식으로 편하게 사용할 수 있다.

Vue 컴포넌트 개발 시 각 라이프사이클 훅에 따라 프로그램을 적절히 배치하면 화면 로딩 시간을 개선할 수 있다. 사용자가 특정 화면에 접속했을 때 화면에서 제일 먼저 보여줘야 하는 데이터 영역의 경우는 created()에 정의해서 서버로부터 미리 받아오고, 화면 로딩 이후에 삽입되어도 되는 데이터 혹은 HTML 객체 부분은 mounted() 훅에 정의함으로써 데이터와 HTML 부분을 로딩하는 타이밍을 적절히 분배하는 것이다. 이렇게 함으로써 사용자가 느끼는 화면 로딩 속도를 개선할 수 있다.