현재 사주&타로 프로젝트를 만들고있다. + 포춘쿠키 기능 (헿)
사용자가 자신의 결과를 쉽게 공유할 수 있으면 좋겠다는 생각에 SNS 공유 기능을 살펴보았고, 사용자가 많은 카카오톡과 먼저 연동하는 작업을 진행했다.
카카오 디벨로퍼스 플랫폼 등록
[Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com](https://developers.kakao.com/)
카카오 API를 활용할 수 있는사이트.
회원가입 후 내 애플리케이션 - 앱설정 - 플랫폼 에 들어가서 사이트 도메인을 등록해준다.
사이트 도메인에 테스트 가능한 도메인을 입력한다. localhost 테스트때는 꼭 포트까지 등록해주어야함
앱 키 확인
공유하기 API는 JavaScript키가 필요하다.
카카오톡 공유하기 문서 확인
[Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com](https://developers.kakao.com/docs/latest/ko/message/js-link)
문서 - 메시지 - 카카오톡 공유: JavaScript내 JS SDK 데모를 참고했다.
구현하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<!-- 그림 위에 마우스 오버시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정 -->
<meta http-equiv="imagetoolbar" content="no" />
<!-- 캐쉬가 되지 않도록 하기 위해 정의.
페이지를 cache에서 가져오지 않게 하며 항상 서버에 접속해서 페이지를 가져옵니다.
그러므로 방문자의 브라우저가 항상 cache를 읽도록 해 놓아도 이것을 무시하고 페이지를 갱신합니다.-->
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="subject" content="이나당" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#000000" />
<!-- 웹사이트를 iOS 기기에 추가할 때 사용되는 아이콘 -->
<link rel="apple-touch-icon" href="/images/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/images/vite.svg" />
<link rel="manifest" href="/manifest.json" />
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<title>GPT가 말아주는 사주🍶&타로🍺</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="/js/index.js"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>프로젝트 메인 엔트리 포인트에 kakao API 스크립트를 추가해줬다.
헬멧이나 useEffect로 해당 컴포넌트 헤드에만 넣을까 하다가 사주랑 타로도 공유할거라서 엔트리 포인트에 넣어주었다.
// global.d.ts
interface Window {
Kakao: any;
}TypeScript 사용 시에는 TypeScript 가 window객체에 존재하는 Kakao객체를 인식할 수 있도록 src내에 global.d.ts를 설정해줘야 오류가 발생하지 않는다.
TypeScript는 정적 타입 언어이기 때문에 컴파일 시점에 타입 정보를 확인한다. 내가 등록해둔 window.Kakao는 JavaScript 런타임 시점에 브라우저 환경에서 제공되는 객체이기 때문에 해당 설정을 하지않으면 컴파일 시점에는 해당 객체 타입을 알지 못해 오류를 발생시킨다.
TypeScript와 JavaScript 동작 시점 비교
| 특징 | TypeScript (TS) | JavaScript (JS) |
|---|---|---|
| 언어의 성격 | 정적 타입 언어 | 동적 타입 언어 |
| 컴파일 시점 | TypeScript 코드를 JavaScript로 변환 (트랜스파일링) | 없음 (JS는 컴파일 없이 실행됨) |
| 타입 검사 | 컴파일 시점에 타입 검사 수행 | 없음 (런타임에만 타입 오류 발견 가능) |
| 런타임 시점 | 트랜스파일된 JavaScript 코드 실행 | 작성된 JavaScript 코드가 바로 실행됨 |
| 타입 정보 확인 | 컴파일 시점에 타입 정보를 확인하고 오류를 검출 | 런타임 시점에만 타입 오류가 발생할 수 있음 |
| 오류 검출 시점 | 컴파일 시점에 대부분의 오류를 발견 | 런타임 시점에 오류가 발생할 때만 발견 가능 |
| 브라우저에서의 동작 | 브라우저는 TypeScript를 직접 실행하지 않음 | 브라우저에서 직접 실행 가능 |
| 타입 정의 필요성 | 타입 정의가 필요할 수 있음 | 타입 정의 필요 없음 |
| 예시 | let x: number = 5; |
let x = 5; |
| 브라우저 실행 전 과정 | TS -> JS로 변환 (컴파일러 필요) | JS 코드를 바로 브라우저에 전달하여 실행 |
| 코드 작성 유연성 | 엄격한 타입 검사를 통해 오류를 줄임 | 타입 검사 없이 자유롭게 코딩 가능 |
// KakaoShareButton.tsx
import { useEffect } from 'react';
const KakaoShareButton: React.FC = () => {
useEffect(() => {
// 카카오톡 SDK 초기화
if (window.Kakao && !window.Kakao.isInitialized()) {
window.Kakao.cleanup();
window.Kakao.init(import.meta.env.VITE_KAKAO_APP_KEY);
}
}, []);
const handleShare = () => {
if (window.Kakao) {
// 카카오톡 공유 기능 호출
window.Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: 'GPT가 말아주는 사주🍶&타로🍺',
description: '내 포춘쿠키 결과 공유',
imageUrl:
'http://k.kakaocdn.net/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png',
link: {
mobileWebUrl: window.location.href,
webUrl: window.location.href,
},
},
});
}
};
return (
<button className="KakaoShareButton" onClick={handleShare}>
<img
src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
alt="카카오톡 공유 보내기 버튼"
/>
</button>
);
};
export { KakaoShareButton };완성된 코드는 이러하다.
cleanUp 함수를 추가하게 된 이유는 처음에 내가 앱키를 잘못넣어놓고 다른 원인인가 싶어서 이런 저런 이슈들을 찾아보다가 발견했다.
가끔 공유를 여러번 하게되면 초기화 되지않아 오류가 발생하는 경우가 있다고해서 사전에 방지할 용도로 넣었다.
'개발 > Javascript' 카테고리의 다른 글
| [Javascript] RTKQ(RTK 쿼리) 에서 세션인증 추가하기 (1) | 2024.09.26 |
|---|---|
| [Vercel] React - vite 를 사용한 프로젝트에 serverless function 추가하기 (6) | 2024.09.11 |
| [msw] msw 2.x.x 리액트에서 사용하기 (0) | 2024.06.11 |
| [Javascript] React에 Zustand와 TanStack Query 함께 사용하기 (3) | 2024.03.24 |
| [Javascript] Redux, Redux Toolkit (0) | 2024.02.27 |