본문 바로가기

분류 전체보기95

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.
패키지 업데이트하며 발생한 에러 정리 # 패키지 업데이트 (yarn.lock만 변경됨) $yarn upgrade # yarn.lock에서 설치된 버전으로 package.json을 업데이트 $yarn global add syncyarnlock $syncyarnlock -s -k # package.json의 현재 버전 제약 조건으로 yarn.lock을 업데이트 $yarn react-typescript 프로젝트를 패키지 업데이트 이후 여러가지 에러들이 발생하였는데, 해결한 내용들을 정리하였다. 🚫 node_modules/@types/babel__traverse/index.d.ts: ']' expected. 66 | } 67 | > 68 | export type ArrayKeys = keyof { [P in keyof T as T[P] extend.. 2022. 11. 30.
CSS 테두리 선으로 삼각형 화살표 만들기 CSS 트릭을 활용하면 제한적이지만 삼각형 도형을 만들어 활용할 수 있다. 삼각형을 만드는 트릭은 두꺼운 상하좌우의 테두리선(border)을 맞붙여서 삼각형 형태를 만드는 것으로 다음과 같은 원리로 만들어진다. .arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #000; /* ▲ */ } .arrow-down { width: 0; height: 0; border-top: 10px solid #000; /* ▼ */ border-left: 10px solid transparent; border-right: 10px so.. 2022. 11. 24.
s3로 배포했을 경우) root 주소 말고 다른 주소로 들어가서 새로고침시 403 error 뜰때 > 이슈 CloudFront를 거쳐 AWS S3에 static web hosting으로 배포한 회사 웹페이지를 google search console에서 각 라우터마다 URL 테스트를 했을때 아래 이미지와 같은 403 에러가 발생했다. > 원인 처음에는 S3에 "/"로 접근하지 않는 다른 URL을 차단하는 설정이 되어있는 것으로 생각했지만 "/"를 제외한 URL을 막는 설정은 없었다. 구글링을 통해 알게된 사실은 CSR로 하게되면 해당 URL에 파일이 없어서 에러가 나니까 이 때 에러를 "/"로 전달하게 하면 된다는 내용이었다. 우리가 개발하고 있는 Web App에는 Route마다 보여야 하는 페이지가 다를 수 있는데, 만약 /about라는 Route가 존재한다고 하면 현재 상태에서 해당 Route로 접.. 2022. 11. 23.
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.
onChange, onInput 차이 onChange input에서 포커스가 벗어났을 때 input에 입력된 값이 이전과 다르면 onChange event 발생. onInput input에 값이 변경될 때마다 onInput event 발생. 예시 input text가 두 글자 이상일 떄, 버튼 색상이 활성화 된다면? onChange 👉 두 글자를 입력하고 마우스로 다른곳을 클릭했을 때 버튼 색상 변경 onInput 👉 두 글자를 입력하는 순간 버튼 색상 변경 2022. 10. 31.
[Xcode] Thread 1: breakpoint 1.1 (1) > 이슈 Xcode에서 build시 Thread 1: breakpoint 1.1 (1) 에러가 뜨면서 앱 실행이 안되는 경우가 발생힌다. > 해결 CMD+7 누르고 좌측에 생긴 모든 breakpoint들을 삭제해주면 해결! 코드 작성 중에 실수로 더블 클릭하거나 체크를 해주면 breakpoint가 생기게 되고, 코드를 실행했을때 해당 에러가 뜨면서 실행되지 않는 현상이 나타난다. 코딩창의 숫자부분에 파란색 표시가 뜨는데, 플래그 버튼을 선택 해제하면 파란색이 없어지면서 재 build시 해결된다. 2022. 10. 31.
background-image 명도 조절 (linear-gradient) > background-image 어둡게 하기 section { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(${url}); } > #fff to #e8e8e8 section { background-image: linear-gradient( to bottom, #fff, #fff, #fdfdfd 50%, #f0f0f0 85%, #eaeaea, #e8e8e8 ); } > 텍스트 절반 밑줄 긋기 background: linear-gradient( to bottom, #fff 50%, rgb(203, 203, 203, 0.44) 50% ); #cbcbcb + opacity 0.44를 한 줄로 표현하면 rgb(203.. 2022. 10. 27.

티스토리툴바