전체 글

배경프로젝트 개발 후 Vercel 배포 시 아래와 같은 오류가 발생하였다.연결이 비공개로 설정되어 있지 않습니다. 공격자가 love-court-c75aeux9m-dong-kyu-lees-projects.vercel.app에서 사용자의 정보를 도용하려고 시도할 수 있습니다(예: 비밀번호, 메시지, 신용카드 정보). 이 경고에 대해 자세히 알아보기 net::ERR_CERT_COMMON_NAME_INVALID 향상된 보호 모드를 사용 설정하여 Chrome의 가장 강력한 보안을 활용하세요.  원인추측성이지만 필자의 결론은 '국내 보안 정책으로 인한 Vercel 도메인 차단'이었다.즉, 대한민국에서 Vercel 의 기본 배포 도메인을 차단한 것이다. 해결방법해결방법은 간단하다.Vercel 도메인을 차단했다면 도메..

✅ 왜 Metadata 대신 next-seo를 사용해야 할까?Next.js 15에서는 Metadata API를 사용하여 SEO 메타태그를 설정할 수 있지만, next-seo를 사용하는 것이 더 유리한 상황이 많습니다.아래 이유를 보면 언제 Metadata가 좋고, 언제 next-seo를 사용하는 것이 더 나은지 알 수 있습니다.🚀 1. Metadata API의 한계📌 1-1. Metadata는 서버 컴포넌트에서만 사용 가능Metadata는 서버 컴포넌트에서만 동작하며, 클라이언트 컴포넌트에서는 사용할 수 없음즉, 동적인 SEO 업데이트(예: 사용자 인터랙션에 따른 메타태그 변경)가 불가능클라이언트 컴포넌트("use client"가 포함된 컴포넌트)에서는 Metadata를 직접 사용할 수 없음❌ 예제:..

코드import OpenAI from "openai";// OpenAI 클라이언트 초기화const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY,});// OpenAI API 호출const completion = await openai.chat.completions.create({ model: "gpt-4o", // 사용할 AI 모델 지정 messages: [ // 시스템 메시지로 AI의 역할과 응답 형식 정의 { role: "system", content: systemPrompt }, // 사용자 메시지로 케이스 정보 전달 { role: "user", content: userPrompt }, ..

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 형식 응답 강제 });