프론트엔드 개발자 프론트엔드 개발자

export async function POST(req: Request) { try { const body = await req.json(); const { dataid, role, userContent } = body; const dogDb = await dogDatas(dataid); async function waitForAiChatData(dataid: number, maxAttempts = 5, delayMs = 300): Promise { for (let attempt = 0; attempt 0) { return aiChatDb; } await new Promise(resolve => setTimeout(resolve,..

첫 시작을 할때 ai의 답변이 두개 각 다른 대화가 데이터 베이스에 저장됨이유가 뭔가?? const nanoid = customAlphabet("123456789", 8);const nid = Number(nanoid());이유는 이 코드 때문 랜덤으로 id 값을 만들기 위해서 사용 을 했는데렌더링 될때 마다 이 코드가 새롭게 id 값을 만들어 내기 때문에값이 두개가 나오는 거였음첫 숫자가 프라이머리키id 값 두번째 숫자가 ai 답변 id 값여기 부분을 수정 해야함

const uniqueData = Array.from( new Map(allData.map(item => [item.dogid, item])).values()); https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from1. Array.from() 얕게 복사된 새로운 Array 인스턴스를 생성  2.allData.map(item => [item.dogid, item]의 값을 가져옴 배열을 [dogid, item] 쌍으로 변환 3. new Map key-value 형태의 데이터를 저장 키 중복 ❌ (고유한 키만 유지) set말고 다른 방법도 있네

새로 고침을 불필요 하게 하는걸 파악이 되어서랜더링을 총 4번 하게 됨 잠시 코드 수정 중 기존 코드 다시 재 수정중이고 값을 어떻게 전달해서ai 답변을 가져 와야 할지 고민 1. 데이터베이스에 저장을 해서 가져온다2. 자동으로 출력이 되는가?

api를 다시 활용 해보기로 함렌더링 되는 순서를 확인1. 부모 서버 컴포넌트 렌더링2. 자식 클라이언트 컴포넌트 렌더링- 여기서 POST id api3. 부모 컴포넌트 재 렌더링 된 후 GET id 해야함 2번까진 순조롭게 진행 문제 사항 생김3번에서 id 값을 가져 오긴 하는데 기존 id 값을 가져옴쿠키를 사용 했을때랑 동일 한 상황 해결! 클라이언트에서 POSTuseEffect(() => { const storedData = sessionStorage.getItem('id'); // 로컬 스토리지에서 데이터 가져오기 if (storedData) { // 데이터가 있으면, 서버로 POST 요청 fetch('/api/postid', ..

생각 정리를 하면서 다양 하게 시도를 해봄 1. 자식에서 id 값을 세션 스토리지에 저장  - 서버 컴포넌트에서 불러 오기 위해서 쿠키로 저장  쿠기로 저장 했으나 브라우저를 새로고침해야 최신 값으로 가져 올 수가 있음  그러나 새로고침을 하면 nextjs 사용 하는 이유가 없는거 같아서 보류 2. openai 키를 api 라우트를 활용을 해서 클라이언트 컴포넌트에서 해야하나 고민 gpt는 키 노출 된 다고 안된 다고 해서 보류3. 서버액션도 동일 할 거 같음 결론은 자식에서 id값을 가져 온다고 해도 서버 컴포넌트에서 먼저 실행이 되니  결국은 서버 컴포넌트에선 값이 없다고 에러

문제 사항 생김id 값을 세션 스토리지에 저장 후 쿠키로 저장 해서서버 컴포넌트로 불렀는데 쿠키가 기존 값만 가져 와서 문제가 생김새롭게 변경 된 값을 불러 오질 못함 쿠키에서 api로 변경부모 서버컴포넌트 GET을 함자식 클라이언트 컴포넌트 여기에서 POST 보냄 여기서 문제 사항 GET먼저 실행해서 문제가 생김...  코드를 정리 후 상황을 정리 해봄부모가 서버 컴포넌트 자식이 클라이언트 컴포넌트 인 상황에서 자식 클라이언트 컴포넌트에서 값을 라우트를 활용해서  세션 스토리지에 저장 후 쿠키에 저장을 하는데 이때 쿠키에 저장은 되나 바로 최신값이 나오려면 브라우저에서 새로고침이 되어야 최신값이 나옴 이 최신 값을 서버 컴포넌트로 받은 값을 라우트 활용 해서 받음 지금 문제는 nextjs를 사용 하는데..