[js/react] 공유하기 기능, 어떤 기술을 써야할까? 1편 - web share api

박지우·2023년 5월 30일
2
post-thumbnail

프로젝트 진행 중 공유하기 기능이 필요했다.

필요 기능: url 링크 복사 & 카카오톡 공유 & 트위터 공유

기술적으로 구현할 수 있는 방법은 크게 두가지이다.
1. Web Share API
2. 모달창으로 자체 구현

1. web share api

mdn 공식문서 보기

OS에 내장되어 있는 공유 매커니즘을 사용해서 텍스트, 링크, 파일 등을 공유할 수 있게 해주는 API이다.
이 API는 HTTPS에서만 작동하며, HTTP에서는 작동하지 않는다.


아이폰에서의 작동 모습

Web share api는 딱 두가지 메서드가 있다!
데이터가 공유 가능한지를 알려주는 것과, 실제로 공유를 하는 것 이렇게 두가지이다.

1-1. navigator.canShare()

mdn 공식문서 보기
첫번째 메서드 canshare이다.
canShare은 공유가 가능하다면 true를 반환한다.
반면 데이터가 공유 불가능하다면 false를 반환한다.

let shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const resultPara = document.querySelector(".result");

if (!navigator.canShare) {
  resultPara.textContent = "navigator.canShare() not supported.";
} else if (navigator.canShare(shareData)) {
  resultPara.textContent =
    "navigator.canShare() supported. We can use navigator.share() to send the data.";
} else {
  resultPara.textContent = "Specified data cannot be shared.";
}

1-2. navigator.share()

실제 공유하기 기능을 사용할 때 필요한 메서드이다.

Parameters

data : 공유할 데이터가 담긴 객체. 아래의 필드들 중 적어도 하나는 명시되어야 한다.
1. url: 공유될 URL을 나타내는 USVString.
2. text: 공유될 본문을 나타내는 USVString.
3. title: 공유될 제목을 나타내는 USVString.

navigator.share({
  title: document.title,
  text: 'Hello World',
  url: 'https://developer.mozilla.org',
}); // share the URL of MDN

대부분의 브라우저에서 지원하지만, 웹뷰 안드로이드에서 지원을 하지 않는다 ....!! (ㅠㅠ)
진행 중인 프로젝트가 소셜을 중심으로 바이럴하는 것이 목적이기에,
인스타, 카카오톡 등에서도 공유하기가 작동해야한다.

공유하기 기능을 사용하기 위한 자바스크립트 코드는 아래와 같다.

const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org",
};

const btn = document.querySelector("button");
const resultPara = document.querySelector(".result");

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = "MDN shared successfully";
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});

위 코드 작동 예시 확인하기

1-3. 장점과 단점

web share api는 mdn 자체 api로, 간단한 코드로 os 기반 기능을 구현할 수 있다는 점이 장점이다.
각 브라우저에 맞추어 팝업이 뜨니, 복잡한 구현 없이 공유 버튼만 있다면 손쉽게 구현할 수 있다.
그러나 단점은 지원하지 않는 브라우저가 있다는 것이다.

2. 모달창으로 자체 구현

위와 같은 한계점으로 우리는 모달창으로 공유하기 기능을 자체 구현하기로 결정했다.

위 처럼 url 복사와, 소셜 공유를 한번에 가지고 있는 모달 창을 띄울 계획이다.

2-1. 카카오톡 공유하기 api

이를 위해서는 카카오톡 공유하기 api를 받아와야 한다.

2-2. 트위터 공유하기 api

트위터 공유하기 api도 받아와야한다.

2-3. 장점과 단점

시간이 오래걸리고 구현이 복잡해진다.
그러나 서비스에 맞게 커스텀해서 사용할 수 있다.

각각은 새로운 게시글로 계속 연재하도록 하겠다!

profile
재밌게 살자 !!

0개의 댓글