파이어족의 경제적 자유 찾기

1. 공유하기 버튼이 위치할 웹페이지를 정합니다. 예) 온라인 이커머스 마켓 웹사이트라면, 상품 상세 페이지에 공유하기 버튼을 만듭니다. 예) 소셜미디어 앱이라면, 개별 포스팅마다 공유하기 버튼을 생성합니다. 2. 공유하기 버튼을 클릭했을 때, 어떤 공유 기능들이 떠야 하는지 결정합니다. 이에 따라 아이콘 모양, 버튼을 누른 직후 발생하는 이벤트가 달라집니다. 1. 공유하기 버튼을 누르자마자 카카오톡 앱이 바로 열리면서 친구에게 메세지를 보내고 싶습니다. 아이콘 버튼을 카카오톡 로고 이미지로 설정합니다. 2. 공유하기 버튼을 눌렀을 때, 카카오톡, 페이스북, URL 복사하기 등 다양한 공유 기능 옵션들이 나왔으면 좋겠습니다. 앱 중간이나 하단에 새로운 팝업 창이 떠야 합니다. 그 팝업 창 안에, 카카오톡..

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

사용 기술 및 라이브러리 리액트 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..