# clipboard
웹 링크 SNS 공유하기
웹에서 현재 링크를 SNS에 공유하는 기능을 요청 받았다. 처음에 요청 받은 건 기본 링크 복사, 카카오톡 공유, 그리고 인스타그램 공유였는데, 인스타그램은 공유 기능을 web api로는 제공하지 않는 듯하여 일단은 트위터 공유로 수정하기로 하였다. > "next": "13.4.5" 사용 링크 복사 링크 복사는 가장 간단하다. navigator 의 clipboard를 활용하면 된다. 카카오톡 공유 카카오톡 공유의 경우 kakao developers 사이트에 가입하여 어플을 만든 뒤, sdk key를 가져와야 한다. 
[Flutter] 클립보드(ClipBoard) 에 글 복사하기
때로는 글을 복사해야 할 때가 있다. 아래 과정을 따라하자. 이후 원하는 이벤트에서 아래 함수를 부른다. 그런데 이게 비동기로 처리될 필요가 있을 수 있다. 그렇다면? 아래처럼.
Safari - Clipboard 이슈
IE가 없어지더니 Safari가 문제다 🤬🤬🤬🤬 비동기로직을 통해 클립보드에 복사할 상황이 생겨 개발하던 도중 겪은 이슈이다. 비동기 객체를 복사하기 단순히 텍스트를 복사할 때는 Clipboard api를 사용하면 브라우저에 관계없이 쉽게 복사가 가능하다. 그러나 구현해야하는 기능이 비동기로 받아오는 값을 복사해야 했다. 크롬은 문제없이 잘되었지만 Safari 에서 이슈가 발생했다. 비동기 로직없이 복사하기 비동기로 text를 가져오는 것이 아닌 그냥 dom의 text를 복사하고 싶을때에는 위의 코드도 잘 동작한다. 비동기 로직있을때 복사하기 그러나 비동기로 객체를 복사해야 할때 같은 코드의 경우 사파리에서 동작을 하지 않는다. 이렇게 처리할 경우 사파리는 동작
react 클립보드에 저장한 이미지를 텍스트로 변환하기 (tesseract.js)
https://github.com/heehminh/react-image-to-text 수학 학원에서 아르바이트를 하는데 시험지를 보고 타자로 쳐 문서화하는 일이 주된 작업이다. 직접 치고 있는게 비효율적이라고 여겨 해당 서비스를 만들게되었다. 1. 클립보드에서 이미지 추출하기 클립보드에서 이미지를 추출하기 위해서는 브라우저에서 제공하는 Clipboard API를 사용할 수 있다. 이 API를 사용하여 클립보드에서 이미지를 추출한 후, 추출된 이미지를 사용하여 텍스트를 추출하는 OCR(광학 문자 인식) 기술을 이용할 수 있다. 클립보드에 데이터를 복사하는 방법 클립보드에서 데이터를 가져오는 방법 이 이미지를 클립보드에 저장한 뒤 수
클립보드에 특정 텍스트 복사하기
기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했다. 그러나 execCommand 메서드는 Deprecated 되었으며, 대안으로 훨씬 쉽고 강력한 Clipboard API 가 나왔다. window.navigator.clipboard.writeText() 메서드를 사용하면, 아주 쉽게 텍스트를 클립보드에 복사해둘 수 있다. 너무나 쉽고 좋아서 정리해두지 않을 수 없다. 1. 텍스트 복사 navigator.clipboard.writeText("복사할 텍스트") 호출하면 끝! 비동기로 복사를 수행하고 Promise 를 반환하므로, 복사가 완료되었을 때 수행할 작업을 then의 콜백함수로 넘어주면 된다. 이런 방식으로 URL 복사/공유 기능을 아주 쉽게 구현할 수 있을 것 같다. 2. HTML 엘리먼트의 내용 복사 **i
2023.01.24
공유하기 window.navigator.share 를 사용하면된다. 단 https 위에서만 동작한다. 클립보드 복사하기 window.navigator.clipboard.writeText 를 사용하면된다. localhost를 제외하고 https 위에서만 동작한다. SVG to JSX svg 파일을 JSX 컴포넌트로 쉽게 변환해준다. https://svg2jsx.com/ 최적화가 되는지는 모르겠다. 최적화는 svgr 를 활용하면 된다고한다.
[React] Clipboard API를 이용한 클립보드 복사 기능 구현하기
학교에서 Together 라는 프로젝트를 진행하던 중 초대 코드를 클립보드에 복사하여 공유할 수 있도록 하는 기능이 필요했다! 평소 다른 서비스에서는 굉장히 많이 쓰는 기능 중 하나지만 직접 구현해보는건 처음이였다. 다른 프로젝트에도 사용할 수 있기 때문에 Clipboard API 사용법을 정리한다. Clipboard API란? Clipboard API는 웹 브라우저에서 클립보드에 텍스트를 저장하게 해주는 API이다. document.execCommand()라는 함수도 클립보드에 텍스트를 저장할 수 있지만 2022년 06월을 기준으로 웹 표준에서 Deprecated 되었기 때문에 사용하지 않기로 했다. Clipboartd API는 IE를 지
초대 링크 만들기 (1)
개요 구현한 것 gif 이전 포스팅에서 AWS lambda와 api gateway를 이용해 rest api를 만들었습니다. 이번에는 해당 api를 바탕으로 초대 링크 생성 및 해당 링크를 입력하였을 때 리다이렉션 되도록 설정해보겠습니다. 구현 Invite.tsx 
[React] 문자열 클립보드 복사 기능 구현 ( copy to clipboard )
0. 들어가며 사이드 프로젝트를 진행하던 중, URL 복사하기 버튼을 만들어야 되는 상황이 생겼습니다. 요즘 대부분 서비스에서 사용성을 위해 버튼을 누르면 특정 텍스트가 클립보드로 복사 되는 기능을 지원합니다. 기능 구현을 위해 구글링을 하던 중 괜찮은 방법을 찾아서 글로 작성해봅니다. 클립보드 붙여넣기를 구현하는 방법은 document.execCommand() 와 Clipboard API 가 있는데 각각 알아보겠습니다. 1. document.execCommand() 를 이용한 클립보드 복사 (Deprecated) 들어가기에 앞서, 두둥 해당 함수는 2022년 06월을 기준으로 웹 표준에서 Deprecated 되
크롬 익스텐션 컴포넌트끼리 통신하는 방법 - 개발기
매주 깃허브 이슈를 복사해서 일정한 형식으로 붙여넣는 노가다 작업을 하게 되었다. 이슈가 5개를 넘어갈 때 즈음.. 왜 이걸 내가 직접 하고 있지? 라는 생각이 들었다. Copy Machine 개발 기간: 2일 copy machine 하는 일은 간단하다. 사용자는 깃허브 issue 페이지에 들어가서 익스텐션을 켠다. 그 페이지에 있는 이슈를 긁어서 일정한 포맷으로 만들어 보여준다. 이제 이슈 개수 * 2 (이슈 링크와 이름) 번 복붙하던걸 1번만 복붙해도 된다. 크롬 익스텐션 컴포넌트 구성 ba
js Clipboard API 사용 하여 서식 유지 복사 만들기
대부분 복사 기능을 만들때 execCommand를 자주 사용 하였을 것이다. 하지만 사용하다보면 아래와 같은 로그를 확인하게된다. 아래와 같이 사용은 가능 하지만 더 이상 사용은 권장 하지않는다는 내용이다. 이를 보완하기 위해 나온것이 Clipboard API로 대체하여 사용이 가능하다. 일반적인 카피 문법은 아래와 같이 사용하거나 async await을 사용 하기도 한다. 하지만 이처럼 복사기능을 만들게 되면 오로지 텍스트만 복제 되는 문제 가있기 때문에 링크
[TIL] 220419
정규표현식 대표문자(Meta sequence) 숫자 대표문자 > ** > - 숫자를 대표하는 정규 표현식 > - d는 digit을 뜻한다 글자 대표문자 >** > - 글자를 대표하는 정규표현식 > - 와 같은 문자와 숫자를 포함 > - 특수문자는 포함하지 않지만 는 포함한다. 횟수 정하기(Quantifier) 하나 이상 > ** > - 하나 혹은 그 이상 연결된이라는 뜻 > ex) : 하나 혹은 그 이상 연결된 숫자를 의미함 0개 이상 > ** > - 0개이상이라는 뜻 > ex) : 숫자가 0개 이상이다, : 자연수 구하기 있거나 없거나?(1) >** > - 있거나 없거나라는 뜻 > - ex) : '-'가 있거나 없다, : '-'가 포함된 숫자(전화번호) 찾는 정규식 있거나
ClipBoard에 복사하기
ClipBoardManager 전역 클립보드에 텍스트를 배치하고 검색하기 위한 클립보드 서비스에 대한 인터페이스이다. ClipboardManager API 자체는 매우 간단하다. 현재 기본 클립보드 데이터를 가져오고 설정하는 메서드로 구성되어있다. ClipData해당 데이터는 응용 프로그램 간의 데이터 교환을 위한 프로토콜을 정의 하는 개체로 표현된다. ClipData에 대한 자세한 설명은 해당 문서에 작성되어있다. https://developer.android.com/guide/topics/text/copy-paste 속성 ClipboardManager.OnPrimaryClipChangedListener clipboard의 클립이 변경될 때 호출되는 리스너 콜백을 정의할 수 있다. clearPrimaryClip() -
[Windows] WSL 2 vim clipboard 동기화
 WSL 2 의 vim 의 yank 내용을 Windows 의 clipboard 로 가져오려면 아래의 설정을 vim conf 파일 내에 기입한다: 출처 [사이트] https://hidekuma.github.io/vim/wsl/synchronize-system-clipboard-vim-on-WSL/
클립보드 복사하기를 만들어보자
매치히어에는 스터디, 프로젝트를 비공개로 모집할 수 있다. 비공개 처리를 하면, 일반 유저의 목록에는 보이지 않기에 초대 링크를 통해 접근할 수 있는데, 초대 링크를 페이지에 그대로 노출하는 것 보다는 "링크 복사하기" 버튼을 만들어 클릭하면 클립보드에 복사될 수 있도록 하면 좋을 것 같아 구현하였다. > Vue 3를 통해 구현하였지만, 방식 자체는 어디에나 적용될 수 있다. 필요 내용 `` DOM 요소 컨트롤 document.execCommand() clipboard API 구현 방법 [소스코드](https://codesandbox.io/s/naughty-bardeen
React에서 Clipboard API 사용하기 (이미지 복사하기)
Clipboard API를 사용하면 간단하게 blob 형태의 이미지 파일을 복사할 수 있다. https://developer.mozilla.org/ko/docs/Web/API/Clipboard 여기서 write라는 메소드를 사용할 필요가 있었다. 그런데 일반 js에서는 되는 메소드가 React 에서는 되지 않았다. 찾을 수 없는 메소드라며 에러를 내뿜었다. 그리고 ClipboardItem 생성자 또한 사용하지 못 했다. eslint에서 없는 메소드라며 실행을 막는 것 같았다. 해당 스택오버플로우를 보고 라이브러리를 찾아보았다. 그래서 찾은 것이 이 라이브러리다. clipboard-polyfill은 proimse기
iOS 14 클립보드 접근 알림 대응하기
iOS 14부터는 앱에서 클립보드에 접근하면 알림을 통해 사용자에게 알려주는 기능이 추가되었습니다. (관련 트윗, 관련 링크) iOS 14 업데이트 이후 갑자기 앱에서 이와 같은 알림이 뜨기 시작했습니다. 클립보드에 접근할 일도, 그런 코드를 작성한 적도 없는데 말이죠. 이제 범인을 찾아야 합니다! > 임포스터는 파이어베이스였습니다. iOS 14 발표 이후에 파이어베이스 라이브러리를 업데이트하지 않고 있었다면 확인해보시는 게 좋을 거 같습니다. 정확하게는 7월 14일 업데이트된 [6.28.0 버전](https://firebase.
JavaScript 클립보드 복사 구현하기
많은 사이트에서 버튼을 클릭하면 정해진 텍스트를 클립보드로 카피할 수 있는 기능을 사용하고 있습니다. copy-gif.gif 클립보드에 데이터를 복사하는 방법은 execCommand API 를 사용하거나 ClipboardAPI 를 사용하는 두 가지 방법이 있습니다. ClipboardAPI는 비교적 최신 스펙으로, 아직 지원되지 않는 브라우저가 많습니다. ![image.png](https://images.velog.io/post-images/godori/d353