TIL

error.js 파일을 만들어 에러 발생 시 나올 페이지와 에러처리 로직 작성해보기로!!(use client) error.js 는 react Error Boundary 를 생성해 중첩된 경로에서 런타입 오류를 처리할 수 있도록 도와준다고 한다. ❓원리중첩된 하위 세그먼트와 해당 하위 항목을 자동으로 래핑해 React Error Boundary를 생성하고 오류가 발생하면 해당 세그먼트로 격리되서 나머지 앱은 정상적으로 동작  error 페이지 경로app/global-error.tsx 또는 그룹라우팅 안에 (page)/error.tsx'use client'; // Error components must be Client Componentsimport { useEffect } from 'react';impor..

'use client';import Image from 'next/image';import banner1 from '@/assets/images/bannerImage1.png';import banner2 from '@/assets/images/bannerCookie.png';import clrmTextImage from '@/assets/images/loginTextImage.svg';import bannerMeeting from '@/assets/images/bannerMeeting.png';import bannerText from '@/assets/images/bannerText.svg';import Link from 'next/link';import { useCallback..

배포 시 코드 useEffect(() => { const scrollToBottom = () => { endOfMessagesRef.current?.scrollIntoView({ behavior: 'smooth' }); }; scrollToBottom(); }, [readChatRoomMessages]); 채팅창에 새로운 메시지가 들어오면 스크롤이 가장 하단으로 내려갈 수 있도록 구현해두었다. yarn dev에서 문제없이 새로운 메시지가 들어오는 경우 하단으로 스크롤이 잘 이동되었다. 그리고 배포를 했는데 왠걸 새로운 메시지가 들어와도 스크롤이 자동으로 하단으로 내려가지 않았다. 또 아래와 같은 에러메시지가 나타난다 호출하지않았는데 왜 자꾸 호출이 되는건지 알다가도 모르겠다.. 어려워 너란 녀슥.. 진짜..

supabase에 이메일 값 전달 import { getLoginUserType } from '@/types/authUser/authUserTypes'; import { supabase } from '../supabase/supabase'; export const getUserIdByEmail = async (email: string): Promise => { const { data, error } = await supabase // //테이블 이름 .from('users') // 컬럼 .select('user_id') //필터 .eq('email', email as string) .single(); if (error || !data) throw error; return data; }; 쿼리를 이용해 e..

처음 로그인 페이지 기획 시 로그인 단계는 총 3단계로 구현하기로 기획하였습니다.(next.js 사용) DB > supabaseauth > nextAuth모달 > paraller, InterCepting Routes 1단계 모달 : 선생님 또는 수강생선택2단계 모달 : 선생님 선택 시 2단계 모달로 이동되며 직업, 분야를 추가로 받기3단계 모달 : 실제 회원가입 창 (이메일, 소셜로그인) 구현 방법1. zustand를 이용해 각각의 단계(1단계 2단계)에서 받은 내용을 스토어를 이용해 저장2. 3단계에서 소셜 회원가입 버튼을 누르면 각각의 소셜에서 주는 유저의 정보를 담아 스토어에 저장3. 유효성을 이용해 3개의 단계에서 받은 데이터가 잘 들어왔는 지 확인 후 수퍼베이스에 전송 🚨문제발생위 기획 단계를..