◆ Vue Router
WebHashHistory와 WebHistory는 Vue.js 애플리케이션에서 라우팅을 관리하는 방식을 나타내는 Vue Router의 두 가지 모드입니다.
◆ WebHashHistory
- 브라우저의 URL 해시(#) 기호를 사용하여 라우팅을 관리하는 방식입니다.
- 해시 기호 이후에 오는 URL 경로는 Vue.js 애플리케이션 내부의 컴포넌트와 매핑됩니다.
- URL에 해시(#) 기호를 사용하기 때문에 검색 엔진은 해당 URL을 하나의 페이지로 인식합니다.
- 검색 엔진에서는 내부의 다른 컴포넌트를 인식하지 못하므로, Vue.js 애플리케이션을 검색 결과에 제대로 노출시키기 어렵습니다.
- 서버에 요청을 보내지 않습니다.
- 장점 : 페이지를 새로 고침하거나 뒤로/앞으로 이동할 때, 브라우저 캐시를 이용하여 빠르게 페이지 전환을 처리할 수 있습니다.
- 단점 : 단점으로는 서버에 요청을 보내서 페이지를 로드하므로, 초기 로딩 속도가 느릴 수 있습니다.
- 루트 주소만 사용 가능한 경우에는 사용할 수 없습니다.
- 보안 정책상 한 페이지만 허용 가능할 때 사용하기에 좋습니다.
◆ WebHistory
- HTML5 히스토리 API를 사용하여 라우팅을 관리하는 방식입니다.
- 이 방식은 URL 경로를 사용하여 라우팅을 처리하므로, 일반적인 웹 사이트와 동일한 URL 구조를 가지게 됩니다.
- 페이지가 각자 다른 주소를 가집니다.
- 이 방식은 서버에 요청을 보내서 페이지를 로드하므로, 서버 측에서도 응답을 처리해야 합니다.
- 서버에서 모든 페이지를 다 개방해야 접속이 가능합니다.
- 장점 : 해시 기호를 사용하지 않기 때문에, URL이 보다 깔끔하게 보입니다.
- 장점 : 검색엔진 최적화(SEO)이 가능합니다.
- 단점 : Github Page와 같이 루트 주소만 사용 가능한 경우 불가능한 방식
◆ VueJS_npm 설치 파일 확인 방법
1) VSCOde의 설치한 프로젝트로 가기.
2) package.jsom 파일의 "main"에서 설치한 파일명과 버전을 확인.
3) 프로젝트의 node_modules폴더에서 설치한 파일폴더명 확인.
◆ VueJS_npm 사용법
아래 사이트에서 설치할 라이브러리 또는 패키지를 검색
https://www.npmjs.com/
//vue-cli 폴더로 이동
cd vue-cli
//demo02 폴더로 이동
cd demo02// demo02에서 electron-builder 설치하기
// npm install 명령을 대신 생성
vue add electron-builder
13.0.0버전을 선택하여 설치
// 데스크탑 어플리케이션에서 실행하는 코드
npm run electron:serve
에러가 발생
// 에러 문제 해결을 위한 코드
set NODE_OPTIONS=--openssl-legacy-provider
npm run electron:build
//설치가 정상적으로 될 경우 프로젝트내에 dist_electron 파일이 생성됨//npm 서버 실행
npm run serve
//demo02 폴더에서 vue-router 설치 실행
npm install vue-router
package.json 파일에서 "vue-router": "^4.1.6" 을 통해 다운로드 되었는지 확인
//bootstrap 설치
npm i bootstrap
정상적으로 설치가 되면 package.json 파일의 코드가 생성됨, node_modules 폴더의 bootstrap 폴더가 생성됨.
//bootswatch 설치
npm i bootswatch라이브러리 사이트 https://bootswatch.com/
Themes 클릭
// cmd에서 서버 작업 종료 단축키
ctrl + c//포트 변경 코드
npm run serve -- --port=3000
//axios 설치하기
npm install axios
//vuex 설치
npm install vuex
//vue-spinner 설치
npm i vue-spinnerhttps://www.npmjs.com/package/vue-spinner
위 사이트에서 Live demo 클릭 시 로딩 스피너 라이브러리 소개
