전체 글

Typescript 파일 실행방법1. Node.js 및 npm 설치TypeScript 실행을 위해 먼저 Node.js 공식 사이트에서 최신 LTS 버전을 설치합니다.설치 후 버전을 확인하세요.node -v # Node.js 버전 확인npm -v # npm 버전 확인2. 프로젝트 폴더 생성 및 초기화mkdir my-ts-project # 폴더 생성cd my-ts-project # 폴더 이동npm init -y # package.json 생성3. TypeScript 및 ts-node 설치npm install -g typescript ts-node또는 프로젝트 내 설치:npm install --save-dev typescript ts-node설치 확인:tsc -v # TypeS..

배경Supabase + Next.js를 활용한 풀스택 프로젝트 개발 중이었습니다.줄바꿈 테스트를 위해 Supabase Table Editer에서 직접 기존 컬럼값에 \n를 삽입 후 저장하였습니다. 수정을 통해 \n이 포함된 텍스트 데이터를 프론트엔드에서 불러와 \n를 기준으로 줄바꿈하여 렌더링하고 싶었고 아래와 같은 결과물을 기대했습니다.// JSX {verdict.reasoning}// Styleconst VerdictText = styled(Typography)` white-space: pre-line;`;// 예상 결과// 아래 텍스트와 같이 줄바꿈 문자( \n )를 기준으로 줄바꿈이 되어 렌더링되는 것을 기대했다.남자친구는 현재 취업 스트레스로 인해 정서적 지지를 필요로 하고 있으며, 여자..

사용방법컬렉션 클릭 > Variables 클릭 > 변수 설정 {{base_url}}/questions변수를 {{변수}} 로 감싸 사용합니다.

OpenAI 공식 권장사항OpenAI의 공식 문서에서는 다음과 같은 시스템 프롬프트 작성 지침을 제공합니다.1. 맥락 제공(Context): 충분한 배경 정보를 제공하세요.(ex: "React 초보자로 상태 관리에 어려움을 겪고 있습니다.")2. 역할 정의(Role): AI에게 특정 역할이나 페르소나를 부여하세요. (ex: "시니어 React 개발자로서 조언해주세요.")3. 명확성(Clarity): 명확하고 구체적인 지시를 제공하세요. (ex: "Redux 대신 사용할 상태 관리 라이브러리 3가지를 추천해주세요.")4. 단계별 지시(Step-by-step): 복잡한 작업은 단계별로 나누어 지시하세요.(ex: "1) 단점 설명 2) 대안 소개 3) 추천 라이브러리")5. 출력 형식 지정(Format): 원..

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..