[FE] React 카카오톡 공유 개발

모청을 위해 링크에 og 이미지랑 타이틀등 넣어서 공유할 수도 있지만

카카오톡 공유하기를 통해서 조금더 이쁜 형식으로 남들에게 나누어줄 수 있다.

일반 링크는 링크와 썸네일이 나오는 정도지만 카카오톡 공유는 하나의 프러덕트처럼 보여준다!!

 

오늘은 빠아르게 카카오톡 공유하기 기능을 추가해보자.

앱등록하고 어쩌고.. 해야한다 해서 긴 과정일 줄 알았는데 짧으니 돈워리.

 

순서는 아래와 같다.

1 카카오 앱등록

2 웹 URL등록

3 코드 작업  

 

1. 카카오 앱등록

https://developers.kakao.com/

Kakao Developers

 

상단 [앱] 버튼을 통해 진입하면 나의 앱을 추가할 수 있다. 이미지, 앱이름, 회사명등이 필수로 되어 있는데 비즈니스적으로 사용할게 아니라면 부담감 없이 작성해도 문제 없지 싶다. 작성해서 넘어가면 나의 앱이 짜잔!

 

 

2. URL 등록

만들어진 앱을 클릭하고 좌측 네비게이션을 통해서 [앱] → [일반] 을 통해 설정 페이지로 진입한다. 여기서는 두 가지를 체크해 두면 되는데,  일단 [앱키] 쪽에 'JavaScript 키' 값을 복사해두자. 이는 react 혹은 웹 작업을 진행할시에 사용되는 키 값이다. ios, 안드로이드 작업시에는 네이티브 앱 키를 사용하는등 사용 출처(?)에 따라서 필요한 키가 달라진다. 우리는 일단 React로 작업하는걸 기준으로 진행한다.

 

그 후 [플랫폼] 에서 Web 부분에 내 어플리케이션 URL을 추가해준다. URL 추가시에 로컬에서도 테스트를 진행하고자 한다면 localhost:3000 등도 넣어주면 된다. 10개까지 가능하다고 하니 부담없이 추가해도 된다.

 

3. 코드작업

 

이제 스크립트와 아래 참고 코드를 추가하면 작업끝! KAKAO_API_KEY는 위에서 봤던 JavaScript 키 값을 넣으면 된다.

<Script src="https://developers.kakao.com/sdk/js/kakao.js"  />

 

useEffect(() => {
    const initializeKakao = () => {
      if (window.Kakao) {
        if (!window.Kakao.isInitialized()) {
          window.Kakao.init(KAKAO_API_KEY);
        }
      } else {
        setTimeout(initializeKakao, 100);
      }
    };

    initializeKakao();
  }, []);

  const handleShareKakaoClick = () => {
    if (!window.Kakao) {
      return;
    }

    if (!window.Kakao.isInitialized()) {
      return;
    }

    if (!window.Kakao.Share) {
      return;
    }

    try {
      window.Kakao.Share.sendDefault({
        objectType: "feed",
        content: {
          title: "제목",
          description: "설명",
          imageUrl: IMAGE_URL.OG,
          link: {
            mobileWebUrl: BASE_URL,
            webUrl: BASE_URL,
          },
        },
        buttons: [
          {
            title: "초대장 보기",
            link: {
              mobileWebUrl: BASE_URL,
              webUrl: BASE_URL,
            },
          },
        ],
      });
    } catch (error) {
      console.error("카카오톡 공유 중 오류가 발생했습니다:", error);
    }
  };

 

위 코드를 붙여넣을때 참고할 부분은 아래 두 부분 이다.

1 window.KaKao.init() 함수가 두번 호출되면 이미 선언되었다며 에러를 뱉어낸다. 따라서 함수는 한번만 호출이 되도록 작성되어있다. 더 좋은 중복 호출 방법의 코딩방식을 적용하는것은 자율!!

 

2 연결 후에 클릭해보니 "because the scheme does not have a registered handler." 라는 에러가 발생했는데, 이는 웹에서 바로 진행해서 그렇다고 한다. 모바일 기기로 테스트를 해보면 정상적으로 카카오 공유하기 기능이 실행되는 것을 확인할 수 있다. (신기하게도 그 이후에 다시 버튼을 클릭해보니 현재는 웹에서도 정상작동하는것 ...같다..? 한번 공유가 되고 나서야 웹에서 작동이 가능한건가 싶다.) 참고

모바일 테스트 진행시에는 localhost:... 로 접속할 수 없기 때문에, 맥기준 터미널에서 ipconfig getifaddr en0 명령어를 통해 주소를 얻고, 얻은주소:포트번호 를 통해서 접속하면 된다!