1. React Fragment? 여러 개의 자식을 하나의 부모 요소로 묶기 위해 사용하는 컴포넌트. HTML 구조 상에 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있게 해줌 import React from "react";function Example() { return ( Title This is a paragraph. );}export default Example;위의 예제에서 와 는 Fragment의 축약 문법으로, 렌더링 시 실제 DOM에 추가적인 노드를 생성하지 않음 이를 활용하기 좋은 예제가 map 을 사용할 때이다.map 의 경우 최상위 컴포넌트에 key를 부여해야하는데  key를 부여하고자 불필요한 div를 만들기보단 React.Fr..

API Routes ?NEXT.JS 에서 API를 구축할 수 있도록 도와주는 기능임 간단한 API를 구축해서 클라이언트, 즉 브라우저로 부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가아니면 또 다른 서드파티에서 데이터를 불러와서 전달을 해주는 일련의 동작들을 할 수 있음.   Next앱에서는 pages -> api 라는 폴더 내에 hello.ts를 보면 자동으로 api 파일이 생성되어있는 것을 확인할 수 있는데, // Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport type { NextApiRequest, NextApiResponse } from "next";type Data = { name: str..

Pre-Fetching이란?    -  페이지를 사전에 불러오는 것을 의미한다.    -  예를 들어 현재 페이지에서 링크로 연결되어 있는 페이지를 현재 페이지가 실행될 때 사전 미리 다 불러와 놓는 기   -  페이지 이동을 빠르게 지체없이 하기 위해 NEXT.JS에서 지원한다.   이는 개발자모드의 네트워크 탭에서 눈으로 확인이 가능하다. 이해를 쉽게 하기 위해 아래에는 각 페이지로 이동하는 Link와 버튼을 클릭했을 때 이벤트 핸들러를 통해 이동하는 경우 두 가지를 작성하여 확인해 보겠다. import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter..

Client Side Rendering(CSR) 의 단점을 효율적으로 해결하는 기술- 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있음   단점? 초기 접속 속도가 느려짐 화면에 나타나는데까지 걸리는 이 시간을  FCP(First Contentful Paint) 이라고 함 이는 웹 페이지의 성능을 대표할 정도로 중요한 지표  NEXT.JS 는 이런 단점을 해결하기 위해 사전 렌더링을 사용함  TTI : 상호작용까지 걸리는 시간     출처 : 한 입 크기로 잘라먹는 Next.js (15+)https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

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..