페이지에 이미지가 많을 경우 하나의 페이지를 호출할 때 모든 이미지를 호출하도록 한다면 그 페이지는 로딩 속도가 매우 느릴 수 있습니다. cdn으로 호출한다고 해도 용량이 큰 이미지가 많이 호출 될 경우 느릴수있습니다. 그래서 페이지 로딩 시 경량화 이미지 혹은 이미지를 호출하지 않고 이미지가 있는 영역에 갔을 때 로드될 수 있도록 하는 기능이 lazyload 입니다. 설치부터 사용방법까지 작성해봅니다. 1. 설치 npm install vue-lazyload --save 2. 사용방법 - main.js 에 라이브러리 로드 // lazyload 라이브러리 로드 import VueLazyload from 'vue-lazyload'; // vue app 에 VueLazyload 사용 app.use(VueLaz..

vuejs 를 사용하여 github io를 통해 나만의 페이지를 만드려고 합니다. SPA(Single Page Application) 으로 만들 예정입니다. 설치 환경 - Mac OS (Mac Silicon) 1. github 저장소 생성 및 설정 1-1. public 저장소로 생성해야 합니다 (private으로 하면 웹페이지 접근이 불가합니다.) 1-2. 생성 후 해당 저장소로 진입 후 Settings > Pages 로 진입하여 Branch 항목에서 아래와 같이 설정 후 저장해줍니다 2. 로컬에서 vuejs 설치 및 설정하기 2-1. nodejs 설치 : node 홈페이지 접속 후 자신의 os 환경에 맞는 installer 를 다운로드 받아 설치 - 설치가 완료 된 후 node -v 확인하면 아래와 같..

npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/vue-fontawesome@3 # main.js 추가 import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@..