[Dev_Log] 8/26 (목) 김정빈

## 오늘의 프로젝트에서 배운 점은 무엇인가요?

- **카카오톡으로 Bubble(동그란!) 공유하기**

사용자가 만든 버블을 SNS에 공유하면 정말 좋겠다는 생각에, advanced적인 내용이지만 기능에 꼭 넣고싶었다. 더불어서 팔레트 자체를 다운로드 받으면 원형의 이미지가 아닌 네모난 이미지가 저장이 되어서 그부분도 고치고 싶었다.
코로나 맵을 이용한 개인프로젝트를 진행할때 카카오맵을 사용하며 카카오 Develop을 사용해봐서인지, 이번 카카오톡 공유기능도 그렇게 생소하진 않았던 것 같다.
카카오의 API를 이용하기 위해서는 우선 public에 있는 index.html의 head안에 kakao develop script를 등록해주고, 사용하고자 하는 위치에 아래의 코드를 적용하면 된다.

```tsx
useEffect(() => {
window.Kakao.init(process.env.REACT_APP_KAKAO_KEY);
}, []);
```

위 과정은 카카오 API를 사용하기 전 Kakao의 api key를 등록하는 과정인데, 위 과정을 해주지 않는다면 kakao api를 정상적으로 사용할 수가 없다.
그리고 위 코드를 적용하면서 `"Kakao.init: Already initialized"` 라는 에러를 만났었다.
이는 init이 한번이상 실행이 되면서 불필요한 요청을 보냈다는 것인데, 에러가 나면 공유가 안되는것 뿐만 아니라 웹이 크래시가 나버렸다.
그래서 useEffect의 dependency를 이용해 최초 마운트될때만 실행해주도록 해주고, 카카오 api가 적용되는 최상위 컴포넌트에 위치시켜줬다.

```tsx
KakaoError {name: "KakaoError", message: "Kakao.init: Already initialized"}
message: "Kakao.init: Already initialized"
name: "KakaoError"
[[Prototype]]: Error at https://developers.kakao.com/sdk/js/kakao.js:1378:26 at https://developers.kakao.com/sdk/js/kakao.js:111:78 at https://developers.kakao.com/sdk/js/kakao.js:112:2
stack: "Error\n at https://developers.kakao.com/sdk/js/kakao.js:1378:26\n at https://developers.kakao.com/sdk/js/kakao.js:111:78\n at https://developers.kakao.com/sdk/js/kakao.js:112:2"
[[Prototype]]: Object
```

그리고 두번째로, 공유기능은 모두 구현했는데 이제는 우리가 가지고있던 이미지파일이 카카오톡 공유하기 메세지에 실어서 가지지가 않았다. 이는 base64이미지를 카카오톡에서 지원하지 않고 url 형식만 지원하기 때문이였는데, 그래서 카카오톡 서버를 이용하여, 카카오톡 서버의 URL을 이용하여 파일을 다운로드 받을 수 있도록 했다. 그러기 위해서는 Base64에서 일반 file로 컨버팅을 해주고 이를 카카오톡 서버에 업로드를 해서 최종적으로 url을 받아왔다.

```tsx
const kakaoShare = () => {
// ? # base64 -> file 형태로 만들기
function dataURLtoFile(dataurl, filename) {
const arr = dataurl.split(",");
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
const file = dataURLtoFile(viewImage, "mybubble.png");

// ? # 카카오톡 서버에 image 임시 업로드하기
window.Kakao.Link.uploadImage({
file: [file], // 배열로 감싸주기
}).then(function (res) {
// console.log("###", res.infos.original.url);
const imageUrl = res.infos.original.url;
setBubbleUrl(imageUrl);

// ? # 카카오톡 url 공유하기
window.Kakao.Link.createDefaultButton({
container: ".KAKAO_icon",
objectType: "feed",
content: {
title: `${userState.user.nickname === "" ? "Guest" : userState.user.nickname}님의 멋진 목소리 색깔이에요!`,
description:
textContent === ""
? "Sound Bubble이 뭔지 궁금하다면?"
: `${userState.user.nickname === "" ? "Guest" : userState.user.nickname} : ${textContent}`,
imageUrl: imageUrl,
link: {
mobileWebUrl: "https://www.soundbubble.io",
webUrl: "https://www.soundbubble.io",
},
},
buttons: [
{
title: "버블 구경하기",
link: {
mobileWebUrl: "https://www.soundbubble.io/palette",
webUrl: "https://www.soundbubble.io/palette",
},
},
{
title: "지금 만들러가기",
link: {
mobileWebUrl: "https://www.soundbubble.io/main",
webUrl: "https://www.soundbubble.io/main",
},
},
],
});
});
};
```

# 내일 할 일

- [ ] palette page css 수정하기
- [ ] 카카오톡공유 버튼 수정하기