[토이프로젝트] 카톡으로 새해 인사 보내기

새해를 맞이하여 카톡으로 신년인사를 보내는 애플리케이션을 가볍게 만들고 싶었다.

애플리케이션 페이지이다. 지금까지 공유한 사람들의 리스트가 표시돼 있다. 이 리스트 데이터는 URL query string으로 관리된다. 여기서 이름을 적어서 공유할 수 있다.

웹으로 이동 버튼 혹은 이미지를 누르면 공유할 수 있는 페이지로 이동할 수 있다.
GitHub Page: https://github.com/rudeh1253/side-projects/tree/develop/newyear-relay-message-js

공유 기능을 구현하려면 Kakao SDK for JavaScript를 활용해야 한다.
공식 문서: https://developers.kakao.com/docs/latest/ko/message/js-link
그런데 나는 리액트로 개발하려고 하고 Kakao SDK for JavaScript 공식 문서에는 리액트에서 활용하는 방법은 설명되지 않는다. 구글링하다가 다음 글을 발견했다. Kakao SDK를 끌어와서 사용하는 것은 전적으로 다음 글을 참고한 덕분에 가능했다.
https://velog.io/@marksen/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0-%EA%B8%B0%EB%8A%A5

다음과 같은 코드를 통해 Kakao SDK를 사용할 수 있었다.

useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
    script.async = true;
    document.body.appendChild(script);
    return () => document.body.removeChild(script);
  }, []);

이 코드를 App.js에 삽입했다. 그 덕에 window.Kakao 객체를 사용할 수 있게 됐다.

if (window.Kakao) {
        console.log("exists");
        const Kakao = window.Kakao;
        if (!Kakao.isInitialized()) {
            Kakao.init(process.env.REACT_APP_KAKAO_API_KEY);
        }
        const completeUrl = `${process.env.REACT_APP_ROOT_URL}?path=${queryString}`;
        ...
} else {
    console.error("Kakao SDK를 사용할 수 없음.");
}

빌드한 후 AWS EC2 인스턴스에 Nginx를 사용해 애플리케이션을 배포했다.