![]()
미리보기 시작하기메시지 템플릿 접속https://developers.kakao.com/tool/template-builder/app 카카오계정 accounts.kakao.com 템플릿 생성메시지 템플릿을 사용할 애플리케이션을 선택합니다. 메시지 템플릿 종류 선택필자는 피드형(A)로 선택하였습니다. 템플릿 수정${variable}// title 변수 생성ex) ${title}필자는 제목과 본문을 고정값을 사용하지 않고 코드단에서 컨트롤하고 싶었습니다.즉, 카카오톡 공유하기 실행 시 제목과 본문이 설정되도록 하고싶었습니다.이에 제목과 본문란에 텍스트가 아닌 ${title}과 ${content} 변수를 입력했습니다. 템플릿 저장 템플릿 수정을 마쳤다면 저장합니다. API 사용 function shareMes..
![]()
카카오 디벨로퍼 접속https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 애플리케이션 생성내 애플리케이션 > 애플리케이션 추가하기애플리케이션 정보를 입력하고 애플리케이션을 추가합니다. 플랫폼 등록생성한 애플리케이션 클릭 > 좌측 사이드바 '플랫폼' 클릭 > Web 플랫폼 등록 클릭카카오 JS SDK를 사용할 도메인을 입력합니다.필자는 배포 도메인, 개발 도메인을 설정 후 저장하였습니다. 환경변수 설정NEXT_PUBLIC_KAKAO_SDK_KEY={애플리케이션의 JavaScript 키}예시) NEXT_..
![]()
일반 메타데이터import type { Metadata } from "next";export const metadata: Metadata = { manifest: "/manifest.json", title: "투유, 투데이", description: "오늘, 너를 위한 한 장의 페이지", keywords: "생일, 기념일, 감성, 선물, 메시지, 카드, 템플릿, 나만의 페이지", openGraph: { title: "투유, 투데이", description: "오늘, 너를 위한 한 장의 페이지", url: "https://toyou-today.site", images: [{ url: "/img/og.png", width: 1200, height: 630, alt: "og-im..
![]()
배경Next.js로 개발한 템플릿 기반 웹 애플리케이션에서 하이드레이션 오류를 경험했습니다.이 애플리케이션은 다양한 블록 타입(텍스트, 이미지, 캘린더 등)을 포함한 템플릿을 렌더링하는 기능을 가지고 있었습니다. 특히 문제가 발생한 부분은 캘린더 컴포넌트였습니다. 서버에서 렌더링된 HTML과 클라이언트에서 렌더링된 HTML이 일치하지 않아 다음과 같은 오류 메시지가 발생했습니다.Error: Hydration failed because the server rendered HTML didn't match the client.오류 메시지를 자세히 살펴보면, 캘린더 컴포넌트의 ID 값과 클래스 이름이 서버와 클라이언트에서 다르게 생성되고 있었습니다.특히 날짜 관련 데이터(`Date` 객체)를 사용하는 부분에서 ..
![]()
테이블 정책-- 1. CREATECREATE POLICY "CREATE : 로그인한 사용자" ON tableName FOR INSERT WITH CHECK (auth.uid() IS NOT NULL);-- 2. READCREATE POLICY "READ : 모든 사용자" ON tableName FOR SELECT USING (true);-- 3. UPDATECREATE POLICY "UPDATE : 생성자" ON tableName FOR UPDATE USING (auth.uid() = "userId");-- 4. DELETECREATE POLICY "DELETE : 생성자" ON tableName FOR DELETE USING (auth.uid() = "userId");-- 참고--..
![]()
1. 컬럼 타입을 jsonb로 설정합니다. 2. 우측 톱니바퀴 클릭 후 Define as Array를 활성화합니다.
설치npm install @tsparticles/react @tsparticles/engine @tsparticles/shape-text @tsparticles/preset-bubbles 코드"use client";import { useEffect, useState } from "react";import Particles, { initParticlesEngine } from "@tsparticles/react";import { Engine, IOptions, RecursivePartial } from "@tsparticles/engine";import { loadTextShape } from "@tsparticles/shape-text";import { loadBubblesPreset } from "@t..
import { motion, useInView } from "motion/react";import { ReactNode, useRef } from "react";export const AnimationBlock = () => { const inViewRef = useRef(null); const isInView = useInView(inViewRef); // 다른 모든 애니메이션 타입 return ( 안뇽✨ {isInView ? "visible" : "hidden"} );};
