[React] 트러블 슈팅 정리 #3

WWWWWWWWW·2023년 10월 13일

🔥 intro

프로젝트를 진행하며 마주했던 문제 상황과 해결 과정들을 상세하게 정리하고 후에 같은 문제가 발생 했을 경우 빠르게 문제 해결을 하기 위해 트러블 슈팅을 정리하려고 합니다.
과정은 크게 문제 상황 발생 / 원인 추론 / 해결 방안 / 결과 확인 / 문서 정리 순으로 트러블 슈팅을 정리할 예정입니다.
기록하는 습관을 기르기 위해 열심히 작성해보겠습니다.

🚀 Trouble-Shooting

이번에 진행한 프로젝트는 문해력 향상을 목표로 하는 플랫폼이다. 사용자들이 여러 게시글을 작성하고, 해당 게시글들을 다양한 그룹 및 모임과 공유함으로써, 여러 사용자들과 의견을 나누고, 풍부한 토론을 펼칠 수 있는 공간을 제공하는 것이 주 목표다.

문제가 발생한 공유하기 기능은 사용자들이 자신의 글을 넓은 범위의 사람들과 나누며, 다양한 의견과 피드백을 받을 수 있게 만드는 중요한 기능이다.

마감이 있는 프로젝트를 진행하다보니 일단 로컬에서의 복사가 가능하게 코드를 작성한 후 우선 순위 위주로 개발을 진행하였다. 결국.. 이 부분은 코드를 수정하지 못하고 프로젝트가 종료되었다!
하지만 이 게시글 공유라는 부분은 꼭 필요한 부분이라 생각해서 문제를 해결해보려고 한다.

1. 문제 상황 발생

로컬에서는 기능이 작동이 잘되는 데 배포 사이트에서는 작동하지 않는다..

2. 원인 추론

1. 브라우저에서 navigator.clipboard.writeText()를 지원하는지 확인했는데 지원하고 있는 것으로 확인했다.

WriteText() 메서드 mdn 참고 링크

navigator.clipboard.writeText() 는 주로 브라우저에서 실행되는 JavaScript 코드로, 모던 브라우저에서 제공하는 웹 API로서 HTTPS 연결에서만 작동 하며 페이지에서 사용자와의 상호작용(예: 버튼 클릭)이 발생했을 때만 호출할 수 있다고 설명하고 있다.

http를 사용하고 있어 보안상의 문제가 발생하여 안되는건지 확인..!

보안상의 이유로 공유하기 버튼이 작동안하는 것인지 확인이 먼저 필요했는데 배포를 다른 팀원이 담당하여 AWS 아이디를 알 수 없다.. 다른 방식으로 확인이 가능한지 찾아보고 정말 해결이 안된다면 연락을 해보는 것으로..
라이브 러리 사용?!

3. 해결 방안

구글에 여러 글을 검색해보니 clipboard.js 라는 라이브러리를 통해 공유하기 기능을 사용할 수 있다고 한다.

clipboard.js는 특정 요소를 클릭했을 때 클립보드에 복사하게 해주는 스크립트

리액트와 타입스크립트를 사용중이므로 clipboard와 타입정의를 위한 패키지 설치!

npm install clipboard

npm install @types/clipboard

const GroupBoardDetail: React.FC = () => { //타입스크립트로 함수형 컴포넌트 라는것을 정의
  
  
//	useRef를 사용하여 ClipboardJS의 버튼에 접근하기 위해 사용
  const btnRef = useRef<HTMLButtonElement>(null);

  const handleShareBtn = () => {
    const url = window.location.href; //현재창의 url 변수를 저장
    
// 타입스크립트에서 !사용은 변수가 null,undefined가 아니라고 확신할 때 사용
    const clipboard = new ClipboardJS(btnRef.current!, {

//트리거(방아쇠):이벤트에 반응해 자동으로 실행되는 작업 (삽입,삭제,업데이트 등)
// 클립보드에 복사될 텍스트를 반환하는 함수입니다.(ClipboardJS 사용법)
      text: function(trigger) {
        return url;
      }
    });
 
  // 복사 성공
    clipboard.on('success', function(e) {
      alert('현재 게시글이 복사되었습니다!');
      e.clearSelection();
      clipboard.destroy();
    });
 // 복사 실패
    clipboard.on('error', function(e) {
      console.error('URL 복사에 실패했습니다!', e);
      clipboard.destroy();
    });

    btnRef.current!.click();
  };

  return (
    <button ref={btnRef} onClick={handleShareBtn}>복사하기</button>
  );
};

export default GroupBoardDetail;