[Next.js] 카카오톡 공유하기 버튼 기능 만들기 (feat. TS)
Kakaotalk
NextJS
Javascript
Typescript• Next.js와 Typescript 환경에서 카카오톡 공유 기능을 구현하기 위해선 먼저 Kakao Developers에서 애플리케이션을 등록하고, JavaScript 키를 사용하며, 개발환경에서 사용할 서버 주소와 배포 주소를 등록해야 한다.
• 기능 사용을 위해 SDK를 추가하고, Next.js에서는 _document에서 공통적으로 사용할 <head> 또는 <body> 태그 등 안에 들어갈 내용들을 커스텀할 때 사용한다.
• 카카오 개발자 사이트에서 애플리케이션을 추가하고 JavaScript 키를 얻은 후, 이를 .env 파일에 작성하여 보안을 강화한다. 이후, 이 키를 이용하여 initialize를 진행한다.
• initialize는 상위 컴포넌트에서 마운트 될 때 적용되도록 설정하며, 여러 페이지에서 사용할 경우 상위 컴포넌트에 작성한다. 또한, window 객체에 Kakao가 있다고 알려주기 위해 전역으로 window interface를 정의한다.
북마크
공유하기
신고하기
용용용