본문 바로가기

FrontEnd/Vue.js6

[Vue.js] Vue Router 설치 및 설정 Vue.js를 사용하면 싱글 페이지를 구성할 수 있다는 점이 가장 흥미롭다. 기존에 html이나 jsp를 사용해서 프로젝트를 만드는 경우, 보통은 여러개의 페이지를 만들고 컨트롤러 단에서 모든 Request를 받아 해당 페이지를 리턴 시켜주는 형태로 구성을 했다. 이런 경우엔 URL이 변경되는 경우 서버에 매번 요청해야 하기 때문에 페이지 변경에 따라 DOM이 새롭게 갱신되었다. 하지만, 라우터를 사용하게 되면 페이지 이동 시 마다 서버에 요청하여 페이지를 새롭게 갱신(새로고침)하는 것이 아니라 미리 해당 컴포넌트(화면 정보)를 가지고 있다가 페이지 이동 시에 라우터를 통해 화면을 형성하게 된다.(= SPA방식) ( 라우터를 사용하게 되면 화면전환이 아주 매끄럽게 진행된다. ) ### 참고용 vue-ro.. 2021. 11. 11.
[Vue.js] Vue.js 설치, 프로젝트 세팅 https://kr.vuejs.org/v2/guide/installation.html 설치방법 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue.js는 JavaScript 의 프레임 워크 중에 하나로 React, Angular의 장점들을 모아서 만들었다고 한다. React와 Angular를 아직 공부하지 못해서 Vue.js에 어떤 장점들이 모인건지 파악하기는 아직 힘들지만 앞으로 두 가지의 프레임워크를 더 공부하고 나면 판단할 수 있을 거 같다 ! Vue.js 는 도큐먼트가 쉽게 사용할 수 있도록 설명이 잘 되어있는 편이다. [ 설치방법 ] 1. 직접 script 에 추가하는 방법(vue 참조하는 형태) : script에 추가 2. NPM을 사용하는 방법 .. 2021. 11. 9.