const completion = await openai.chat.completions.create({ model: "gpt-4o", // 사용할 AI 모델 지정 messages: [ // 시스템 메시지로 AI의 역할과 응답 형식 정의 { role: "system", content: systemPrompt }, // 사용자 메시지로 케이스 정보 전달 { role: "user", content: userPrompt }, ], temperature: 0.7, // 응답의 창의성 조절 (0: 결정적, 1: 창의적) response_format: { type: "json_object" }, // JSON 형식 응답 강제 });
전체 글
소스코드https://github.com/LDK1009/Supabase-FCM-Push-Notification GitHub - LDK1009/Supabase-FCM-Push-Notification: Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장Next.js + Supabase + FCM 을 활용한 푸쉬 알림 기능 소스코드 저장소입니다. - LDK1009/Supabase-FCM-Push-Notificationgithub.com 배경문제는 Supabase 푸시 알림 기능 구현 중 FCM 토큰 발급 과정에서 발생했습니다. Supabase 푸시 알림 기능 구현을 위해서는 FCM(Firebase Cloude Message)을 활용해 FCM 토큰을 발급 받아야했습니다.FCM ..
방법1. Next.js https 개발 서버 실행npx next dev --experimental-httpsCA 인증서 관련 안내문 팝업 시 수락합니다. 방법2. mkcert를 이용한 방법(추천)프로젝트 경로에서 cmd 실행파일 편집기에서 프로젝트 폴더 경로로 이동합니다. 폴더 경로에 cmd 입력 후 엔터를 치면 해당 경로에서 cmd가 실행됩니다. mkcert 설치winget install mkcert해당 경로에서 mkcert를 설치합니다. local CA 생성mkcert -install next local server 연동mkcert localhost 서버 파일 생성const { createServer } = require("https");const { parse } = require("url");c..
미리보기 코드"use client";import { useState, useEffect } from "react";import { Button, Snackbar, Alert, styled } from "@mui/material";import { GetApp, Close } from "@mui/icons-material";/** * PWA 설치 프롬프트 이벤트 인터페이스 * 브라우저 표준이 아니므로 직접 타입 정의가 필요함 */interface BeforeInstallPromptEvent extends Event { prompt: () => Promise; userChoice: Promise;}/** * PWA 설치 버튼 컴포넌트 * 사용자가 PWA를 설치할 수 있도록 UI를 제공함 */const In..
src / components / KakaoAdFit.tsx// KakaoAdfit.jsximport {useEffect, useRef} from "react";// any 타입 대신 명시적 타입 정의interface KakaoAdFitProps { unit: string; width: number; height: number; disabled?: boolean;}// window 타입 확장declare global { interface Window { adfit?: { destroy: (unit: string) => void; }; }}function KakaoAdFit({unit, width, height, disabled}..
cmd 실행cmd에 접속합니다. ip 주소 확인ipconfig위 명령어를 통해 ip주소를 확인합니다.IPv4 주소를 복사합니다(위에서는 192.168.154.161) 모바일에서 접속휴대폰에서 복사한 ip주소로 접속합니다.http://{ip주소}:3000ex) http://192.168.154.161:3000
"use client";import { useState, useEffect } from "react";import { Switch, FormControlLabel, Typography, Box } from "@mui/material";import { NotificationsActive, NotificationsOff } from "@mui/icons-material";import { requestNotificationPermission, getNotificationPermissionStatus } from "@/service/notification";import { enqueueSnackbar } from "notistack";const NotificationToggle = () => { const [..
MUI 애니메이션이 적용되지 않는 이유MUI의 컴포넌트를 사용할 때 애니메이션이 정상적으로 적용되지 않는 경우가 있다. 이번 글에서는 그 원인과 해결 방법을 정리해본다.1. 애니메이션이 적용되지 않는 이유MUI 애니메이션이 동작하지 않는 주된 원인은 드로어 내부 아이템이 별도 컴포넌트로 분리되지 않았기 때문이다.MUI의 는 내부 아이템을 렌더링할 때 React.cloneElement 등을 활용해 애니메이션을 관리하는데, 이 과정에서 같은 내부 요소가 별도 컴포넌트로 분리되지 않으면 애니메이션 적용이 제한될 수 있다.즉, 내부에서 리스트 아이템을 직접 렌더링하면 애니메이션이 정상적으로 실행되지 않을 가능성이 크다.2. 해결 방법: 분리❌ 기존 코드 (애니메이션 미적용) {na..