[TIL]22.04.14 - 클립보드 복사버튼만들기, token decode without library, Chrome videotag autoplay not working

오늘 배운것

클립보드 복사하기 버튼

작업목록 중
바라보고 있는 url을 공유하는 버튼이 필요했고 자바스크립트 navigator객체를 활용했다.

navigator객체 안에는 다양한 프로퍼티가 존재하는데 clipboardApi를 활용하여 복사기능을 구현해봤다.

  const clipboardUrl = window.location.href;
  const copyUrl = () => {
    navigator.clipboard.writeText(clipboardUrl);

    return setSnackOpen(true);
  };

 

https://developer.mozilla.org/ko/docs/Web/API/Clipboard

Clipboard - Web API | MDN

 

 

 

jwt token decode javascript without library

세션에 저장된 토큰에 페이로드정보가 필요했다.

우선 토큰이 어떻게 구성되어있는지 파악해야했다.

https://ko.wikipedia.org/wiki/JSON_%EC%9B%B9_%ED%86%A0%ED%81%B0

https://jwt.io/

JWT.IO

JSON 웹 토큰 - 위키백과, 우리 모두의 백과사전

 

우리가 필요한건 payload데이터 인데, 

여러가지 방법이 존재하지만 다음과 같이 작성했다.

 

let base64Url = token.split('.')[1];
      let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
      let jsonPayload = decodeURIComponent(
        window
          .atob(base64)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          })
          .join('')
      );
      let userId = JSON.parse(jsonPayload)

 

https://stackoverflow.com/questions/38552003/how-to-decode-jwt-token-in-javascript-without-using-a-library

How to decode jwt token in javascript without using a library?

 

Chrome videotag autoplay not working

사파리나 크롬에서는 음소거를 설정하지 않으면 자동재생이 제한되므로 muted를 추가해줘야 한다.

 

https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser

Video auto play is not working in Safari and Chrome desktop browser