Vue.js5 PDF 다운로드 기능 구현(html2pdf.js) 회사 웹사이트에서 특정영역을 pdf 파일로 다운로드가 필요하여 라이브러리를 찾아보게 되었고 html2pdf.js와 vue-html2pdf가 있었다. > vue-html2pdf "vue html to pdf" 라고 구글에 검색하면 가장 먼저 나오고 사용량이 가장 많은 vue-html2pdf은 html2pdf.js를 vue 컴포넌트 형식으로 제공한다. 기존 html2pdf.js와 다르게 미리보기 창을 띄워주는 preview-modal 옵션처럼 장점이 있는 반면, slot으로 pdf에 들어갈 내용을 넣어야 하는데 slot안에 내용이 있는 태그들을 넣게 되면 해당 태그들은 웹에서 보여지지 않기 때문에 같은 내용을 한번 더 써줘야 하는 번거로움이 생긴다. 단시간에 단순구조로 pdf를 다운로드 할 수 있도록 하는 .. 2022. 12. 15. 딥셀렉터(v-deep) 설정하는 방법 > 자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 된다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데, 그 컴포넌트에 내가 원하는대로 CSS를 적용해서 스타일을 변경하고 싶으나 그게 쉽지 않은 경우가 발생한다. > 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유 웹 컴포넌트의 중요한 측면인 "스타일 캡슐화" 때문이라고 한다. 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이다. 그래서 Vue컴포넌트에서 scoped를 지정하게 되면 자식 컴포넌트에.. 2022. 12. 13. v-if와 v-show의 차이점과 사용 방법 > VueJS에서 엘리먼트, 컴포넌트 등을 숨기는 방법은? 일반적으로 v-if 와 v-show를 사용한다. > v-if와 v-show의 차이점은? 가장 큰 차이점은 실제 DOM을 그려주느냐의 여부에 따라 차이가 있다! 조건에 만족하지 않을 경우 v-if는 DOM 영역에 실제로 그려주지 않는() 방법을 사용하는 반면, v-show는 단지 css style의 display: none을 사용하여 보여주지만 않는다는 차이가 있다 이런 이유로 보여주거나 숨기는 액션이 반복되야 한다면 v-show를 사용하고 그 외의 경우는 v-if를 사용하는 방법이 성능에 더 좋을 것 같다. v-if(v-else-if, v-else) 조건에 만족하면 Rendering 되지만 조건의 만족하지 않으면 DOM 레벨에서 제거되며, 모든 .. 2022. 11. 23. 구글 애널리틱스 적용하기 1편(vue-gtag) > 구글 애널리틱스 적용 Vue.js 를 통해서 SPA의 형태로 만든 회사 사이트에 구글 애널리틱스를 적용하게 되었다. 온클릭 등의 이벤트가 발생할 일이 없는 단일 페이지이거나, 웹 페이지 진입 여부만 체크하면 되는 경우라면 public/index.html에 아래와 같은 Google Analytics에서 제공하는 임베디드 코드를 바로 넣어도 큰 상관은 없다. 그러나 여러 컴포넌트와 페이지, 그리고 이벤트들이 존재하는 경우에는 임베디드 코드를 붙여넣는 것만으로는 부족해서 Vue.js를 위한 Google Analytics 패키지가 몇가지 존재한다. (vue-analytics, vue-gtag) > vue-analytics 지원 종료 구글측에서도 Google Analytics를 단순 분석/트래킹용 (analy.. 2022. 10. 20. Vue 초기 세팅 > Vue DevTools 크롬 Vue devtools 설치 (디버깅 편리) > CLI Vue CLI 홈페이지를 참조하자 Vue.js 개발을 위한 표준 툴 Vue 프로젝트를 손쉽게 만들 수 있도록 도와주는 커맨드라인 도구. 프로젝트를 Git clone 받은 후 $yarn global add @vue/cli (3버전) // vue CLI 설치 $vue --version // 버전 확인 $yarn (=npm Install) $yarn serve (=npm start) > Vue Extensions vscode에서 설치한다. view-in-browser : html 파일을 기본 브라우저로 볼 수 있도록 한다. vetur : Vuew.js 작업시 편리한 기능들을 제공. (코드 자동완성, 디버깅, 하이라이팅 등).. 2021. 8. 8. 이전 1 다음
