
🔍뷰 라우터(Vue-router)란 싱글 페이지 애플리케이션(SPA) 여러 화면을 하나의 페이지 안에서 제공하면서 화면을 별도로 로딩하지 않는 방식. 뷰 라우터(vue-router) Vue.js에서 SPA 구현 시 사용자 요청 경로에 따라 해당하는 컴포넌트에 매핑하여 렌더링을 결정해주는 플러그인. 뷰 라우터 설치 npm install vue-router //vue router 설치 import Vue from 'vue' import VueRouter from 'vue-router'//main.js 추가 🔍뷰 라우터(Vue-router) 동작 방식 vue 설치 후 폴더 구조를 보면 아래와 같이 html 파일은 index.html 단 하나로 구성되어 있다.(SPA) index.html에서 id로 app을 매..

🤍싱글 페이지 애플리케이션(Single Page Application, SPA)이란? 서버로부터 매번 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션 or 웹 사이트, 단일 페이지로 구성되어 있음. SPA에서 HTML, JS, CSS 등 모든 코드는 하나의 페이지로 불러오거나 적절한 자원들을 동적으로 불러들여 문서에 추가함. -> 사용자의 동작에 응답하는 방식 전통적인 웹 방식 : 새로운 페이지 요청 시마다 정적 리소스가 다운되고 전체 페이지를 다시 랜더링하는 방식을 사용. =>매번 새로고침이 발생되어 사용성이 떨어짐, 변경이 필요없는 부분까지 전체 페이지를 갱신하므로 비효율적임. 🤍SPA 특징 1. 라우팅 사용자가 태스크를 수행하기 위해 어떤..