TwentyTwentyOne

📘 [7편] 사용자 기록 저장하기 – 면접 이력 관리 & 날짜별 조회이제 우리의 인터뷰 트레이너 앱은질문 → 음성 답변 → GPT 피드백까지 전 과정을 완성했죠.이번 편에서는 사용자의 인터뷰 기록을 저장하고,날짜별로 복습/조회할 수 있도록 데이터 관리 기능을 추가합니다.🎯 이번 목표✅ 면접 진행 기록을 Firebase에 저장✅ 날짜별 인터뷰 결과 조회 기능✅ 간단한 히스토리 목록 UI 구현☁️ Firebase Firestore 연동✅ 1. Firebase 설치 및 초기화npm install firebase✅ 2. firebase.js// src/firebase.jsimport { initializeApp } from 'firebase/app';import { getFirestore } from 'fi..

📘 [6편] 인터뷰 시뮬레이션 루틴 만들기 – 질문 3개, 답변 3개, 피드백 3개이제 본격적으로 실제 면접처럼 질문 3개를 연속으로 진행하고,각각에 실시간으로 답변하고 평가받는 루틴을 구성해봅니다.GPT와 사용자가 대화하듯 인터뷰를 진행하며,각 질문에 대해 개별 피드백과 마지막 종합 피드백을 받아보는 게 목표입니다.🎯 이번 목표✅ GPT가 3개의 질문을 차례대로 제시✅ 질문 1 → 답변 1 → 피드백 1 (순차 진행)✅ 모든 피드백을 배열로 저장하여 표시✅ 마지막엔 종합 평가 요약🧠 GPT 질문 프롬프트 설계당신은 채용 면접관입니다. 프론트엔드 개발자 지원자에게 실전 면접 질문 3가지를 하나씩 순서대로 제시해주세요.질문은 아래 형식의 JSON 배열로 주세요:[ "첫 번째 질문", "두 번째 질..

📘 [5편] GPT 피드백을 시각화하자 – 점수 카드 & 개선 포인트 UI 구현지난 편에서 GPT가 답변을 평가하고 JSON 형태로 피드백을 주는 구조를 완성했죠.이제는 이 데이터를 사용자가 직관적으로 이해할 수 있도록깔끔한 UI로 시각화할 차례입니다.이번 글에서는 React 기준으로점수 카드, 종합 피드백 텍스트, 개선 포인트 툴팁 등을 구성해봅니다.🎯 이번 목표✅ GPT 피드백 점수 시각화 카드 만들기✅ 피드백 본문 렌더링✅ 개선 포인트 강조 표현✅ 모바일 대응 및 애니메이션 고려 (선택)🧾 GPT 응답 구조 복습{ "structure": 4, "delivery": 3, "content": 5, "vocabulary": 4, "feedback": "답변은 전체적으로 구조화되어 있으며....

📘 [4편] GPT가 면접 답변을 평가한다 – 피드백 프롬프트 설계자, 이젠 사용자가 말한 답변 텍스트를 GPT에게 넘겨서면접관처럼 피드백을 받는 기능을 구현해봅니다.이번 편의 핵심은단순한 "좋아요/나빠요"가 아니라구조, 전달력, 내용성, 어휘력 등을 기준으로 평가받는 시스템을 만드는 것!🎯 이번 목표✅ 답변을 GPT에 전달할 수 있는 프롬프트 설계✅ 면접관 역할을 명시하여 평가 유도✅ 구조화된 피드백(JSON) 형태로 받기✅ 프론트에서 시각화 준비💬 GPT 프롬프트 예시 (한국어 기준)당신은 채용 면접 전문가입니다. 아래 면접 답변을 보고 다음 항목에 대해 평가해주세요:1. 구조 (논리적인 흐름)2. 전달력 (말투, 어투, 명확성)3. 내용성 (질문에 대한 핵심 포함 여부)4. 어휘력 (다양한 단..

✅ Foursquare Provider 설정 예시 (NextAuth.js)import NextAuth from "next-auth"import FoursquareProvider from "next-auth/providers/foursquare"export default NextAuth({ providers: [ FoursquareProvider({ clientId: process.env.FOURSQUARE_CLIENT_ID, clientSecret: process.env.FOURSQUARE_CLIENT_SECRET, }), ],})📂 환경 변수 (.env.local)FOURSQUARE_CLIENT_ID=your-foursquare-client-idFOURSQUARE_CL..

🌐 NestJS HTTP Module – 외부 API 요청 완전 정복 가이드NestJS에서 외부 API 서버(REST, JSON-RPC 등)와 통신하려면@nestjs/axios 기반의 HTTP 모듈(HttpModule) 을 사용하는 것이 가장 간편하고 강력합니다.Axios 기반으로 작동하므로 익숙한 방식으로 API 요청을 만들 수 있고,RxJS 스트림과도 자연스럽게 결합됩니다.이번 글은 NestJS 공식 문서 - HTTP Module을 바탕으로기본 사용법, 비동기 설정, 전역 등록, RxJS 응답 처리법까지 실무 위주로 안내드립니다.✅ 1. 설치 및 임포트npm install @nestjs/axios axiosimport { HttpModule } from '@nestjs/axios';@Module({..

🧯 Prisma 관계(Relation) 에러 완전 해결 가이드 – 실무 트러블슈팅 모음"관계 정의했는데 마이그레이션이 안 돼요""왜 Prisma Client에서 join이 안 되죠?"→ 대부분은 작은 실수에서 시작됩니다.❗ 대표적인 에러 유형과 해결법1. Argument fields is missing in relation attribute.model Post { author User @relation(references: [id]) // ❌ fields 누락}✅ 해결법:model Post { authorId Int author User @relation(fields: [authorId], references: [id])}@relation을 사용할 때는 fields와 references를 ..

📘 [3편] 음성으로 면접 답변하기 – STT(음성 인식) 기능 추가이제 GPT 면접관이 질문을 던지면,사용자는 “말”로 답변할 수 있어야 하죠.이번 편에서는 브라우저나 앱에서 음성 인식(STT) 기능을 넣어사용자가 실제로 말한 내용을 텍스트로 변환하는 기능을 구현합니다.🎯 이번 목표✅ Web에서는 Web Speech API로 음성 인식 구현✅ React Native는 react-native-voice 설치 안내✅ 실시간 음성 인식 결과 표시✅ 인식된 답변을 GPT에 전달할 준비 완료💬 웹 기준: Web Speech API (크롬 전용)✅ 1. SpeechRecognition 초기화const SpeechRecognition = window.SpeechRecognition || window.webki..

🏠 Next.js App Router Self‑Hosting 완벽 가이드Next.js는 Vercel에 최적화되어 있지만, 자체 서버(Node.js, Docker, CDN 등)에서도 강력하게 작동할 수 있도록 설계되어 있습니다. 이 글에서는 App Router 기반 프로젝트를 스스로 호스팅할 때 알아야 할 모든 내용을 정리합니다.🛠 1. 실행 방식 선택Node.js 서버 실행npm run buildnpm run startnext start는 production 모드 실행모든 기능(SSR, API Route, 이미지 최적화 등) 사용 가능Docker 컨테이너next build → 이미지 생성 후 컨테이너화Kubernetes, AWS ECS, GCP 등에서 사용 가능정적 사이트 내보내기next export..

🧩 Next.js App Router에서 Script 효율적으로 사용하는 법외부 스크립트, 분석 도구, 광고 태그 등을 삽입할 때 성능을 해치지 않으면서 적절한 위치에 넣는 것이 중요합니다. Next.js는 이를 위해 next/script 컴포넌트를 제공합니다.✅ 1. 기본 사용법import Script from 'next/script';next/script는 태그보다 더 안전하고 최적화된 방식으로 작동합니다.로딩 전략을 조절해 퍼포먼스를 관리할 수 있습니다.✅ 2. 로딩 전략 (strategy)스크립트가 언제 로드되어야 할지를 명확히 설정하세요.전략 이름 설명beforeInteractiveReact hydration 전에 로드 – 페이지 초기 필수 스크립트afterInteractive(기본값) hy..