TIL 20231224

이번 주 목표

resmemory 리액트 방향 설정

오늘 목표

resmemory 리액트 방향 설정

오늘 한 것

코육대 크리스마스 카드 만들기 도전

1. 코육대 크리스마스 카드 만들기 도전

- OPEN AI 로 이미지 생성 가능

- 카카오톡으로 무언가 공유하기 가능

- CORS 로 인해 OPEN AI이미지를 canvas에 그려 카카오톡으로 공유하기 불가능

- github secrets로 설정하고 config.js를 생성하면 클라이언트에 노출이 안 되는 줄 알았으나 노출이 된다.

-  API KEY 노출으로 인해 서버를 올리지 않고 배포하는 것이 무리가 있다고 판단하여 도전 종료.

- 메인으로 맡고 있는 프로젝트가 있어 서버비를 더이상 지출하기 힘들다고 판단하였다. 

 

실력과 열정이 부족해서 포기하지만 좋은 경험이었다. 

API KEY와 같은 중요 정보는 어떤 방법으로든 서버에서 관리해야 한다는 것을 다시 새길 수 있었다.

또한 CORS 해결은 하지 않았지만 다양한 방법으로 접근해 볼 수 있다는 것을 알게 되었다.

const main = document.querySelector("main");
let writtingCardInterval;

addEventListener("DOMContentLoaded", (event) => {
  Kakao.init(JAVASCRIPT_KEY);
});

async function createImage() {
  const desc = document.getElementById("prompt").value;
  main.innerHTML = `<div>이미지가 생성 중입니다...</div>`;
  const response = await fetch(
    "https://api.openai.com/v1/images/generations",

    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${OPEN_AI_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        model: "dall-e-3",
        prompt: desc,
        n: 1,
        size: "1024x1024",
      }),
    }
  );
  const result = await response.json();
  console.log(result);
  const imgurl = result.data[0].url;
  function startWriteCard() {
    if (imgurl) {
      writeCard(imgurl);
    }
  }
  writtingCardInterval = setInterval(startWriteCard, 500);
}

async function writeCard(url) {
  clearInterval(writtingCardInterval);
  const writeCardHTML = `
  <div>
  <img src = "${url}" id="image"  width="300" height="300"  />
  <input id="cardTitle"></input>
  <textarea id="cardText" rows="7" cols="33"></textarea>
  </div>
  <button onclick="compeleteCard('${url}')">카드 완성하기</button>
  `;
  main.innerHTML = writeCardHTML;
}

async function sendToFriend(cardTitle, cardText) {
  let imgurl;
  await html2canvas(document.querySelector("#capture"), {
    width: 500,
    height: 500,
    allowTaint: true,
    useCORS: true,
  }).then(async (canvas) => {
    imgurl = await canvas.toDataURL("image/png").split(",")[1];
  });

  const response = await fetch(
    "https://api.imgur.com/3/image",

    {
      method: "POST",
      headers: {
        Authorization: `Client-ID ${CLIENT_ID}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ image: imgurl }),
    }
  );
  const result = await response.json();

  if (result.data.link) {
    Kakao.Share.createDefaultButton({
      container: "#kakaotalk-sharing-btn",
      objectType: "feed",
      content: {
        title: cardTitle,
        description: cardText,
        imageUrl: result.data.link,
        link: {
          // [내 애플리케이션] > [플랫폼] 에서 등록한 사이트 도메인과 일치해야 함
          mobileWebUrl: "http://127.0.0.1:5500",
          webUrl: "http://127.0.0.1:5500",
        },
      },
      buttons: [
        {
          title: "나도 답장하기",
          link: {
            mobileWebUrl: "http://127.0.0.1:5500",
            webUrl: "http://127.0.0.1:5500",
          },
        },
      ],
    });
  }
}

function compeleteCard(url) {
  const cardTitle = document.getElementById("cardTitle").value;
  const cardText = document.getElementById("cardText").value;
  let base64Data;
  let image = new Image();
  image.crossOrigin = "Anonymous";
  image.onload = function () {
    let canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");
    context.drawImage(image, 0, 0);
    base64Data = canvas.toDataURL("image/png");
  };
  image.src = url;
  const compeleteCardHTML = `
  <div id="capture">
  <img src="${base64Data}"/>
  <h1>${cardTitle}</h1>
  <p>${cardText}</p>
  <img
  id="kakaotalk-sharing-btn"
  src="https://developers.kakao.com/assets/img/about/logos/kakaotalksharing/kakaotalk_sharing_btn_medium.png"
  alt="카카오톡 공유 보내기 버튼"
  onclick="sendToFriend('${cardTitle}','${cardText}')"
/>`;

  main.innerHTML = compeleteCardHTML;
}

 

OPEN AI로 생성한 크리스마스 선물

---

정리 

코육대 크리스마스 카드 만들기 도전

- OPEN AI 로 이미지 생성 가능

- 카카오톡으로 무언가 공유하기 가능

- CORS 로 인해 OPEN AI이미지를 canvas에 그려 카카오톡으로 공유하기 불가능

- github secrets로 설정하고 config.js를 생성하면 클라이언트에 노출이 안 되는 줄 알았으나 노출이 된다.

-  API KEY 노출으로 인해 서버를 올리지 않고 배포하는 것이 무리가 있다고 판단하여 도전 종료.

- 메인으로 맡고 있는 프로젝트가 있어 서버비를 더이상 지출하기 힘들다고 판단하였다. 

 

실력과 열정이 부족해서 포기하지만 좋은 경험이었다. 

API KEY와 같은 중요 정보는 어떤 방법으로든 서버에서 관리해야 한다는 것을 다시 새길 수 있었다.

또한 CORS 해결은 하지 않았지만 다양한 방법으로 접근해 볼 수 있다는 것을 알게 되었다.

 

KPT

Keep

열심히 해 보는 것

Problem

소극적인 투자

Try

기회와 비용을 잘 판단해보기

소감

평소에 다루지 않았지만 중요한 기능인

OPEN AI나 카카오톡 공유하기 기능을 접하게 되어서 재밌었다.