나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데이는 권장하지 않는 방법이라고 한다.   key에 index 값을 넣지 않는 것이 권장되는 이유는 리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.1. 항목 순서 변경 시 문제리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다. 이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다. 예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 ..

현재 react-hook-form을 사용해서 폼을 만들고 있는데 ,  분명 number 타입으로 만들었는데 아래와 같이 한글 자음도 입력을 받는것임.    아래의 링크와도 동일한 현상이 발생함.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number - HTML: HyperText Markup Language | MDN" data-og-description=" elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries." data-og-host="developer...

Typescript - 타입스크립트(Typescript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.- 타입스크립트를 사용하여 컴파일 시점에 에러를 확인할 수 있음1. 타입 애너테이션 기초아래와 같은 형태로 타입을 명시한다.  그 외의 다른 타입의 값을 할당할 때 에러 발생 let myVar: type = value// 문자열 타입 stringlet movieTitle: string = "Apple";movieTitle = "Pie";//movieTitle = 9; // errormovieTitle.toUpperCase();// 숫자 타입 numberlet numCatLives: number = 9;numCatLives += 1;//numCatLives = "zero" //erro..

https://supabase.com/docs/guides/realtime/presence Presence | Supabase DocsShare state between users with Realtime Presence.supabase.com        Pressence 는 채널에 config를 넣어줘야함 (아래 예시와 같이)import { createClient } from '@supabase/supabase-js'const channelC = supabase.channel('test', { config: { presence: { key: 'userId-123', }, },})        const supabase = createBrowserSupabaseClient(); ..

Realtime 기능을 구현하기 전에  사용하고 있는테이블에 Realtime 기능을 on 해줘야한다.  현재는 off로 설정되어 있으므로  enable realtime을 통해   on으로 활성화를 해준다.   이제 코드를 구현하면되는데 , 현재 필요한 액션은 두 개다. 1. 메시지를 보내는 기능 (insert)export async function sendMessage({ message, chatUserId }) {  const supabase = await createServerSupabaseClient();  //현재 접속중인 유저의 정보를 getSession으로부터 가져온다.  const {    data: { session },    error,  } = await supabase.auth.get..

https://supabase.com/docs/guides/realtime Realtime | Supabase DocsSend and receive messages to connected clients.supabase.com   Realtime 에는 세 가지 방식이 있음  BroadcastBroadcast 방식은 모든 사용자에게 동일한 데이터를 전송하는 방식입니다.이 방식은 채팅 시스템에서 실시간으로 메시지를 전송하거나, 다수의 사용자에게 동시에 알림을 보낼 때 유용합니다. Supabase의 Realtime 서비스는 이러한 Broadcast 방식을 지원하며, 사용자는 이를 이용하여 실시간 채팅 기능 등을 구현할 수 있습니다. PresencePresence 방식은 현재 연결된 사용자를 실시간으로 추적하는 ..

https://velog.io/@brgndy/Next.js-13-StrictMode-%ED%95%B4%EC%A0%9C  Next.js 13 StrictMode 해제- next.config.js 에서 reactStrictMode: false, 추가velog.iohttps://velog.io/@citron03/React%EC%9D%98-StrictMode%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C React의 StrictMode에 대해서React.StrictMode는 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다.velog.io  리액트에서는 StrictMode 컴포넌트가 있어서App 을 감싸고 있는 > 를 제거하면 된다. Next.js에서는 어떻게 비활성화하나 해서 찾아봄  ..

https://randomuser.me Random User Generator | HomeCopyright Notice All randomly generated photos were hand picked from the authorized section of UI Faces. Please visit UI Faces FAQ for more information regarding how you can use these faces.randomuser.me  랜덤한 사람들의 이미지들을 넣을 수 있는 무료 API       utils 폴더에  random.ts로 만들어놓으면 불러다 쓰기 편함export const getRandomImage = (index: number) => { return `https://r..

https://supabase.com/docs/guides/auth/social-login/auth-kakao Login with Kakao | Supabase DocsAdd Kakao OAuth to your Supabase projectsupabase.com   https://developers.kakao.com/ Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com      API 키 발급을 해야함  REST API 키를 복사해서    Supabase 에서 인증 ->프로바이더에서 카카오 인증   아래의 Kakao enabled을 활성화 한 후 RES..

로그인 기능 구현  Web Client 에서  supabase로 로그인 구현할거임 email, password를 통한 supabase.auth.signInWithPassword({...})  진행 signIn 컴포넌트에서 코드를 추가한다.  const supabase = createBrowserSupabaseClient();  const signInMutation = useMutation({    mutationFn: async () => {      const { error, data } = await supabase.auth.signInWithPassword({        email,        password,      });      if (data) {        console.log(da..