본문 바로가기

FrontEnd

 (37)
[ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js ) html로 작성된 특정 영역을 클립보드에 이미지로 복사해야 하는 상황에 사용! html2canvas 설치 // Install NPM npm install --save html2canvas // Install Yarn yarn add html2canvas https://html2canvas.hertzen.com/ html2canvas 사용하기 1. 사용할 페이지에 import 하기 import html2canvas from "html2canvas" 2. 캡쳐할 html 가장 바깥쪽 element 에 ref 지정 .. 3. canvas를 캡쳐하는 이벤트를 실행할 버튼을 만든다 ( 필요에 따라 해당하는 이벤트를 만들면된당 ) 4. copyChartImg 메소드 작성 copyChartImg() { html2ca..
[ Git ] stash로 임시저장하기 + 특정 파일만 임시 저장하기 git stash 현재 stage에 있는 파일들을 임시적으로 저장 해 둘 수 있다. stash 관련 명령어 저장하기 git stash 저장하기 - save git stash save "description" description 추가 ex) git stash save '설명추가' 목록보기 - list git stash list 적용하기 1 - apply 적용 후에도 리스트에 유지 git stash apply 가장 최근의 stash내용이 적용된다 git stash apply stash@{숫자} 원하는 저장이력 적용 ex) git stash apply 2 적용하기 2 - pop 적용 후 리스트에서 삭제 git stash pop 가장 최근의 stash내용이 적용되고 삭제된다 git stash pop stash..
[IOS Safari] 아이폰 사파리에서 vh로 생기는 스크롤 해결하기 홈페이지 수정을하고 모바일에서 테스트 하다가 발견한것 100vh를 줬는데 PC에서 모바일 사이즈로 테스트 할땐 문제없이 잘 나오더니 모바일(사파리) 에서 켰더니 쓸데없는 스크롤이 생겨버린것!! 검색하다보니 아이폰 사파리 vh때문인데 아까운 내시간... 왜 매번 아이폰에서만 자꾸 이런일이 일어나지.......??? vh = viewheight 1vh는 현재 화면을 보고있는 디바이스 높이값의 100분의 1의이고, height를 100vh로 지정하면 현재 보이는 화면을 꽉 채운 값을 보여준다 스크롤이 생긴 이유 어쨋든 문제가 뭐냐면 보통 vh라고 하면 상단바, 하단바를 제외한 화면자체 사이즈를 생각하는데, 모바일 사파리는 vh를 진짜 말그대로 화면 사이즈 아래사진의 네모(상단바, 하단바) 영역까지 다 포함한 ..
배포시 console 안보이게 하기 ( with . Vue.js ) 개발하면서 console찍어가면서 값 확인하고, 테스트 하고 삭제 하는 경우는 수두룩하다 특정 console들은 삭제하지 않고 확인용으로 두는 경우들도 있는데, local 환경에서는 아무래도 상관없지만 배포하고 나서 운영에서는 console이 안보이도록 하는 환경을 구축하는 경우를 정리했다. transform-remove-console 사용 1. transform-remove-console 설치 npm install babel-plugin-transform-remove-console --save-dev 2. package.json script > build > --mode production 추가 { "scripts": { "serve": "vue-cli-service serve", "build": "v..
[ IOS ] 핸드폰 문자 인증번호 자동완성 시키기 ( Autofill ) + 자동완성 가능한 문자형태 오늘은 회원가입시 sms로 문자 인증하는 부분 구현하다가 문자 자동완성이 안되는 이유로 검색하다 알게된 부분을 정리해 보고자 한다.😇 1. input에 autocomplete속성 추가 문자 자동완성을 사용하는 방법은 간단한데, input에 autocomplete속성을 추가해 주면 된다. 문자 인증을 하는 경우에는 autocomplete="one-time-code" 를 추가해주면 된다 ! // 예제 mdn을 참고하자면 one-time-code 사용자를 인증할 때 사용하는 1회성 코드. 더 많은 autocomplate의 value들은 여기로 → https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/autocomplete 2. Autofill을 위한 인증 문자..
[M1 MAC] CryptoJS 설치하기 ( M1 미지원 라이브러리 cdn으로 사용하기) 핸드폰 번호를 입력받고 SMS로 난수를 발송하고 인증을 하는 과정 구현중, CryptoJS 라이브러리를 사용하여 전송한 난수를 암복호화 하는 과정을 정리해봅니다 CryptoJs 설치 npm install --save crypto-js 근데 m1은 설치에서 오류가 지원 안되는 환경이라고 하더라... 그래서 cdn으로 사용하기로 ..!!! CryptoJs Cdn으로 사용하기 index.html에 cdn link 삽입 cnd 참고 cdnjs.com/libraries/crypto-js // index.html 예제 코드 cdn으로 적용하고 사용한 코드이므로 , npm으로 설치한 경우에는 CryptoJs를 import 하고 window 지우고 사용 aes를 사용한 암호화 // 암호화 const encrypt = ..
[M1 MAC] homebrew 설치하기 ( zsh: command not found 오류 해결 ) 새로 m1맥북이 생겨서 개발 환경 세팅 중 homeberw 설치부터 오류가나서 반나절을 다 날려먹으면서 찾게 된 설치 방법을 정리하려고한다. homebrew Mac에서 소프트웨어 패키지를 쉽게 설치하고 관리할수 있도록하는 패키지 매니저로, shell으로 한줄 명령어로 간단하게 설치, 제거, 버전 관리 등이 가능하게 해준다. 기존에 하던대로 homebrew 공식 사이트에 들어가 아래의 소스를 복사해서 터미널에 붙여넣었더니 zsh: command not found 위와 같은 에러를 만나버렸다. 이 에러는 아래와 같은 경우에 나오는 에러라고 하는데 - 시스템에서 명령을 사용할 수 없습니다. - 검색 경로에 명령 디렉토리가 없습니다. 아마 시스템에서 명령을 사용할 수 없어서 그런것 아닐까 싶다. 그래서 찾다가 ..
yarn 설치 오류 : Git must be installed and in your PATH! Git must be installed and in your PATH! homebrew로 yarn을 설치하는데 발생한 오류 이유를 찾자니 명확한 이유는 찾을 수 없어서 해결 방법만 적어두겠다😞 해결 xcode-select --install ✔︎참고 minooya.blogspot.com/2018/12/mac-brew.html
[ Git ] Git을 단축어로 사용 ! alias 정리 ( with. fzf , tig ) alias 설정하기 alias는 git의 명령어들을 단축어로 설정해서 사용하는 기능인데, 예를 들면 아래와 같이 git checkout master를 git ch master 의 형태로 짧은 단축어로 줄여서 사용하는 기능이다. 1 commands로 설정 하나씩 추가 하기 > git config --global alias.ch checkout 2 .gitconfig파일에 설정 한번에 여러개 추가하기 > vi ~/.gitconfig .gitconfig 파일 [alias] > 이 위치에 원하는 단축어들을 넣어서 사용 fzf로 더 편한 add , checkout 하기 fzf는 터미널을 더 편하게 사용할 수 있게 도와주는데, 지금은 더 편한 add , checkout하는 방법을 정리했다 1 fzf 설치하기 hom..
아이폰 input , select 확대 기능 없애기 IOS 모바일 에서 input selectbox을 누르면 자동으로 그쪽에 확대가 되는 문제를 발견했다. 검색해 보니 font-size가 16 이하이면 focus된 input으로 자동으로 확대가되는 기능인데 그 기능을 빼야한다고해서 제거 하는 법을 찾았다. 문제 상황 1 제일 쉬운 방법 font-size 키우기 input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], ..

티스토리툴바