번역까진 완벽하게 진행했다.
거의 완성품이라고 봐도 무방할 정도다 (미완성품)
나 이제 좀 쓸모있는놈 아닐까?
........이제 실제 공유기능을 추가해보도록 하겠다.
일단 기능추가는 React 서버에 구현할 예정이다.
앞단에 있는거니까 당연히 프론트앤드에서 개발한다.(너빼고 다암)
왜 ReactJS 서버에 구현해야 하나요?
- 카카오톡 API는 클라이언트 사이드에서 동작:
- 카카오톡 JavaScript SDK는 브라우저 환경에서 실행됩니다.
- 사용자의 브라우저에서 직접 카카오톡 앱으로 공유 요청을 보낼 수 있어 React에서 구현하는 것이 간편합니다.
- 백엔드(Flask)에서는 제한 사항 존재:
- 카카오톡 API는 사용자 인증 정보를 필요로 하기 때문에 클라이언트 사이드에서 처리하는 것이 적합합니다.
- Flask 서버에서는 카카오톡 공유 기능을 구현하기 위해 추가적인 OAuth 인증 과정을 거쳐야 합니다.
플랜
- ReactJS 서버에서 카카오톡 공유 구현:
- React 컴포넌트에 카카오톡 JavaScript SDK를 추가하고 초기화.
- 사용자가 버튼을 누르면 카카오톡 공유 기능 실행.
- (필요하면) Flask 서버 확장:
- Flask에서 카카오톡 OAuth를 활용한 추가 기능(예: 메시지 보내기)을 구현할 수도 있지만, 일반적인 공유 기능은 React에서 충분히 처리 가능합니다.
일단 카카오의 API를 사용하기 위해 당연히 API 키부터 발급받아야한다.
(무료다.)
카카오 디벨로퍼스 API 키 발급
- 카카오 디벨로퍼스에 접속하여 로그인한다.
- 로그인 후, 상단 메뉴에서 **"내 애플리케이션"**을 클릭한다.
- 새 애플리케이션 추가 버튼 클릭.
- 앱 이름을 입력 (예: Emoji Generator) → 앱 생성.
- 생성된 앱의 "앱 키" 탭으로 이동하여 JavaScript 키를 확인한다.
- 이 키를 노트패드에 잘 적어둔다. (React에서 사용 예정)
카카오 디벨로퍼스에서 앱을 추가할 때, 회사 정보가 없어도 걱정하지 말라
개인 개발자나 학습용으로 사용할 경우 아래와 같이 간단히 작성하면 된다
앱이 생성되었다면 내 애플리케이션에 접근해서 앱 키 항목으로 이동 후 javascript 의 키를 기억해두자.(어디 적어놓으라는말)
좋다 키발급까지 되었으면 이제 로직을 구현해보자.
프로젝트에 카카오 SDK 추가
카카오 SDK를 사용하려면 React 프로젝트에 SDK를 추가해야 한다.
SDK 스크립트 추가
public/index.html 파일에 <body> 태그 끝 부분에 아래 코드를 추가하여 카카오 SDK를 로드한다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>React에서 카카오톡 SDK 초기화 및 공유기능 함수 추가
SDK가 제대로 동작하려면 초기화가 필요하다. 아래는 처럼 초기화 코드를 작성한다.
로직
- 카카오톡 SDK를 초기화하여 사용할 수 있도록 설정
- window.Kakao.isInitialized()로 초기화 여부를 확인
초기화 코드 작성
useEffect(() => {
if (window.Kakao && !window.Kakao.isInitialized()) {
window.Kakao.init('YOUR_KAKAO_JAVASCRIPT_KEY'); // 아까 카카오에서 발급받은 JavaScript 키 입력
console.log('Kakao initialized');
}
}, []);
카카오톡 공유 기능 함수 추가
const shareToKakao = () => {
if (window.Kakao) {
window.Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: 'Generated Emoji',
description: 'Check out this AI-generated emoji!',
imageUrl: imageUrl, // 공유할 이미지 URL
link: {
mobileWebUrl: 'http://localhost:3000', // 모바일 환경 링크
webUrl: 'http://localhost:3000' // PC 환경 링크
}
}
});
} else {
alert('Kakao SDK is not initialized');
}
};
- **imageUrl**이 생성된 이미지 URL로 공유된다.
- 카카오톡에서 보이는 제목과 설명을 설정한다.
카카오톡 공유 버튼 추가
<button onClick={shareToKakao} style={{ marginTop: '10px', padding: '10px 20px' }}>
Share to Kakao
</button>
- 이미지 생성 후 "Share to Kakao" 버튼이 나타나도록 추가.
전체코드를 보면 요래 된다.
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [prompt, setPrompt] = useState('');
const [imageUrl, setImageUrl] = useState(null); // 이미지 URL 상태 추가
const [loading, setLoading] = useState(false); // 로딩 상태 추가
// 카카오톡 SDK 초기화
useEffect(() => {
if (window.Kakao && !window.Kakao.isInitialized()) {
window.Kakao.init('YOUR_KAKAO_JAVASCRIPT_KEY'); // 발급받은 JavaScript 키 입력
console.log('Kakao initialized');
}
}, []);
const handleGenerate = async () => {
if (!prompt.trim()) {
alert("Please enter a prompt.");
return;
}
setLoading(true);
setImageUrl(null);
try {
const response = await axios.post('http://127.0.0.1:5000/generate', { prompt });
setImageUrl(response.data.image_url);
} catch (error) {
console.error("Error generating image:", error);
alert("Failed to generate image. Please try again.");
} finally {
setLoading(false);
}
};
const shareToKakao = () => {
if (window.Kakao) {
window.Kakao.Share.sendDefault({
objectType: 'feed',
content: {
title: 'Generated Emoji',
description: 'Check out this AI-generated emoji!',
imageUrl: imageUrl, // 공유할 이미지 URL
link: {
mobileWebUrl: 'http://localhost:3000', // 모바일 환경 링크
webUrl: 'http://localhost:3000' // PC 환경 링크
}
}
});
} else {
alert('Kakao SDK is not initialized');
}
};
return (
<div style={{ textAlign: 'center', padding: '20px' }}>
<h1>Emoji Generator</h1>
<input
type="text"
placeholder="Enter your prompt"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
style={{ padding: '10px', width: '300px', marginRight: '10px' }}
/>
<button onClick={handleGenerate} style={{ padding: '10px 20px' }}>
{loading ? "Generating..." : "Generate"}
</button>
{imageUrl && (
<div style={{ marginTop: '20px' }}>
<h3>Generated Image:</h3>
<img src={imageUrl} alt="Generated" style={{ width: '300px', height: '300px' }} />
<button onClick={shareToKakao} style={{ marginTop: '10px', padding: '10px 20px' }}>
Share to Kakao
</button>
</div>
)}
</div>
);
}
export default App;
테스트를 진행해보자!
- React 서버를 실행해보자.
- 브라우저 콘솔(F12 → Console 탭)을 열어 Kakao initialized 로그가 표시되는지 확인하면 된다고 한다.
좋아. 아주 간단하게 잘 떴다.
이미지를 생성하고 나니 이미지 옆에 공유버튼이 생겼따...!
바로눌러.
최초 1회는 인증을 진행해야 되나보다.
인증후에 과연?
어림도없지 바로 에러발생...!
에러코드를 보니 4019가 발생했다.
에러 코드 4019는 웹 플랫폼에 도메인이 등록되지 않았음을 나타낸다.
카카오 애플리케이션에서 JavaScript SDK를 사용하는 경우, 반드시 도메인을 등록해야 한다고 함
해결 방법: 도메인 등록
- 카카오 디벨로퍼스에 접속:
- 카카오 디벨로퍼스에 로그인.
- 애플리케이션 설정:
- 내 애플리케이션 → 앱 선택 → 앱 설정 → 플랫폼 → Web으로 이동.
- 도메인 추가:
- "플랫폼 추가" 버튼 클릭 → "Web" 선택.
- http://localhost:3000 도메인을 등록: (개발환경 한정이다.)
- 도메인 등록 후 저장:
- 도메인 추가 후 저장 버튼을 눌러 적용.
빠르게 등록 완료.
다만 주의사항이 있다.
추가적인 주의 사항
- React 개발 환경:
- 개발 중에는 http://localhost:3000 도메인을 반드시 등록해야한다.
- 배포 환경:
- 배포 시에는 프로덕션 URL을 등록해야 한다고 한다.
- 추 후 배포 될 내 도메인을 등록하란 뜻이다.
- 아마 emoge.fun 같은걸로 만들 듯.
- HTTP/HTTPS 확인:
- React 개발 서버는 기본적으로 HTTP를 사용하므로 **http://**로 등록해야 한다.
- 추 후 SSL 인증도 기회가 되면 해보도록 함
아무튼 웹도 등록했으니 바로 테스트해본다.
성공~!!
공유 완료 되었다는 창도 아주 잘 나온다.
와우 미션 석세스...............
이제 공유기능까진 끝났다. 다음엔 뭘해볼까.........
다음편에서 께속.......
'만들고 싶은거 만들기' 카테고리의 다른 글
| 광고 수익을 창출할 웹사이트 만들어보기 2-10 (Frontend 꾸미기~! -완-) (3) | 2024.12.05 |
|---|---|
| 광고 수익을 창출할 웹사이트 만들어보기 2-9(Frontend 꾸미기~! CSS 삽질) (1) | 2024.12.05 |
| 광고 수익을 창출할 웹사이트 만들어보기 2-7( 한국어-영어 번역 기능 추가 및 API 비교) (2) | 2024.12.04 |
| 광고 수익을 창출할 웹사이트 만들어보기 2-6(React-Flask연동 feat.CORS) (2) | 2024.12.04 |
| 광고 수익을 창출할 웹사이트 만들어보기 2-5(React.js 프로젝트 만들기) (1) | 2024.12.04 |
