리액트 2

URL 링크 클립보드에 복사하기 기능 만드는 법 | 리액트 링크 복사하기

리액트에서 URL 링크를 클립보드에 복사하는 기능을 구현해 보았다. 현재 페이지의 웹사이트 주소를 복사하고 다른 앱이나 브라우저에서 붙여넣기할 수 있도록 만든 기능이다. 이 기능을 만드는 방법은 여러가지이다. 하지만 이 블로그에서 만드는 방법을 핵심만 요약하면, 아래와 같다. 1. 현재 페이지의 url 주소를 라는 html 태그에 담아둔다. 2. document.execCommand 기능으로 url 주소를 복사한다. 3. 복사하는 내용이 담긴 태그가 사용자에게 보이지 않도록 처리한다. 자세한 방법과 코드는 아래에 설명되어 있다. 1. 준비 과정: 어떤 버튼을 누르면 링크 복사하기 메뉴가 떠야하는지 파악한다. 이 스크린샷은 인스타그램 예시 사진이다. 1번이라고 쓰여져있는 상단 우측 버튼을 누르면, 화면 하..

개발 | 코딩 2021.02.26

버튼 아이콘 클릭 가능 영역 넓히기 | 리액트 React, 스타일 컴포넌트 Styled Component, CSS

사용 기술 및 라이브러리 리액트 React 스타일드 컴포넌트 Styled Component 버튼 컴포넌트를 모두 모아두는 buttons.js 파일 현재 상황 각 버튼마다 미리 buttons.js 에서 사이즈를 정의한다. background 설정에서 center/contain 으로 썼고, 아이콘의 너비와 높이를 이미 정한 상태이다. 아래는 buttons.js 파일의 코드 중 일부이다. const shareKakaoButton = css` background: url("${shareKakaoImage}") no-repeat center/contain; width: 34px; height: 34px; ` const shareCopyUrlButton= css` background: url("${shareCopy..

개발 | 코딩 2021.02.09